www.webdeveloper.com
Results 1 to 7 of 7

Thread: How are they doing this?

  1. #1
    Join Date
    Oct 2012
    Posts
    16

    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
    Join Date
    Mar 2012
    Posts
    202
    It's a combination of effects. My guess is HTML5 animation using CSS3, powered by JavaScript (probably using the jQuery library). Basically a custom script would be made to hook on to the browser window's onscroll and onload events to perform calculations which would determine which applicable elements on the screen are visible (and haven't yet had their animations initiated), and would thus call their animation commands respectively. There are plenty of great free JavaScript tutorials and resources online (ex. w3schools.com, not only for JS) and the language is currently becoming more popular at a faster rate than any other. If you're really interested you should Google for the tutorials.

  3. #3
    Join Date
    Aug 2013
    Location
    Phoenix, AZ
    Posts
    104
    CSS3, JQuery, JavaScript

  4. #4
    Join Date
    Mar 2012
    Posts
    202
    Quote Originally Posted by WebDesignPhx View Post
    CSS3, JQuery, JavaScript
    Thanks for that generalized translation of my reply. Really clears things up.

  5. #5
    Join Date
    Aug 2013
    Location
    Phoenix, AZ
    Posts
    104
    Quote Originally Posted by Gray1989 View Post
    Thanks for that generalized translation of my reply. Really clears things up.
    I wish I could help you more...

    Maybe look into Bootstrap it uses Jquery/Java library I think...

    http://getbootstrap.com/

  6. #6
    Join Date
    Mar 2012
    Posts
    202
    Quote Originally Posted by WebDesignPhx View Post
    I wish I could help you more...
    I believe you are mistaken. I'm not the one in need of help; let me clear this up:

    Quote Originally Posted by Gray1989 View Post
    Thanks for that generalized translation of my reply. Really clears things up. /sarcasm

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,290
    They are using JQuery / Shopify and a Google CSS.

    All you had to do was "View Source Code" or "View Page Source" or whatever your particular browser says in the right click context.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles