Welcome to TalkGraphics.com
Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17
  1. #11
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    40,847

    Default Re: anime.js - Slideshow

    Egg - Acorns XAR files works. But when I substitute my images (properly named) it does not work.
    Attached Files Attached Files
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

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






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

    Default Re: anime.js - Slideshow

    Hi Gary, I've just selected the images within your file plus the line (of which I've applied a 99% transparency) and redifined them as htmlclass="photo"

    This works very well, I can even keep my eyes out of focus and see the images as 3D.

    LINK
    Attached Files Attached Files
    Last edited by Egg Bramhill; 04 June 2022 at 08:52 PM. Reason: Uploaded xar file
    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. #13
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    40,847

    Default Re: anime.js - Slideshow

    Thanks Egg. I can't figure out what I did wrong.

    I named all my images and the red line except as Acorn suggested, a duplicate of the first image sent to the back of the pack.

    I must have messed up somewhere.

    BTW - DP+ reduces screen captures way small and I have not figured out what the secret % is for scaling them 1:1 (1:1 does not work)
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	slide by slide.png 
Views:	15 
Size:	57.0 KB 
ID:	132151  
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

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






  4. #14
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    40,847

    Default Re: anime.js - Slideshow

    So, what if I just want the most basic fade slideshow. One image fades into the next. 1.5 second intervals?

    I prefer to have the images be the focus not the various distortions.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

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






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

    Default Re: anime.js - Slideshow

    Quote Originally Posted by Initiostar View Post
    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: Attachment 132147 - I'll have to wait for the Magix upgrade to see anime.js for real.
    Gary, XDPX19 possibly is working as you have used jQuery in the design. Hard to check as I do not have (or want) XDPXv19, but it could be serendipitous if that is the case.

    The proper firing up of the animation would be javascript:anime(carousel).restart(); but this will not replay the Xara animation. You would have to uncover the Xara trigger for that.

    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
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Default Re: anime.js - Slideshow

    Quote Originally Posted by gwpriester View Post
    So, what if I just want the most basic fade slideshow. One image fades into the next. 1.5 second intervals?
    I prefer to have the images be the focus not the various distortions.
    Gary, Egg pointed out the issue was with the htmlclass Name.

    The simplest code becomes:
    <script>
    var images = [].slice.call(document.querySelectorAll('.photo')).s lice(1, 100);
    var showtime = 750;
    var carousel = {
    targets: images,
    opacity: [0, 1],
    delay: anime.stagger(4 * showtime),
    easing: 'linear',
    duration: 2 * showtime,
    endDelay: showtime,
    loop: true,
    }
    anime(carousel);
    </script>
    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+

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

    Default Re: anime.js - Slideshow

    Thanks for this Acorn.

    For those like me who totally missed this, the difference in the htmlclass name is I used Xara's default curly quotes vs the tick mark quotes. So my next question to stump the experts is how do I get the tick mark quotes?

    Ah, hold on, I get it now. I copied and pasted my htmlclass="photo" and that caused the problem. So if I key in the same text instead of paste it in, then the quotes will automatically be correct and not curly quotes.
    Last edited by gwpriester; 04 June 2022 at 11:58 PM.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

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






 

 

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
  •