A propos de l'agence de création et réputation. Jet Edge. Airnauts. Soleil Noir 2012 | We believe in... 18 Beautiful Examples of Parallax Scrolling in Web Design. The parallax effect in web design is something that has gained popularity over the past couple of years. When used properly, it can result in a rich and engaging user experience with seamless navigation. When used poorly, it can result in just a page with a lot of elements moving around and a terrible UX. If you’re considering using a parallax effect in your next web design project, we’ve gathered some great examples here to inspire you.
Hero A portfolio WordPress theme that uses a parallax effect in the home page banner to highlight the site’s key message in an engaging fashion. Bagigia Scroll down to explore the website and enjoy a 360 view of the products. Whiteboard Here the concept is the same, fixed images with texts and content moving, creating a nice and smooth effect. Playtend Playtend choose a fun concept and executed it pretty well. New Zealand Scroll down to explore things to do in New Zealand while you see more beautiful background images.
TokioLab Cheese Please Marcus Thomas no leath. A Simple Parallax Scrolling Technique. Create a Parallax Scrolling Website Using Stellar.js. Behind The Scenes Of Nike Better World. 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. You add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.
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. Scrollorama. Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested. Design and build your site, dividing your content into blocks. Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.
Target an element and animate its properties. The animation parameters you can use are: Hook into the onBlockChange event. scrollorama.onBlockChange(function() { alert('You just scrolled to block#'+scrollorama.blockIndex); }); Note: If you are not using the pinning feature, it is recommended you disable it.