Welcome to TalkGraphics.com
Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 28

Thread: HTML, CSS, JS

  1. #11
    Join Date
    Feb 2007
    Location
    UK
    Posts
    20,184

    Default Re: HTML, CSS, JS

    and yet there is so much more to a successful website, especially a commercial one, than just publishing something
    -------------------------------
    I don't know why they call it common sense, there's rarely that much around when you need it....

  2. #12
    Join Date
    Feb 2007
    Location
    UK
    Posts
    20,184

    Default Re: HTML, CSS, JS

    maybe I should just be drawing stick figures
    -------------------------------
    I don't know why they call it common sense, there's rarely that much around when you need it....

  3. #13
    Join Date
    Feb 2007
    Location
    UK
    Posts
    20,184

    Default Re: HTML, CSS, JS

    and there will always be a need for stick figures...

    not arguing with you joe, but this is a xara web design thread, it is about xara web design using the xara programs; there will always be other ways of doing things
    -------------------------------
    I don't know why they call it common sense, there's rarely that much around when you need it....

  4. #14
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: HTML, CSS, JS

    From Acorn: I find most coding on-line is clunky and not best suited for the Xara environment.....
    I must admit that your anime.js code is far easier to use Acorn. I tried for a few hours getting the Chris's link to the CodePen before / after to function correctly in Xara.

    I found yours far easier to use and it only required the width of the slider placeholder to be amended to the image width. Excellent!

    LINK
    Last edited by Egg Bramhill; 24 July 2022 at 11:16 PM.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #15
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Default Re: HTML, CSS, JS

    @Egg, thanks.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  6. #16
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: HTML, CSS, JS

    And it works on touch screens too. Kudos.

    EDIT: Perhaps not. Maybe the slider needs to be larger?
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #17
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,464

    Default Re: HTML, CSS, JS

    You guys are so quick. I'm still 'ooh, if I change 0% to 100% the transition goes vertical.' Not even thought about variants.

    I agree that Acorn's solution is much, much smaller, making it easier to try and follow. I'm going to play around to see if I can understand what's actually happening, but will probably return with hair-splitting questions that don't really matter.

  8. #18
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,464

    Default Re: HTML, CSS, JS

    I found lots of ways to break it and a few ways to adjust the speed of the slider controls, which I promptly reset.


    I moved the 'Website Head' code to the 'Page Head' as that makes more sense to me, and removed the <style> section that creates the shadow.

    Adjusting the percentages in 'clipPath' (Page/Body) has interesting results.
    I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around. I tried 'rotate' and 'fade' but that just broke it.
    Likewise, 'direction' is set to 'forward' which makes you presume 'backward' would do something, but no, no it doesn't.


    I would like to play around with the look of the slider control. Changing the circle to a diamond, changing the colour etc. I can't determine any reference to the shapes that form the control.
    I can make the circle start in different positions by editing, SLIDER Placeholder/Body under value=, but it doesn't reveal the after pic until you click it.
    These are just things I would like to play with and are not important.


    Lastly. I have no idea what your icon, with <svg><path></path></svg> in the Placeholder/Body does. It's clearly needed in the page area...but why?

  9. #19
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: HTML, CSS, JS

    Hi Chris,

    I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around.
    Link to js easing types below.

    It's fun to see the results but the problem is the easing effects the images but not the slider.

    Demo using easeInOutBounce

    js easing types
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  10. #20
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Info Re: HTML, CSS, JS

    Quote Originally Posted by Chris M View Post
    I found lots of ways to break it and a few ways to adjust the speed of the slider controls, which I promptly reset.
    I moved the 'Website Head' code to the 'Page Head' as that makes more sense to me, and removed the <style> section that creates the shadow.
    Adjusting the percentages in 'clipPath' (Page/Body) has interesting results.
    I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around. I tried 'rotate' and 'fade' but that just broke it.
    Likewise, 'direction' is set to 'forward' which makes you presume 'backward' would do something, but no, no it doesn't.
    I would like to play around with the look of the slider control. Changing the circle to a diamond, changing the colour etc. I can't determine any reference to the shapes that form the control.
    I can make the circle start in different positions by editing, SLIDER Placeholder/Body under value=, but it doesn't reveal the after pic until you click it.
    These are just things I would like to play with and are not important.
    Lastly. I have no idea what your icon, with <svg><path></path></svg> in the Placeholder/Body does. It's clearly needed in the page area...but why?
    @Chris M, I placed a fair number of examples of using anime.js in the TG Tag Cloud as nuggets.

    The anime.js Library only needs calling up the once for a website so Website Head is correct.
    If you add it to Page, you will fall into the habit of copying a page and forgetting the code was there.
    Even if the animation is on another random page, the Website Head code ensure it will run.

    .shadow was my preference over Xara's mucking about with page shadows.
    It is not required in Xara Plus or in this example.

    You need to understand CSS clip-path inset parameters (top-left - bottom right) format: https://css-tricks.com/almanac/properties/c/clip-path/.

    For easing and direction, look at anime.js documentation: https://animejs.com/documentation/.

    For CSS formatting of Range Sliders: https://freefrontend.com/css-range-sliders/ and https://uicookies.com/range-slider-css/.

    I reported how <svg><path></path></svg> was needed for a Xara install of anime.js; even I am yet to discover the why.
    If I hadn't, using anime.js, would be a lot less satisfying to use.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •