• Home
  • Implementing a Parallax Scrolling Effect in Web Design
 
 
Collection by Giancarlo Leonio
2202
2
1

Implementing a Parallax Scrolling Effect in Web Design

Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. When combined with the scrolling functionality of a website, parallax scrolling effects can have a strong visual impact and a more exciting browsing experience. See these techniques from TechRepublic, Net Magazine, Webdesigntuts+, and more, for creating your own website utilizing the parallax scrolling technology.

15 Items
  • Tech Republic
    Tutorial: How to implement the parallax scrolling effect, part 1

    Ryan Boudreaux explains the code behind achieving the parallax scrolling effect on your website. Part 1 of this two-part series covers the first two s

    751
    0
    0
    Favorite
    Grab It
  • Tech Republic
    Tutorial: How to implement the parallax scrolling effect, part 2

    Ryan Boudreaux presents the final part of his two-part tutorial on implementing parallax scrolling in your web design. A download includes all the dem

    301
    0
    0
    Favorite
    Grab It
  • net tuts+
    A Simple Parallax Scrolling Technique

    Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness!

    327
    0
    0
    Favorite
    Grab It
  • www.egstudio.biz
    Easy Parallax with jQuery

    When we created our coming soon page, we've decided to tweak it up a bit by making a cool parallax effect between the content and the background of the website. In this tutorial we will demonstrate how to create a basic instance of the parallax effect using jQuery.

    307
    0
    0
    Favorite
    Grab It
  • www.abduzeedo.com
    Super Easy Parallax Effect with jQuery

    We have gotten quite a few emails from people asking how we did the parallax effect on the new design. We are not master of Javascript but we always like to learn and explore new things. That was the case of the parallax effect. This kind of effect brings us back memories from the 8 and 16 bit video-game eras and it was a really good exercise to improve our web design skills.

    287
    0
    0
    Favorite
    Grab It
  • stephband.info
    jQuery.parallax

    git clone git://github.com/stephband/jparallax.git. 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. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

    98
    0
    0
    Favorite
    Grab It
  • www.davecranwell.com
    jQuery scroll parallax plugin | Dave Cranwell

    London School of Hygiene and Tropical Medicine. Nuffield Trust. Generic horizontal example. Generic vertical example. Parallax, for those not in the know, "is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight" (wikipedia). You'll perhaps know it better as "that sideways pan effect animators use where the distance moves slowly but layers of scenary nearer the 'camera' move quicker".

    164
    0
    0
    Favorite
    Grab It
  • Impressive Webs
    Parallax Scrolling Scripts and Plugins

    Parallax scrolling sites have been a pretty hot UX thing of late, being showcased on various blogs. Although the "ooooh! aahhh!"-ness of it all has subsided, I think this type of site is certainly ...

    108
    0
    0
    Favorite
    Grab It
  • blog.fraser-hart.co.uk
    jQuery Parallax Scrolling Tutorial

    In this example, I will show all that's needed to achieve jQuery parallax scrolling using 3 image layers

    159
    0
    0
    Favorite
    Grab It
  • Net Magazine
    Building a parallax scrolling storytelling framework | Tutorial

    Reading MS Paint Adventures I had an epiphany: in this day and age, there is little justification in keeping comics within the constraints of early 20th century offset printing. No need for inked line art, or hand-lettered speech bubbles that compete with art for page real estate, no need to pack the drawings into grids of fixed dimensions and print them in multiples of four: those are all solutions to problems we no longer have.

    138
    0
    0
    Favorite
    Grab It
  • dev.jonraasch.com
    Scrolling Parallax Plugin for jQuery

    Created by Jon Raasch. The Scrolling Parallax Plugin for jQuery is used to create a parallax animation effect that is bound to the browser scrollbars and user mouse wheel. When scrolling down a web page with the parallax applied, the background scrolls at a different rate from the page, creating a sense of depth.

    89
    0
    0
    Favorite
    Grab It
  • YouTube
    Parallax Scrolling in an Easy Way

    http://webdesy.com/wordpress-tutorials/parallax-scrolling-builder/ - This screencast shows how to easily (without JS or jquery knowledge) and simply create a...

    107
    0
    0
    Favorite
    Grab It
  • stackoverflow.com
    javascript - Jquery Parallax Scrolling effect - Multi directional

    I threw something together is jsfiddle for you. http://jsfiddle.net/9R4hZ/40/ The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function. It uses the ARROWS or MOUSEWHEEL for scrolling.

    220
    0
    0
    Favorite
    Grab It
  • www.ianlunn.co.uk
    JavaScript Parallax Effects: A Deeper Look

    Earlier this year, I wrote a tutorial explaining how the Nike Better World website was created and how you could use jQuery to create that effect on your own website. Since the launch of Nike Better World, the web has gone parallax crazy with many websites trying their own hand at the effect. Having seen many-a-site using the effect and having worked on a few too, I think it’s time to dig deeper and take a closer look at some of the issues around using the JavaScript parallax effect, as well as answering some overdue questions from my original tutorial.

    131
    0
    0
    Favorite
    Grab It
  • web design tuts plus
    Create a Parallax Scrolling Website Using Stellar.js

    One of the biggest trends in recent modern web design is use of parallax scrolling effects. In this tutorial I’m going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js. Introduction. The parallax scrolling effect has been popular ever since sites such as Nike’s Better World introduced it on their websites a few years ago.

    246
    0
    0
    Favorite
    Grab It
Discussion

-