Welcome to TalkGraphics.com
Results 1 to 9 of 9
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Lightbulb anime.js - Star Wars

    I've yet to work out a clean way to add perspective to the text but here is a first attempt:

    Demo: https://shared.xara.com/AZFSBQ3dlo
    Design: anime.js - Star Wars Blurb.xar

    Anyone want to design an anime.js star background?

    Text also seems to require another animated shape that is SVG.
    Here it is hiding as the Star Wars logo with Name htmlclass="fudge".

    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
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,816

    Default Re: anime.js - Star Wars

    Looks good so far Acorn, not sure I can help.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

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

    Default Re: anime.js - Star Wars

    Finally, a film for readers.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

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






  4. #4
    Join Date
    Jun 2012
    Location
    CZECH
    Posts
    128

    Default Re: anime.js - Star Wars

    Great job
    ____________________________
    __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;

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

    Lightbulb Re: anime.js - Star Wars

    I worked out how to get the perspective - in the end, fairly easy.

    Made in into a Timeline...

    Demo: https://shared.xara.com/EFxiJ3xsMb
    Design: anime.js - Star Wars Episode IV.xar - all of 35kB.

    Acorn



    Animation:

    Code:
    <style>
    .fudge, .warp {
      opacity: 0;
    }
    </style>
    <script>
    var showtime = 8000;
    var prose = document.querySelectorAll('.warp, fudge');
    var tale = {
      targets: '.fairy',
      opacity: [1, 0],
      duration: showtime,
      easing: 'linear',
      endDelay: 1000,
    }
    var starWarsLogo = {
      targets: '.fudge',
      opacity: [
        {value: 0, duration: 500},
        {value: 1, duration: 1500},
        {value: 1}
      ],
      scale: [
        {value: 4.5, duration: 500},
        {value: 4.5, duration: 1500},
        {value: 0}
      ],
      duration: 2 * showtime,
      easing: 'easeOutQuint',
    }
    var prologue = {
      targets: prose,
      opacity: anime.stagger(1),
      scale: [1.65, 0],
      perspective: 300,
      rotateX: 80,
      translateY: [100 + anime.stagger(40), 0],
      delay: anime.stagger(showtime / 4),
      easing: 'easeOutQuint',
      duration: 8 * showtime,
    }
    var sw = anime.timeline({});
    sw
      .add(tale)
      .add(starWarsLogo)
      .add(prologue);
    </script>
    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. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,427

    Default Re: anime.js - Star Wars

    That's a lot sweeter Acorn!
    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. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Default Re: anime.js - Star Wars

    Here is a star field: https://shared.xara.com/hEmeLAuUoQ

    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+

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

    Default Re: anime.js - Star Wars

    May the Force be with you
    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

  9. #9
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,816

    Default Re: anime.js - Star Wars

    Love it, Acorn, good job!
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

 

 

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
  •