Create Your Own Trendy Parallax Website Layout. Advertisement Introduction Apart form the pinterest dynamic fluid layout and big background image layout, parallax layout is still one of the trend in web design simply because it's a great technique to showcase product/service through an automated presentation by using scrolling. Take Minicooper Japan as an example, when user scrolls down the website, each slide introduces the car features with seamless, perfectly timed animations which is a really great user experience. In this post, we have a few of javascript plugins that are able to achieve pretty impressive parallax animations. Parallax Javascript Plugins It's not easy to make a parallax layout, because parallax layputs usually contain a lot of subtle animations and you really need to plan ahead for this.
Sequence JS Sequence is the jQuery slider plugin with infinite style. Inspirations There are way too many parallax websites out there. SUPERSCROLLORAMA. SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome.
First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. Think of it as a controller for animation. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)?
Example Use the addTween method to build your scroll animations. In the example below, the animation fades in when scrolled into view. The 4th parameter is offset, which you can use to adjust the scroll point at which the animation is triggered. The 5th parameter is reverse, which you can use to disable reverse animation. controller.removeTween('#fade'); Example: What The Heck Is Responsive Web Design?
Responsive websites respond to their environment Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts) Recommended Approach Go All In On Responsive Make pages that look great at any size. “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” - Jeffrey Veen Small + Medium + Large One site for every screen. Everyone. The Boston Globe Largest responsive web design project to date bostonglobe.com Grey Goose Responsive site for Grey Goose with parallax scrolling animation www.greygoose.com Barack Obama The Obama campaign continues to be at the leading edge of web technology. barackobama.com Time & Money Older Browsers Performance Content Website vs. “Stop Thinking in Pages. Frameworks (save time) or Roll Your Own (more control) Best Practices. jQuery.parallax.
Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing.
Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events. zLayer jQuery Plugin - Orientate Elements. zLayers is a jQuery parallax plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent. zLayer is perfect for interactive illustrations and rich user experience through creative methods through a parallax effect.
Best part about zLayer is how easy, lightweight, and quick the plugin is! zLayer Example – Art By: Brandon Zomora Click here for a larger version of this example zLayer Example Tutorial on how to setup your zLayers (Newer API than in this video, but video is still helpful) Download a copy of zLayer v0.4 (Mar 25th, 2013) Version 0.4 is now out!. Script has been updated to use CSS3 trnaslate3d for GPU performance and translate / top x left for fallback.Script has been updated to use touch and MS Point.API Update. jquery.zlayer.min.js (1.718kb) jquery.zlayer.full.js (4.069kb) Download the Example API & Options Layer (required) Mass (optional) Default is 10 Confine (optional)