Simple parallax scrolling tutorial

Simple parallax scrolling tutorial

January 27, 2014 • Web development144 Replies

Share on Facebook18Tweet about this on Twitter2Share on Google+10Share on LinkedIn2

I have received many messages and a positive feedback regarding my recent parallax website tutorial. Based on your feedback I have decided to create another tutorial, this time aimed more towards a junior and mid developers.

I will try to explain everything in more detail and you can also download the starting files to follow the tutorial step by step.

First have a look at what we will be creating and download the starting files.

View Demo Download Starting Files

Looking for the final files? They are exclusively available to my email subscribers. Sign up here.

Quick overview

In this tutorial you will learn:

  • how to setup your html for a parallax website
  • how to animate background image at a different speed then page scrolling
  • how to precisely control the timing and duration of your animations.

Instructions

Open the index.html, /css/main.css and /js/_main.js files in your favorite code editor. That’s where we will be doing all our updates. Before we dive in, lets quickly explain what we have for start.

Step 1 – Setup

<body>
    <main>
   	 
        <section id="slide-1" class="homeSlide">
            <div class="bcg">
                <div class="hsContainer">
                    <div class="hsContent">
                        <h2>Simple parallax scrolling is...</h2>
                    </div>
                </div>
            </div>
        </section>
	    
        <!-- Section 2 -->
        <!-- Section 3 -->
        <!-- Section 4 -->
	    
    </main>
</body>

HTML
The code in index.html is pretty simple, we have 4 sections with a background image .bcg and a content container .hsContainer (home slide container) which is by default horizontally and vertically centered.

CSS
Each section has a custom background and the content is repositioned to the desired position. The style of the text is also slightly different on each of the sections, that’s purely to make it nicely readable.

JS
In the _main.js we have a simple script which preloads our background images (thanks to ImagesLoaded) and resizes each of the sections to be 100% of the browser viewport.

If you view the index file in a browser now, you will see 4 sections scrolling as they would normally and the background image fixed as defined in our stylesheet. Next we’ll initiate the Skrollr.js and start creating our parallax scrolling effect.

Step 2 – Skrollr.js

Add the following lines to your main.js to enable Skrollr.js and to refresh it after our sections are resized to 100% of the height of the viewport.

// Init Skrollr
var s = skrollr.init();

// Refresh Skrollr after resizing our sections
s.refresh($('.homeSlide'));

Section 1

Simple parallax scrolling tutorial

Now we have to add some data attributes to our sections to see Skrollr in action and to see our background image and content to move at a different speed. Copy and paste the following lines into your index.html.

<section id="slide-1" class="homeSlide">
    <div class="bcg" 
        data-center="background-position: 50% 0px;" 
        data-top-bottom="background-position: 50% -100px;" 
        data-anchor-target="#slide-1"
    >
        <div class="hsContainer">
            <div class="hsContent" 
                data-center="bottom: 200px; opacity: 1" 
                data-top="bottom: 1200px; opacity: 0" 
                data-anchor-target="#slide-1 h2"
            >
                <h2>Simple parallax scrolling is...</h2>
            </div>
        </div>
    </div>
</section>

What we are telling the browser is to change the background image position from 50% 0 to 50% -100px, which means that the image is moved up by 100px from the start of the scrolling until the bottom of the #slide-1 hits the top of the browser viewport.

If this is your first project using Skrollr, you might find the data attributes a bit confusing.

Join me in the Parallax Scrolling Master Class to learn exactly how they work.

The text is scrolling with the page until the #slide-1 h2 hits the centre of our browser and then animates quickly of the screen and fades out, which we have defined in data-top="bottom: 1200px; opacity: 0".

The data-anchor-target is a very powerful attribute, which enables you to define exactly when should your animation start and finish in relation the defined target element. Using this attribute correctly enables you to have a precise control over the timing of your scrolling animations.

Section 2

Simple parallax scrolling tutorial

Copy and paste the following lines of code to enable animations on the second slide.

<section id="slide-2" class="homeSlide">
    <div class="bcg" 
        data-center="background-position: 50% 0px;" 
        data-top-bottom="background-position: 50% -100px;" 
        data-bottom-top="background-position: 50% 100px;" 
        data-anchor-target="#slide-2"
    >
        <div class="hsContainer">
            <div class="hsContent" 
                data-center="opacity: 1" 
                data-center-top="opacity: 0" 
                data--100-bottom="opacity: 0;" 
                data-anchor-target="#slide-2"
            >
                <h2>great for story telling websites.</h2>
            </div>
        </div>
    </div>
</section>

Here we are animating the background image at the same speed to keep things consistent. The difference between #slide-1 and #slide-2 is that the second slide is scrolling through the whole viewport, but the first one loads already visible.

That’s why we are defining both data-top-bottom and data-bottom-top. data-center is actually not doing anything as it’s value is exactly half way between top and bottom, but experiment with different values and see how the data-center affects the whole animation.

Think about it as another keyframe.

We are going to slightly tweak our css for the .hsContent and h2 of this slide, because we want this heading to be fixed to the bottom of the viewport. Update your css for Slide 2 with the following styles.

/* Slide 2 */
#slide-2 .bcg {background-image:url('../img/bcg_slide-2.jpg')}
#slide-2 .hsContent {
    margin-left: -450px;
    top: auto;
}
#slide-2 h2 {
    position: fixed;
    top: 70%;
}

Now the heading is fixed 70% from the top and doesn’t scroll with the page. This enables us to make this heading visible much earlier than before when it wasn’t fixed. We are also fading it out when the #slide-2 is 100px from the bottom of the browser.

Section 3

Simple parallax scrolling tutorial

You should know by now what to do…copy and paste the following lines of code into your index.html.

Even better than copy and paste is to type in the data attributes manually, thats what we do in the parallax masterclass.

<section id="slide-3" class="homeSlide">
    <div class="bcg" 
        data-center="background-position: 50% 0px;" 
        data-top-bottom="background-position: 50% -100px;" 
        data-bottom-top="background-position: 50% 100px;" 
        data-anchor-target="#slide-3"
    >
        <div class="hsContainer">
            <div class="hsContent" 
                data--50-bottom="opacity: 0;" 
                data--200-bottom="opacity: 1;" 
                data-center="opacity: 1" 
                data-200-top="opacity: 0" 
                data-anchor-target="#slide-3 h2"
            >
                <h2>Now go and create your own story</h2>
            </div>
        </div>
    </div>
</section>

Again our background is animating at the same speed as the rest of the page, which makes things nicely consistent. You can tweak the settings to whatever you like, just keep in mind that subtle parallax scrolling effects usually work much better and are easier on eyes than quick animations.

Section 4

Simple parallax scrolling tutorial

Hey you, still following? Lets copy and paste settings for our last slide.

<section id="slide-4" class="homeSlide">
    <div class="bcg" 
        data-center="background-position: 50% 0px;" 
        data-top-bottom="background-position: 50% -100px;" 
        data-bottom-top="background-position: 50% 100px;" 
        data-anchor-target="#slide-4"
    >
        <div class="hsContainer">
            <div class="hsContent" 
                data-bottom-top="opacity: 0" 
                data-25p-top="opacity: 0" 
                data-top="opacity: 1"  
                data-anchor-target="#slide-4"
            >
                <h2>and share mine.</h2>
            </div>
    	</div>
    </div>
</section>

For the final slide we are also going to slightly tweak our css. We want the text to be fixed to the top of the browser and we will remove the background color and padding. Update your stylesheet with the following highlighted lines of code.

/* Slide 4 */
#slide-4 .bcg {background-image:url('../img/bcg_slide-4.jpg')}
#slide-4 .hsContent {
    margin-left: -450px;
    position: fixed;
    top: 250px;
}
#slide-4 h2 {
    background: none;
    padding-left: 0;
    padding-right: 0;
}

This makes the heading on the last slide fixed to 250px from the top. The skrollr attributes for .hsContent are making the heading invisible until the top of #slide-4 is 25% from the top of the browser window.

Step 3 – Force Height

If you have followed the tutorial and got to this point, you will see everything working fine in the browser and all our parallax scrolling animations working nicely. There is only one issue. When you scroll past the last slide, you will see a big black slide coming from nowhere.

Skrollr is by default manipulating the height of the document to make sure all animations fit inside and the black color is our background color.

But what we want is the page to finish at the end of the last slide. To do that we will need to turn off the forceHeight option for Skrollr.

Update your main.js with the following code.

// Init Skrollr
var s = skrollr.init({
    forceHeight: false
});

Now everything should be working exactly how we wanted.

View Demo Download final files

Conclusion

There you have it, a simple parallax scrolling tutorial with a subtle animations. Let me know what do you think about parallax scrolling animations. Are they being overused or used on wrong projects?

The true is, if they are done correctly they can create a visually stunning effects and increase the user engagement. If you have enjoyed this tutorial you will love reading “How to create a parallax scrolling website“.

Still confused how Skrollr and the data attributes work?

Join me in the Parallax Scrolling Master Class and learn how to build a parallax scrolling website from scratch using Skrollr.js.

I will teach you:

  • how to move not only background images, but any element on the page
  • how to be in control of your animations
  • how to make it responsive
  • or how to turn Skrollr off on mobile devices

Parallax Scrolling Master Class

Want to download the final files?

The final files are only exclusively available to my newsletter subscribers.

Sign up and you'll receive the files instantly. You will also get my future tutorials straight to your inbox. No spam, ever.

144 thoughts on “Simple parallax scrolling tutorial

  1. Debbie

    Excellent tutorial! As was the last one. I was having zero luck, though, with the previous tutorial in adapting a menu structure that didn’t jump right to target – though the end animation **at** the target plays. I attempted it also with the skrollr.menu.min.js without joy.

    How about focusing the next tutorial on adding navigation that scrolls from the navigation up or down to the targeted section. :)

    Reply
    1. Mary

      Hi,

      Thanks for your tutorial. It’s really nice.

      I have one question and it’s due to my lack of knowledge. I was hoping to make the text box relative so you could view the text on a mobile device.

      Do you have any suggestions?

      Mary

      Reply
      1. Petr Tichy Post author

        Hi Mary,
        to make it mobile optimised you will need to include media queries and implement Skrollr mobile support.

        Another way would be to implement Enquire.js and turn the parallax off on smaller screens.

        Hope that helps, thanks for the comment and good luck with your project.

        Reply
        1. Rob

          Thanks for the excellent tutorial Petr!

          I am having a hellish time trying to get this to work on mobile and tablet devices. Is there any way you can elaborate on implementing the Skrollr mobile support?

          Reply
          1. Petr Tichy Post author

            Hi Rob, thanks for the feedback. You’re not alone who is trying to make Skrollr work on mobile, unfortunatelly it’s not one line of code which would make it work.

            Easier approach would be to turn parallax off on mobile using enquire.js.

            I might create a tutorial on that when I have time.

  2. Jack Qarbozian

    Hi,

    Thanks for your tutorial. I’m a beginner in parralax scrolling techniques and I’m trying to get this to work on my own website. Unfortunately I’m not having any luck, I’ve included all the script files and the necessary HTML and CSS but the text doesn’t fade out, and for the 2nd 3rd and 4th slides the text doesn’t even show. The background images also do not move (slower than the content within that section). It’s as if the functions aren’t being called or running.

    Can you help?

    Reply
    1. Petr Tichy Post author

      Hi Jack, thanks for stopping by. Try to look in the developer tools in the console if there are any JavaScript errors. Check that the path to all js files is correct.

      Have you used the starting files I have provided?

      Reply
    2. Jack Qarbozian

      I seemed to have diagnosed the problem.

      html, body, #wrapper, .scroller {
          height: 100%;
      }
      

      I had this set in another style sheet used to get a multi-level off canvas navigation menu working that I got from another tutorial which was breaking/disabling all the parralax scrolling effects from the subtle slow movement of the background images to the fading in and out of text.

      I hope this helps other people that may also be struggling with getting this to work. I don’t understand why height: 100% on the outer wrapper(s) would cause a problem however. I wonder if there is a workaround for this.

      Reply
  3. daniel

    Thanks so much for this tutorial, it was extremely useful, I’ve been blundering through ‘tutorials’ from around the internet over the last few days to understand websites and yours seriously stands out =)

    I’m just curious however, I managed to complete the project and I could alter the text, how do i change the images in this particular template? I’ve changed the image src to the images that i want in the source code, however it’s not translating into the displayed version. Any ideas on why this is? Thanks so much

    Reply
    1. Petr Tichy Post author

      Hi Daniel, thanks for your great feedback.

      Regarding your images issue, make sure that the path to your images is correct, or alternatively you can just replace my images (img/bcg_slide-1.jpg, img/bcg_slide-2.jpg, etc.) with yours.

      Good luck and let me know if you are still having any issues with it.

      Reply
  4. piotr

    Hi, good work!
    You know how can I add pause in 1st slide? I mean:
    slide 1 (one background image)
    fade-in – fade-out “some text 1″
    fade-in – fade out “some text 2″
    and scroll to next slide

    P.

    Reply
    1. Petr Tichy Post author

      Hey Piotr, thanks for stopping by and for the great question.

      To create a pause effect, you would need to make a few adjustments:

      1. increase the size of the first slide, lets say 200% (currently 100% of the viewport)
      2. and then set the skrollr settings to your “Some text 1″ and “Some text 2″ containers

      Have a look at my other tutorial, the 4th section with “Curtain effect” is taller then other slides, which means it will be in the viewport for longer. That’s where you would put and animate your two containers.

      If you don’t want the background to animate on that slide, simply remove the Skrollr data attributes from the background container.

      Hope that helps.

      Reply
      1. piotr

        thanks for help,
        I add to js “.height(winH*3);” an what should I use?
        data-0=”opacity:1″ data-500=”opacity:0″ for ‘some text 1′ etc.
        is it a good way?

        Reply
        1. Petr Tichy Post author

          Yes, that would work, but because the slide height will change based on the browser viewport, I would suggest you use percentage instead of pixel offset.

          data-top="opacity: 1" data--20p-top="opacity: 0" also make sure you have your anchor set to the right container eg. slide ID.

          data-anchor-target="#slide-X"

          Reply
  5. aycee3

    thank you thank you thank you, this is the best example of parallax tutorial I have come across, I look forward to seeing more of your work.

    Reply
  6. tiago

    Hi, just want to thank you. I’m just giving the first steps with parallax scrolling and skrollr and this post has been very very useful. Thanks

    Reply
  7. Mary L

    Employers are asking for parallax scrolling on job boards and none of my html5/css3 books have anything about it. Thanks for putting this together.

    Reply
  8. Matt

    Hi Petr,

    Awesome tutorial! Thank you.

    I’ve been looking for a simple parallax like this to build into a shopify theme however I cannot get the code to work properly within the liquid framework. Do you have any suggestions?

    Reply
    1. Petr Tichy Post author

      Hi Matt, thanks for the feedback. You need to refer to the liquid documentation and make sure that the final output stays the same. It should still work fine. Cheers

      Reply
  9. Yonatan

    Hi Petr, thanks for the great tutorials and fast replies :)
    A tutorial about background full-screen video could be nice, i.e creating a simple website that has a video loop running in the background. Moreover, is it possible to create a parallax scroll website where some of the sections you scroll to are video rather than an image?
    Thanks!

    Reply
    1. Petr Tichy Post author

      Hey Yonatan, thanks for your feedback, I try to answer quickly because no one likes waiting;)

      I am receiving the full-screen video questions and suggestions quite often, it’s time for a tutorial on this topic.

      I don’t see a reason why some of the sections couldn’t have a video in the background. I will try to set it up in my future tutorials.

      Take care and thanks again for stopping by. There are millions of other blogs our there, sometime I wonder why you guys keep coming back to Ihatetomatoes?

      Reply
  10. Rakesh

    Hi,
    Thanks for sharing a nice tutorials. It’s work well for desktop but it giving problem on mobile.
    Is there any solution for that.

    Thanks

    Reply
    1. weeki

      Hi Petr,
      Thanks for the tutorial and i having the same problem as Rakesh.
      I tried adding in to wrap up the whole thing but still no luck..
      and the images on mobile doesn’t support background-size: cover as well as background-position: fixed..
      Please advice how to fix this issue..
      Thank you very much

      Reply
  11. Anna

    Hi Petr, thank you for creating such a wonderful tutorial. I’ve been sifting through tutorials for days with no real understanding until now. I do have a question though- if I wanted to add more background images than just 4 how would I go about doing that? I would still like for each to wipe over the previous as they do in your tutorial. Thank you so much for sharing your knowledge!

    Reply
    1. Petr Tichy Post author

      Hi Anna, thanks for you kind words.

      To add another background image you would need to duplicate one of the slides and change the id to eg. id="slide-5". You would also need to update the reference from slide-4 to slide-5 in the skrollr data-attributes and obviously you would need to update your stylesheet with the new additional slide.

      Hope that helps.

      Reply
      1. David

        I’ve duplicated the required html and css but can’t seem to update the skrollr data-attributes? Can I simply find it in the .js code in Dreamweaver? If so, where is it located?

        Reply
  12. Piotr

    Thank you vor your tutorial, it helped me greatly starting with the parallax script, but I have noticed one problem – I cannot downscale the demo page on my mobile devices (both Android and Windows Phone), and because of it the text are not fully visible for instance “Now go and c..” instead of “Now go and create your own story” can it be resolved somehow?

    Reply
    1. Petr Tichy Post author

      Hi Piotr, thanks for your nice feedback. You can make the site responsive by including media queries and using enquire.js to disable parallax effect on mobile. I will be covering this in my future tutorials. Stay tuned and thanks again for your comment.

      Reply
  13. david

    been waiting on something like this that has a reasonable explanation into parallaxing for ages. thanks again :)

    Reply
  14. Edward

    Thanks for your response I’m kinda new to this.How do I increase the height of the sections? I can’t find in neither of the tutorials how to do it. I guess its with homeslide but I don’t really know where it is.
    Thanks.

    Reply
  15. charuhas22

    Hey man, great tutorial! Very helpful. For some reason even when I add the data attributes I can’t see the animations in my browser (Chrome).
    I made sure that Skollr was added into the main.js but the text is still static. Any help?

    Reply
  16. Peter

    Doesn’t work on any apple mobile device. I found this out after investing 3 days in developing a whole website with it. What a waste of time.

    Reply
    1. Petr Tichy Post author

      Hi Peter, sorry that you feel that way. The aim of the tutorial was more to show how the Skrollr data-attrubutes work. There is a way to make Skrollr work on mobile, but I would suggest you turn off the parallax effect for mobile using enquire.js. I will have a tutorial on that coming soon.

      Reply
  17. Nick

    Hi Petr, great tutorial thanks a lot for taking the time, these are by far the clearest tutorials I’ve found.
    I was wondering though, for some reason my final slide won’t show up when I scroll down to it.

    Any clues as to why this might be? I’d imagine it’s some tiny error somewhere my tired brain can’t find but if you can think why, I’d be super grateful!

    Look forward to learning more from you!
    Cheers.

    Reply
  18. Mirsa

    Halo! love the tutorial!

    Just had a quick question, I am finding it hard to make my content be responsive, any tips?

    Best
    Mirsa

    Reply
  19. Sara Osorio

    Hi Petr,

    Thanks for your tutorial, I’ve been working with it to make my own website. I need your help! I’ve been following all the steps, I’ve linked to all the .css and .js files but I have a big problem: When I open the index file in a browser initially doesn’t work! (the backgrounds doesn’t move and the content doesn’t show) but when I “resize” the window, everything start working!

    You know why this may be happening? :(

    Thanks!

    Reply
        1. Sara Osorio

          Actually, it was rookie mistake, I put the skrollr.js code at the beginning of the main.js. I just moved the code to the right lines and everything was fixed!

          ;)

          Reply
  20. Sara Osorio

    Thank you, thank you, thank you! my first website ever! and with a great parallax effect thanks to this tutorial!

    Reply
      1. Sara Osorio

        Hi Petr,

        This is my website www.saraosorio.com

        Unfortunately, as is been said before, doesn’t work on mobile devices! I’d be great if you let me know how to make the site responsive by including media queries and using enquire.js to disable parallax effect on mobile…

        Is the only thing I’m missing!
        Thanks again for your help.

        Reply
        1. Petr Tichy Post author

          Hi Sara, thanks for sharing the link and congrats on your new website, it really looks nice.

          How to make it responsive tutorial is coming very soon. Stay tuned.

          Reply
  21. M

    Hi Petr,

    Well done Petr!
    I have followed your steps you have described here and I do have a strange behavior. For parallax to kick in I have to resize the browser first. Otherwise I just see h2 fixed and I can scroll with effect. Once I resize everything works just fine. :D
    Cheers

    Reply
  22. Mathew

    Hi Petr, I am trying to incorporate this content into a WordPress theme, so that all the content is editable through WordPress, so i can add pages and photos as well as blog posts all through WordPress. is there any way to do this?

    Reply
    1. Petr Tichy Post author

      Hi Mathew, incorporating this into a WordPress theme would be a similar process then incorporating any other static html template. You just need to make sure that your php generated markup is the same. Follow steps in any of the “how to build a wordpress theme” tuturials. Thanks for reading. Cheers

      Reply
  23. Tarun

    Hi petr … First of all thank a lot for publishing this tutorial . I have a rather off-topic question . I saw ClickFork , it was really great .. idea is top notch too . Actually I have a painter in my relation , So .. is their any sort of website like ClickFork which enables him to show his collection to clients ? PLEASE REPLY !!!!

    Reply
    1. Petr Tichy Post author

      Hi Tarun, thanks for the nice words about ClickFork.

      I don’t really know any service which would be specifically for painters.

      If you have a restaurant in your network, feel free to send the to ClickFork, we’ll look after them.

      Reply
  24. Sophie

    Thanks so much for the tutorial, I am a complete beginner with web design, it’s like a foreign language to me!

    I am wanting to put a fixed menu bar either at the top or down the left hand side, amongst many other things, but I have no idea how to!

    Also I signed up to get your final files but nothing has come through, what are they?

    Thanks again!

    Reply
  25. Laura

    Hi Petr,

    great tutorial – makes it so simple! Love it.
    I just have two problems that I couldn’t figure out on my own – I hope you can help me.
    The first thing sounds so easy but I wasn’t able to manage it: I added a 70px header and wanted the pictures to start at top:70px of course. Where I have to add this? I tried it in .main (I placed the header above the main div) and some others but the pictures wouldn’t move.
    And the other thing is, that I used anchor text links in the header to jump to the sections. Works great, but I want the header to be fixed and if I add position:fixed the anchor links are no longer able to click.
    I think the secound thing is tricky, but if you just could solve my first problem I would be very grateful! :-)
    Greetings,
    Laura

    Reply
    1. Petr Tichy Post author

      Hi Laura, thanks to the feedback.

      To answer your question #1, you will need to play with background-position property in the stylesheet and the skrollr data attributes. The question #2 shouldn’t be as tricky as you think. Try adding a z-index: 1 or higher to your fixed header.

      Hope that helps.

      Reply
      1. Laura

        Thank you very much for the super fast reply!
        z-index works great – I should have thought of that myself!
        And I think for the background-position I’ll have to try a bit more, but thanks for the hint!

        Reply
  26. Chi Ming

    Hello,
    Firstly thanks for the tutorial about parallax effects, but I got a problem which is after I put data attributes to control the speed, it’s doesn’t work, but after I use another main.js ( from another tutorial which is http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/) to replace the original main.js, it’s work! So, is the tutorial’s main.js files got some problem?
    Regards,
    Thank you.

    Reply
    1. Petr Tichy Post author

      Hi Chi, I am not sure what data attributes you are trying to put in. The demo works as it should. Please check your data-attributes or refer to skrollr.js documentation. Cheers

      Reply
  27. Carrie

    Simple, easy, gets the base work done fast to get you up and going to work on your own creative content rather than coding woes.

    The commenting on the CSS is also very useful.

    Reply
  28. Fluidic Ice

    Hey, awesome site and tutorials you’ve got here! Bookmarked it for future reference. :)

    I was wondering however in this tutorial, it takes a little time to load and I wanted to add some text to be able to skip this page if it takes too long, how might I do this, creating the text is easy i’m just not sure where to put it to only display as it’s loading?

    Thanks again and keep up the awesome tutorials!

    Reply
    1. Petr Tichy Post author

      Thanks for the comment Fluidic. There isn’t a way how to “skip” the preloading, unless you remove it. You will need to tweak both css and js. Cheers

      Reply
      1. Fluidic Ice

        Oh no, i’ve got it set up that the parallax is the “hd index” page and i wanted to skip that page to the regular index if their internet is slow.

        Reply
        1. Petr Tichy Post author

          You would need to create the skip link and position it wherever you want. Currently there is only a loading indicator which is a background-image on the body while it has a class loading.

          You can then hide the link once the body gets a class loaded.

          Hope that helps.

          Reply
  29. Airton Davis

    Hello Petr, i would like to know how can i expand the time of the text on each section, i guess i have to low the fade out timer or so, could you give me one little help? thanks!

    ps. awesome tutorial!

    Reply
    1. Petr Tichy Post author

      Thanks Airton, the quickest way to increase the time the text stays in the view would be to increase the size of the sections.

      You can do that by doubling the height in the _main.js.

      //This is the current code
      $slide.height(winH);
      
      //This would make the sections double the size of the viewport
      $slide.height(winH*2);
      

      Hope that helps.

      Reply
      1. Emile

        Hi Petr, I responded earlier but I think something went wrong with sending the message. The solution you explained to Airton was already usefull to me but I’d like to know how to extend the the height of one single slide? I don’t understand enough of the functions to sort this out myself. Could u please help me?

        Regards,
        Emile

        Reply
        1. Petr Tichy Post author

          Hi Emile, you can give your slide a class and then have another variable in the js file to resize just that slide.

          $yourSlide = $('.yourSlideClass');
          
          // Resize our slide
          $yourSlide.height(winH*X); //change X to whatever
          

          Hope that helps.

          Reply
  30. rakesh

    Hey, this looks really nice. I signed up to get the files, but unfortunately I din’t got any mail for confirmation till now.

    Reply
    1. Petr Tichy Post author

      Hi Nico, thanks for the feedback. To add pictures you would need to duplicate the section, change the id and update the CSS with a new background-image. Hope that helps.

      Reply
  31. Ewan Tavener

    First, love what you are doing here. Thanks for this.

    On the Skrollr documentation it states that it works on tablets and mobiles. I have see numerous examples that work on my ipad but your example doesn’t work. Your responsive example is about disabling it, but i have to have it on the tablet.

    I am in the position where I have a parallax like yours (works fine on desktop) but it doesn’t work on iOS (I have added an element with id=skrollr-body). I also have an issue with background images on the iPad scaling to be a lot bigger that the ipad itself.

    Any ideas?

    Reply
    1. Petr Tichy Post author

      Hi Ewan, thanks for your feedback. I don’t have a good experience with implementing Skrollr on mobile. Even it it worked for me, the user experience what as smooth as on desktop. That’s why my preferred method it to turn it off on mobile and touch devices.

      If you need to support iOS devices, please refer to Skrollr documentation for the best approach.

      Can you share your url to see what’s wrong with your background images?

      Reply
  32. Aaron

    Hey Petr,

    Do you have any insights on how to control the speed of the scrolling feature? My main issue with Parallax is it scrolls down the page so quickly that users miss out on a lot of content and become frustrated. While it is really cool and nice to look at, the usability seems difficult.

    Is there a setting to slow down the speed?

    Your thoughts and work are much appreciated.

    Reply
    1. Petr Tichy Post author

      Hi Aaron. You can control the speed of the scrolling by changing the sections height, or by ‘pausing’ the content for a while.

      From what I know there isn’t a speed setting in Skrollr, but you can control it by setting the right data attributes. I will be going into more details about this in my upcoming Parallax Scrolling Master Class.

      Hope that helps.

      Reply
  33. Pali Madra

    Thank you for the great tutorial. Are there any other frameworks that you would recommend for creating parallax scrolling effect?

    Reply
  34. Napo

    Hi Petr,

    Thanks for the tutorial. I’m trying to download the starting files but for some reason what I end up with is the complete working files. Is there anything wrong or am I doing something not right?

    Reply
    1. Petr Tichy Post author

      Hi Napo, are you sure that you are downloading the files at the top of the page “DOWNLOAD STARTING FILES ↓”? Just checked that link and getting the right files.

      Reply
  35. Alessandro Muraro

    Hi, I don’t really get what data-top-bottom does… what is the difference with simply data-bottom?

    Many thanks

    Reply
    1. Petr Tichy Post author

      Hey Alessandro, I know the data attributes are quite confusing, but there is a difference between these two.

      data-top-bottom is defining the styles of an element when bottom of it is at the top of the viewport and data-bottom is defining the styles when the bottom of the element is at the bottom of the viewport.

      Hope that helps. I will be going into more details with the data-attributes in my upcoming Parallax Scrolling Master Class.

      Reply
  36. Sean Morrison

    Wow, this is great! Thanks so much for posting this. I’m trying to redesign my company website in Dreamweaver CS 5.5 and wanted to create an updated site with either Responsive, Parallax or both. This should get me started for sure!

    Reply
  37. Jim

    Wow that’s awesome and useful ! Thanks for the tutorial. Btw mobile version pain in the neck…
    Also i have a question. I don’t wanna use css background code. I think img tag better than css background code. For example im building wordpress theme. I want , users(theme owners) can edit parallax background images. So i dont know how people can do that with wordpress admin panel. My idea ; json data. Print with jquery .css() function. I see data-0 parameters now. But is there any other way ?
    Sorry for my grammer :)
    Tnx!

    Reply
    1. Petr Tichy Post author

      Thanks Jim, you can still use background images, but you would need to write inline styles for the images coming from WordPress.

      You grammar is perfect!

      Thanks for stopping by.

      Reply
  38. H.d.

    Hi Petr,

    Will you be doing any upcoming classes/tutorials on how to create a parallax scrolling WordPress theme?

    Thanks,
    Heath

    Reply
  39. Kumar Vivek

    Nice work Petr

    I am beginner in Parallax design, but your tutorial was very basic and helped me very much.

    Thanks a lot buddy.

    Reply
  40. Divas Bahuguna

    Hi Peter,

    Thanks a lot for this wonderful tutorial. It has been really really helpful in my projects !!!

    I do have one problem though. Have been trying to insert forms in the individual sections being scrolled, but they (the inputs/buttons) are not responding :(
    Anything I need to take care of inside the CSS or the HTML files in order to make the form components responsive within a section?

    Thanks a lot !!!

    Reply
    1. Petr Tichy Post author

      Hi Divas, this looks like a similar issue that Laura, you will need to debug the positioning of the slides, they are overlapping at the moment. Cheers

      Reply
  41. Laura

    Hi Petr,

    me again :-D
    I’m still very happy with my parallax project.
    But now a new problem turns out:

    I added a link in the hsContainer (and a few new div’s but I don’t think thats the problem because they work fine). I have 5 sliders and in every slider a link. If you try to click on the first sliders link, you can’t. But if you move the mouse around a little, you’ll find a link connection to the very last link form the last slider. I think they’re overlapping or something like this. Do you have a quick idea how to fix this?

    Reply
    1. Petr Tichy Post author

      Hi Laura, the css will need some adjusting. You’re right that the sections are overlapping and that’s why you can’t click on any of the links.

      There is not a quick fix for this, you only need to dive in to the web developer tools and debug it.

      Good luck.

      Reply
    2. Ken

      I had the same question today. I just found a solution–don’t know if it’s the best solution–but it’s a solution.

      For slides that I want a link on, I use skrollr to raise the z-index as the slide comes into view, and lower z-index out of view. It means assigning a position to the slides ID (relative, absolute, fixed).

      Seems to work.

      Reply
      1. Petr Tichy Post author

        Great Ken, yep you can use Skrollr to change z-index of an element when it comes to a view. That’s the solution I would implement. Cheers

        Reply
  42. Abhishek N Jain

    Hi Petr,

    Thanks for a wonderful documentation on parallax scrolling. It has helped a lot.

    There is a issue I am facing. The parallax effects are visible only after I resize my browser once. Can you please help me out with this.

    Reply
      1. Abhishek N Jain

        Hi, Yea. I am facing the issue with your code as well as my code. The problem is,

        As mentioned by you to add the following lines in _main.js

        // Init Skrollr
        var s = skrollr.init();

        // Refresh Skrollr after resizing our sections
        s.refresh($(‘.homeSlide’));

        I have done that.

        Now obviously if i remove the first line “var s=skrollr.init();” the parallax scrolling will not work.

        And the second line is for refreshing of the page is any resizing happens.

        Now when i simply open the index.html file, the parallax effect cannot be witnessed. I have to reduce the size of my browser window and resize it back to full scale to make the parallax scrolling work.

        I hope I have stated my problem up to your understanding.

        Thanks in advance. :)

        Reply
        1. Petr Tichy Post author

          Hi Abhishek, not sure if I understand your issue. Can you make sure you are loading the files through your localhost instead just a file://.

          Reply
  43. Robert Prickett

    Are these tutorials suppose to be done on a localhost? When I download the files and make the additions from this tutorial, I get a black screen with the two of the h2 tags separated evenly on the page. Is there something that I’m missing?

    Reply
  44. Ken

    Thanks this is really great — much more useful than just having the examples on skrollr.

    Question — how can the content on the “slides” have links in them? I get decorated text (underlined), but it is not clickable. Except when I put an anchor tag in the bcg3 of slide-5. But that one creates a clickable area that is always fixed in the browser no matter the scroll position.

    I’m sure all the scrolling plus relative positioning means the clickable areas aren’t where one wants them! Is there a workaround for this that you know of?

    Reply
  45. Ken

    Ooops I submitted a question here, but I was using another one of your examples–Demo – How to create a parallax scrolling website.

    Reply
  46. Deepansh

    Hello Petr,

    I have made this but unable to put hyperlink. Please have a view of www.pandeypriya.com I am unable to put hyperlink to inner pages on images. Please guide me.

    Thanks,
    Deepansh

    Reply
  47. Dan

    Is it possible to add a link in the text (eg. Next slide) that will (animate) scroll to the next slide? What would the code be for that?

    Reply
    1. Petr Tichy Post author

      Hi Dan, thanks for reading. You would need to modify a few things, but it’s definitely possible. I might create a new tutorial on that in the future. Cheers

      Reply
  48. Marky Mark

    Hi Peter,

    Thanks for this great tut. However I’d like to ask you for a help. I’d like to add more content inside #slide2 container than there is space available on the screen. Whenever I reach the bottom of the screen scrolling #slide 2 container #slide 3 section starts sliding in leaving #slide2 content hidden. Is there any way how to adjust only #slide 2 container height to be able to fully scroll through its content and only after that to slide #slide3 container please? (my #slide2 would not contain any bg img, only white bg with couple of and ) Thanks.

    Reply
    1. Petr Tichy Post author

      Hi, thanks for stopping by and for going through the tutorial. I would really like to help but your question requires more than a single line of adjustments. You will need to use the files as they are or learn jQuery and Skrollr in more detail to be able to do your code update. Thanks

      Reply
  49. Amit

    Does this demo work on the iOS platform? Seems it gets stuck on the first image when you try to look at it on there.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>