Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default anime.js - Slideshow

    This is a very simple but versatile slider.
    I do, however, need to work out why I have to add an SVG shape to trigger it to work.

    I have a collection of boxes with a Bitmap Fill of each image.
    All have a special Name of htmlclass="photo".

    To avoid an abrupt transition at the end of the loop, I have cloned the topmost image, removed its Name and pushed it to the bottom of the stack.

    To change the animation, I used simple number arrays to transition the opacity, size and rotation.
    You can alter all of these with a varied transform-origin to get zoom ins from the centre or edge, or even flips and spins.
    You change the showtime value to determine the timing.

    The quirk is the small Red Line, top left of the images that I had to add to fire up the animation.

    Demo: https://shared.xara.com/JHj0oTO04U
    Design: anime.js Slideshow.xar

    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+

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: anime.js - Slideshow

    That has a lot of promise, perhaps a circular reveal rather than one image one above the other. It would make a very interesting slideshow. I've experimented a bit but not perfected it at present.
    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

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: anime.js - Slideshow

    Thanks Egg, I've tried a circular 400px dia reveal with:

    <style>
    .photo {
    opacity: 0;
    transform-origin: 0 0.5;
    }
    </style>
    <script>
    var showtime = 3000;
    var carousel = {
    targets: '.photo',
    opacity: [0, 0.85, 1],
    rotateY: [270, 360],
    scaleX: [0, 0.5, 1],
    scaleY: [0, 0.35, 1],
    translateX: [-800, -600, 0],
    delay: anime.stagger(3 * showtime),
    easing: 'easeInQuad',
    duration: showtime,
    loop: true,
    }
    anime(carousel);
    </script>

    My changes are in red.
    The images have to be forced to be PNG as well.

    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+

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

    Default Re: anime.js - Slideshow

    That's great too but here's more along the line of my thinking. The start/end image would need more of a code clean-up.
    LINK


    Attached Files Attached Files
    Last edited by Egg Bramhill; 04 June 2022 at 01:27 AM.
    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. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: anime.js - Slideshow

    Here's another way to use this anime:

    LINK
    Attached Files Attached Files
    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

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    40,856

    Default Re: anime.js - Slideshow

    Acorn - I love the simple elegance of the first slide show. Where do the photos go? Ah, wait, I see, the photos are stacked one on top the other. Cool. Thanks for this.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook






  7. #7
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    40,856

    Default Re: anime.js - Slideshow

    I'm missing something here. How do I add the SVG image. And why can't I select it in your example? And what is the function of the red line?

    So near and yet so far.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook






  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,908

    Default Re: anime.js - Slideshow

    Thanks again Egg for the inspiration.

    Try:
    <script>
    var images = [].slice.call(document.querySelectorAll('.photo')).s lice(1, 100);
    var showtime = 1000;
    var carousel = {
    targets: images,
    zIndex: [2, 1],
    rotate: [270, 0],
    opacity: [0, 1],
    delay: anime.stagger(4 * showtime),
    easing: 'linear',
    duration: 2 * showtime,
    endDelay: showtime,
    loop: true,
    }
    anime(carousel);
    </script>

    This still requires the thin red line but it is cut out of the animation itslef.

    I put my images with an overlap so that they spin above the previous one and pause .
    It is a never-ending Escher staircase.

    One thing I didn't mention and it's quite useful for sliders, if you open another tab and then come back to the slider, you find it has been paused all the time you were away.
    Saves on computing power and stops the end viewer missing out as your image sequence might be significant.

    Demo: https://shared.xara.com/BgmEHQ4LQN
    Design: anime.js Spinning Circular Slideshow.xar

    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+

  9. #9
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    867

    Default Re: anime.js - Slideshow

    Out of curiosity I had a play with Egg's file and to my surprise it worked with Pro X19, whereas the original does not. Maybe the images were original PNGs?

    Added a bit of standard Xara animation too: https://initiostar.co.uk/demo/circles/

    No idea why it should work: anime.js Slideshow-3_test.xar - I'll have to wait for the Magix upgrade to see anime.js for real.
    Gary
    www.initiostar.co.uk


    Xara Pro X 19.0.0.64291 May 3 2022

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,429

    Default Re: anime.js - Slideshow

    Maybe the images were original PNGs?
    Interesting Gary. Does the fly-in-buttons.xar work?
    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

 

 

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
  •