Pure CSS Parallax Websites by Keith Clark

This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website. If you find this article useful and want to explore CSS Parallax further, you may find my follow-up article "Practical CSS Parallax" an interesting read. Parallax is almost always handled with JavaScript and, more often than not, it's implemented badly with the worst offenders listening for the scroll event and modifying the DOM directly in the handler, triggering needless reflows and paints. All this happens out of sync with the browsers rendering pipeline causing dropped frames and stuttering. Deferring the parallax effect to CSS removes all these issues and allows the browser to leverage hardware acceleration resulting in almost everything being handled by the compositor. Try the demo The theory Before we dive into how the effect works, let's establish some barebones markup: And here are the basic style rules: Next is the parallax__layer class. Try it

Creating a basic parallax scrolling effect using CSS and JavaScript Creating a basic parallax scrolling effect using CSS and JavaScript Created: July 24th, 14 The most dominate trend of 2013 in web design undoubtedly is the parallax scrolling effect, with no signs that's waning. The anatomy of a parallax scrolling effect Wikipedia succinctly defines a parallax scrolling effect as: "a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion." As it pertains to a webpage, a parallax effect is tied to the scrolling of the page; as this action is performed, different elements on the page such as the background image and foreground elements move/ animate at a different pace relative to the scrollbar's, all orchestrated using JavaScript. Demo: Simple parallax scrolling effect The JavaScript used in any parallax effect effectively all do the following two things at a minimum: Starting page with background and bubbles

10 Best Parallax Scrolling Plugins Long scrolling sites have become a really common web design trend. One of the coolest sub-types of this are the parallax scrolling sites, where images move to give off a parallax effect. As the user scrolls down the page, the animations are triggered off and overall it gives a fresh look and feel to any website if implemented correctly. Making a parallax scrolling site is often tedious because it requires in-depth knowledge of CSS, Javascript and good web design to pull off. DISCLAIMER: Before starting off, note that to use these plugins some knowledge of web technologies(HTML/CSS/Javascript) is required. Parallax Scrolling Plugins 1. ScrollMagic is one of the most popular and feature-rich jquery plugins out there. ScrollMagic has lots of examples listed. About: Homepage: Created by: Jan Paepke Installation: 2. 2. skrollr skrollr is a lightweight pure Javascript and CSS library, with no jQuery involved. Homepage: 4.

janpaepke/ScrollMagic Simple ScrollMagic Tutorial - triggerHook, setPin, TimelineMax Following up on my previous ScrollMagic tutorial, we’ll add some more content and learn how to animate GreenSock tween and timeline using ScrollMagic, how to control the duration of our pin and much more. What you will learn: How to animate GreenSock TweenMaxHow to animate GreenSock TimelineMaxHow to add multiple ScrollMagic scenes to a pageHow to precisely control the duration and timingand much more… In the previous ScrollMagic Tutorial – Fullscreen Slideshow you’ve learned how to pin sections when they reach the top of the viewport. Today we’ll add a short pause to our pin and animate a few other tweens and timelines. If this is your first time checking out ScrollMagic, then I recommend going through my previous ScrollMagic tutorial first. 1. The first section will have a content centered similar to last time. The sections 2,3 and 4 will have a ScrollMagic card on the left and the copy on the right. The html is pretty straight forward, we have 4 sections with a unique ID and content inside.