SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How are they doing this?

    Hi guys,

    I recently came across this site:

    http://www.mightymatcha.com/

    and thought it was pretty nice. I'm interested in how I can integrate similar animation on my own sites. I like the way that certain things move when I scroll to them. For example, when the homepage loads the green bowl moves in from the left and the tins on the right move up.

    What is it that the developer has used to do this?

    Many thanks for any suggestions!

    Happy New Year!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mike52321 View Post
    What is it that the developer has used to do this?
    Mostly JS, but also some CSS3 animation.

    An easy way to test this is to turn off JS. Most of the functionality disappears, but you'll still see some jar lid animation without JS.

  3. #3
    SitePoint Enthusiast JM Rosón Bravo's Avatar
    Join Date
    Feb 2014
    Location
    Bilbao (Northern Spain)
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The animation itself can be implemented using CSS3 keyframe-based syntax – @keyframes rule to be more specific – to add the initial and final styles and a series of properties to set the start, direction or directions and duration of the animation.

    Here you have some examples of the rule, which you can even download, in the following page:

    http://tutorialzine.com/2013/10/12-a...n-finally-use/

    As you see, you can develop well performed, smooth animations without scripting at all.

    There are many other examples and tutorials out there.

    The problem is that @keyframes rule is only supported by modern browsers:

    - Chrome 2+,
    - Safari 4+,
    - Firefox 5+,
    - IE10 PP3,
    - iOS Safari 3.2+,
    - Android 2.1+.
    - Opera 12+


    For a more detailed approach to the subject, there are a series of compatibility tables like:

    http://caniuse.com/#feat=css-animation
    http://www.quirksmode.org/css/contents.html
    http://www.webbrowsercompatibility.c.../tablet-phone/
    http://www.normansblog.de/demos/brow...hecklist-css3/

    And others.

    Although modern browsers render this and other rules properly, not every user updates their software regularly. Even in the case of automatic update features that ensure a timely installation of recent releases, a percentage of users turn off automatic updating and are still using out-of-date versions.

    Internet Explorer only renders this rule from the 10 version, which requires Windows 7+ to be installed.

    A good approach to ensure multibrowser efficiency would be using @keyframes rule in combination with some user agent version detection technique to load the appropriate script or library to create the same animation effect.
    José Manuel Rosón Bravo


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
  •