Welcome to TalkGraphics.com
Page 3 of 3 FirstFirst 123
Results 21 to 28 of 28

Thread: HTML, CSS, JS

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

    Default Re: HTML, CSS, JS

    @Egg, I agree that when using a slider for comparing one image to another, effects like bounce wouldn't be a good choice. Linear and fade are the only two viable options I can think of. The examples are well worth keeping, even though I haven't been brave enough to wander too far into animation other than the Xara offerings.

    @Acorn, Your explanation as to why Website/Head is used makes perfect sense - notes are being made.
    The clip-path mention was me poking things with a stick to see what the percentages did.

    The links I'll look into and have a play. I have to be honest and say that I don't follow/understand a lot of your tutorials, and selfishly only play with those I see a use for. I therefore miss a lot of the rudiments.

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

    Info Re: HTML, CSS, JS

    Quote Originally Posted by Chris M View Post
    @Acorn, Your explanation as to why Website/Head is used makes perfect sense - notes are being made.
    The clip-path mention was me poking things with a stick to see what the percentages did.
    The links I'll look into and have a play. I have to be honest and say that I don't follow/understand a lot of your tutorials, and selfishly only play with those I see a use for. I therefore miss a lot of the rudiments.
    Chris, it doesn't bother me as I also started by poking things with a stick.

    The before-after slider, I considered from first principles:

    • Two stacked images.
    • What CSS exists to crop - clip-path: inset().
    • How to control - HTML Range Slider.
    • How to manage programmatically updating - anime.js.

    anime.js manipulates CSS numeric values.
    It is a highly cut-down re-implementation of what jQuery can achieve.
    I could have gone for straight JavaScript but the fun with anime.js is how you easily script different behaviours.
    The manipulated object needed a handle so it gained a target (Name) of 'after'.

    You can interrupt and hijack an animation with .seek().
    The Range Slider does this with its 'oninput' in-line JavaScript.

    The animation itself uses the update function call to move the Range Slider.

    To understand anime.js better, you need to krok that is a collection of JavaScript statements in a framework to manipulate CSS values.
    You need to have some knowledge of both.

    For such stick-poking, i would use W3 Schools with searches like 'w3 css fade' or 'w3 js random'.

    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+

  3. #23
    Join Date
    Jun 2012
    Location
    CZECH
    Posts
    128

    Default Re: HTML, CSS, JS

    Sorry if I didn't understand your discussion. Many years ago I bought this widget for 2. It works great.

    https://www.benjaminmoses.co.uk/exam...fterwidget.htm
    ____________________________
    __I am sorry for my bad English__

    P&G 10, 11, 15; XWD Premium 11,15; XDPX 15.1; XDPX 18.5; XDPX 19; XBuilder;

  4. #24
    Join Date
    Mar 2009
    Posts
    4,294

    Default Re: HTML, CSS, JS

    Quote Originally Posted by Spamiky View Post
    Sorry if I didn't understand your discussion. Many years ago I bought this widget for 2. It works great.

    https://www.benjaminmoses.co.uk/exam...fterwidget.htm
    Originally Ben Moses offered it for free to help out TG members.

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

    Default Re: HTML, CSS, JS

    Quote Originally Posted by Boy View Post
    Originally Ben Moses offered it for free to help out TG members.
    Bed Moses was a Xara employee and so leveraged his inside knowledge of the XDA to build a Xara Third Party Widget.
    It probably still has fixed sizes and there is nothing to adjust.

    It does its job.
    My suggestion is simpler, if not better, and free.

    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. #26
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    866

    Default Re: HTML, CSS, JS

    I like the flexibility with anime.js and you could style the progress bar with some research and practise. https://initiostar.co.uk/demo/anime-reveal/

    The only drawback with the current Pro X19 (May 3) is we don't have 'Shapes as SVG' which was introduced in Pro + v21.6 (or I cannot find it).
    Gary
    www.initiostar.co.uk


    Xara Pro X 19.0.0.64291 May 3 2022

  7. #27
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: HTML, CSS, JS

    Here you go Gary on Xara Designer + v22:
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.png 
Views:	35 
Size:	53.1 KB 
ID:	132493  
    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

  8. #28
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    866

    Default Re: HTML, CSS, JS

    Thanks Egg, that confirms that Pro X v19 does NOT have (as yet) 'Shapes as SVG'. Time will tell what comes next for Pro X.
    Gary
    www.initiostar.co.uk


    Xara Pro X 19.0.0.64291 May 3 2022

 

 

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
  •