SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anyone know how these animations are done?

    I came across this site, https://mixpanel.com/ and I am in love with every aspect. Its so clean and nicely animated, but Im not sure how they trigger the animations! The first one is how the 2nd section slowly slides up over the top section when you start scrolling. Then there are other transitions I can see clearly in the css, but how do you set the trigger? Is this in css also or js?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The parallax scrolling technique is explained here and uses a small snippet of JS to change the speed of the backgrounds as they scroll creating a parallax effect.

    The boxes in the middle are just CSS transitions which are triggered on hover.

    The jumping images at the bottom are done with jquery where the margin-top is manipulated on hover (although this effect could be done somwhat similarly in css only).

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The parallax scrolling technique is explained here and uses a small snippet of JS to change the speed of the backgrounds as they scroll creating a parallax effect.

    The boxes in the middle are just CSS transitions which are triggered on hover.

    The jumping images at the bottom are done with jquery where the margin-top is manipulated on hover (although this effect could be done somwhat similarly in css only).
    Thanks Paul, your the man! That Parallax effect is exactly what I was looking for. One more question with regards to that site, this page https://mixpanel.com/segmentation/ about half way down theres a section that says "A simple way to answer complex questions." and the image gets triggered to reveal the other image. I guess thats JS to dynamically change the image widths depending on some kind of "Y" axis variable?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes as the window scrolls the left position of one image is adjusted to move over depending on how far the window has scrolled.

    The images are absolutely placed on top of each other and a third separator image is also placed in the middle and both the middle image and the left image are adjusted as the window is scrolled.

    JS isn't my thing but I managed to do something similar with the help of some jquery.

    http://www.pmob.co.uk/temp/parrallax3-sideways.htm

    The code is all in the head and is pretty straight forward so you should be able to follow.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Yes as the window scrolls the left position of one image is adjusted to move over depending on how far the window has scrolled.

    The images are absolutely placed on top of each other and a third separator image is also placed in the middle and both the middle image and the left image are adjusted as the window is scrolled.

    JS isn't my thing but I managed to do something similar with the help of some jquery.

    http://www.pmob.co.uk/temp/parrallax3-sideways.htm

    The code is all in the head and is pretty straight forward so you should be able to follow.
    Yeah you pretty much duplicated it! Thats awesome... thanks for showing me


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
  •