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?
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?
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 