Simple parallax scrolling tutorial

Simple parallax scrolling tutorial

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

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.

Parallax Scrolling Master Class

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. If that’s the case, download my Skrollr Cheatsheet or:

Get my free Skrollr tips and save heaps of time!

The data-attribute tip, will save you hours if not days or weeks of figuring out. PLUS you'll get the first 2 videos from the popular Parallax Scrolling Master Class!

Enter your email below and I’ll send it right to your inbox!

100% Privacy. Guaranteed! Powered by ConvertKit

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

Parallax Scrolling Master Class

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“.

Get my free Skrollr tips and save heaps of time!

The data-attribute tip, will save you hours if not days or weeks of figuring out. PLUS you'll get the first 2 videos from the popular Parallax Scrolling Master Class!

Enter your email below and I’ll send it right to your inbox!

100% Privacy. Guaranteed! Powered by ConvertKit

Related Articles

274 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. karthik

        Hi Debbie, thanks for the nice feedback. So you just want the page to scroll smoothly to a certain section when you click on your navigation link?

        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. Tucker

      Hi Petr,

      I am very new to web. Is Codepen an editor that I can use for this? I notice some inline styling and scripting in the HTML page and Codepen doesn’t seem to like that. Sorry for the amateur question.

      Thanks!

      Reply
  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
      1. Teo

        Hi Petr,

        Thanks for great tutorial.
        As for the video, I’ve been trying to implement this full background video: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video
        The video is playing as a background but it doesn’t work smoothly with the scroll effect, any ideas what might be the issue?

        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. 😀
    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 😀
    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
        2. Max Howard

          Hi Abhishek.

          I had the same problem. Very easy to resolve. What you (and I) did wrong was place the init and refresh for skrollr in the wrong place in main.js. Take a look at main.js again. You will see a comment indicating where the init and refresh should go (in the adjust window function).

          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
    2. Sheena Anagnostopoulos

      Yes! Petr, thank you for the awesome tutorial! I am using skrollr for my portfolio website and would like to build my resume into a slide 4 rather than using a link. Any help for making adjustments to the height of the slide?

      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
  50. maggy

    it works fine. thank you for your perfect tutorial.
    i just want to know is it only suitable for chrome? what should i do if i want to see my work on firefox?

    Reply
  51. BeeJayJayn

    Hey Petr, i didnt found a solution in the comments, and im beginner in all of this 🙂

    What do i need to adjust so the Slides will adjust when i resize the viewport from my 1920×1080 to my 1680×1024?

    props to you, keep up the good work! 🙂

    Reply
  52. Andrew Scheuermann

    I needed to slow down the speed at which the text appeared and disappeared. In your current demo the text only appears with an opacity of 1 when the image is exactly aligned with the viewport. By changing the opacity to greater than 1 the text stays visible longer. NEAT!

    Great work with this Peter!

    Reply
  53. Max

    Hi Petr!

    I have a problem and am looking for quick help.

    I made a website which uses this tutorial for parralax scrolling. But the problem is that on my 24″ screen the images get “too big”. So there is some text cut off that is at the very bottom of the pictures (I don’t let text “fly” into the pages. The text is in the pictures). If I make the window smaller everything is displayed correclty. Do you know how to solve this issue?

    Thanks for an answer 🙂

    Cheers

    Reply
      1. Max

        The problem is that I only have the images with the text on them. Isn’t there a way to fix this another way? What happens if a have a picture with something important on the bottom (not text). It will get cut off too.

        Thanks for that quick reply.

        cheers

        Reply
        1. Petr Tichy Post author

          You shouldn’t have any important information on the image itself. If it is important it should be in the html.

          Alternatively, if you really need to keep it in the image you can place the text in the centre of it.

          The demo is using background-size: cover, which always stretches the image to fill the whole container.

          Another option is to code everything from scratch based on the content/images you have.

          Reply
  54. Chelsea

    Hi!
    Awesome tutorial, but I just have one problem. When I try to add an image inside the hsContent div, it doesn’t show up. I’m just using the regular img src tag. Instead of a header, I wanted to add an image. How can I go about doing this?

    Reply
  55. beejayjayn

    Hey,

    fortune.beejayjayn.de

    on mac this whole thing is just laggin’ … and i can’t find the problem!

    On windows its working fine!

    (im using windows.js – is that one messing with skrollr.js?)

    Reply
      1. beejayjayn

        never got a reply email *hmpf*

        so u dont have problems to scroll down smooth? the sections snap easy and smooth after u stopped scrolling?

        Reply
  56. Patrick

    Hi Petr! Thanks for the tutorial!

    I’m having a bit of trouble making the first slide 50% of the page height instead of covering the whole screen height. When I change the line $slide.height(winH); to either $slide.height(winH*0.5); or $slide.height(winH/2);, the background just turns black. What do I need to counteract this?

    Thanks in advance!

    Reply
    1. Petr Tichy Post author

      Hi Patrick, thanks for the comment. Your idea to update the code to $slide.height(winH*0.5) is a correct approach and works fine for me. Check your CSS or other javascript updates. Cheers

      Reply
  57. Antonio Abreu

    Hello Petr,

    Thank you for such a great tutorial!
    This is the first time I’m using parallax and having these files as a reference to build a test website I’m struggling to add more slides. I tried adding div/sections for new home slides, but it doesn’t seem to work.
    Can you help me out?
    Thank you

    António

    Reply
  58. Ryan

    Hi Petr,

    thanks for the tutorial, however it doesnt seem to work right with me. It seems that the parallax effect only works after I resize my browser, not on the the window loading. Also I have a big black space at the bottom of the screen until I resize the browser. Any ideas what I’m doing wrong?

    Thanks

    Reply
  59. Jon

    Hi, I found this so helpful I cant thank you enough. I’ve actually gone on to build a small website using this template. But, I’m having trouble loading it in Google Chrome. So far I think its something to do with the audio files. The site stays on the ‘loading’ page and wont move past it. It works fine on Firefox and Safari. Any ideas where I’m going wrong? http://woodmill.org/mgoe/

    Reply
  60. badsyntax

    Im having trouble getting any of my other scripts to work. imagesloaded.js and main.js run and the parallax scrolling works. but I cant get a js slide show to work. cant get a js facebook like button to work. none of the other js are running.

    Reply
  61. badsyntax

    Thanks a bunch for the tutorial! Im using nicescroll http://areaaperta.com/nicescroll/ to customize my scroll bar but when I use it with this site I get no scroll bar and cannot scroll the site. Any tips on integrating this scrollbar script? Otherwise this works great and is an excellent learning tool for getting into parallax scrolling.

    Reply
  62. cassandra marshall

    Hi! The tutorial is great but both the demo and the scrolling I installed on my site disable the page scroll on my iPhone. The demos from Prinzhorn work.

    Is this a known bug?

    Thanks!

    Reply
  63. Aapeli Poranen

    Hi, thanks for the tutorial 🙂 I have the same issue Ryan posted earlier. I have to resize my browser to get the script working properly.

    you can see the issue here http://laaticco.atwebpages.com , it’s a wordpress theme demo, but your download package has the same problem. I’ve compared the source codes of your online demo and my local demo, and they are the same.

    On window resize, console gives reflow -events like this:

    reflow: 0.15ms
    reflow: 0.47ms
    reflow: 0.36ms function Skrollr/<, skrollr.js line 294
    reflow: 0.89ms function handleEvent, tabbrowser.xml line 3805

    and everything works fine.

    Reply
  64. Aapeli Poranen

    Okay, found the solution. Had my Skrollr refresh too early in the code, silly me 🙂 That’s because I just copied the code from the tutorial.

    Ryan,

    s.refresh($(‘.homeSlide’));

    has to be on the bottom of the adjustWindow function in _main.js.
    There’s actually a comment line for it 🙂

    Reply
  65. Michael

    Hi, Petr.

    Great tutorial! Works as advertised.

    That said, I’d like to change the movements from 100-pixel jumps to 50-pixel jumps. I made changes in these lines:

    data-top-bottom=”background-position: 50% -50px;” (for slide 1)

    and

    data-top-bottom=”background-position: 50% -50px;”
    data-bottom-top=”background-position: 50% 50px;” (for slides 2 thru 4)

    I see no change. What have I forgotten? Thanx.

    -Michael

    Reply
    1. Petr Tichy Post author

      Hi Michael, thanks for your feedback and comment. Inspect the slides in web developer tools or Firebug and see if the background-position is animating to your -50px. It’s a small change so it might be harder to see it. Good luck.

      Reply
  66. Michael

    Hi, Petr.

    I’m afraid I am pretty new at this. The only changes I see are in the “div.bcg.skrollable.skrollable-before” element. It indicates the position is changing by only 4 or 5 pixels, but it’s much more than that.

    If you’d like to have a look, see www.fpsci.com

    Thanks,

    -Michael

    Reply
  67. Fabrigad

    Dear, Petr.
    I’m working on a site and trying to use your great tutorial. But I fail till now 🙁
    could you please help me why it doesn’t work?

    http://4shost.info/bakka/

    Reply
  68. Christian

    Hey Petr, really really nice Tutorial! For the next year, I will definitely buy your Tutorial and get started! But a question beforehand: Is it possible to build an effect like on this homepage of someone with your tutorial? Link: http://www.anthonydupont.be/
    I am really new at this, but willing to learn a lot to get started as soon as possible and build my own first website with your help! 🙂

    Kind regards,
    Chris

    Reply
  69. David St. Hilaire

    Petr.. I love you dude, you don’t know how much this tutorial helped me fix one little problem I was having with skrollr.js. You’re a boss!

    Reply
  70. Sam Racupiens

    Thank You so much for this tutorial. It really helped me in my HTML projects in school. I do have a question, I’m kinda new to HTML, how can I change the text into paragraph style? I want to fit some article on it but when I modify the default text to h3 the black highlight disappears. When I add a new paragraph there is no black highlight on the text. Can I also change the blackhighkigt to a blurred one? Thank You and keep up the good work!!!

    Reply
  71. sugi

    Thank you very much for the tutorial. This was helping me a lot!!! Great work!

    I have one question: how can I put individuell height for the background-picture? Or change the given height: 960px?

    Reply
    1. Petr Tichy Post author

      It’s been a while since I wrote the tutorial, but glad to hear that it is still useful.

      You can comment out //$slide.height(winH); from the _main.js file and set your own height in the stylesheet.

      .homeSlide {height: 960px}
      

      Hope that helps and good luck.

      Reply
  72. Heidi

    Thank you, Petr, for this tutorial.

    I believe I am close to success, however I am encountering an issue, one it seems a lot of other people have had – the parallax effect is only observable after the browser window is resized:

    lovemason.com

    It sounds like most, if not all, of those issues were solved by correcting the order of the initialize and refresh Skrollr code on _main.js, and I have repeatedly checked that my code is in the identical order: https://github.com/heidimason/love_mason/blob/parallax/js/parallax/parallax.js

    I think there is something fundamental I am not understanding – perhaps you can enlighten me? I have read through all of the comments.

    Thanks again,
    Heidi

    Reply
  73. Caroline

    Great tutorial – Just what I’ve been looking for! I’ve had so much trouble getting parallax images to work until now.

    Do you know if there’s a way of making this work in wordpress so that the background image can be set using the ‘featured image’ of each post or page?

    Reply
    1. Petr Tichy Post author

      Thanks Caroline. There is definitely a way to make the images load the “featured image” from WordPress.

      You will need to render it in the inline styles on the container with the background image.

      Reply
      1. Caroline

        Thanks! I figured it out.

        I’ve come across an issue with Safari. The images disappear and show a white area instead of loading the image. Works perfectly in other browsers, so I’m not sure how to fix that.

        Any suggestions?

        Reply
        1. Petr Tichy Post author

          Hey Caroline, great to hear the the WP featured image implementation is working for you.

          Is the Safari issue also happening with my demo page?

          It can be a lot of things if you are referring to your own files with WP implementation. Can you clarify?

          Reply
          1. Caroline

            Yes, it is happening with the HTML demo page too. I’ve been doing some research and apparently it’s a common issue with Safari, but there’s no explanation for it.

  74. Nilesh

    awesome tutorial peter very nice am including it in my site..
    and waiting for your tutorial for responsive site……
    Thanks

    Reply
  75. Teo

    Hi Petr,

    On some slide I have more text content than the height of the window.
    I noticed on the main js file I can set the minimum height but is it possible to make the slide height to adjust if I have more content than the window size?

    Reply
  76. Grant

    Hi there, before I commit myself to starting on this tutorial can you answer a basic question please (sorry, very new to paralax scrolling), does this work on iPads?

    Reply
  77. Michael

    Hey, I was trying to replicate, what you did in this tutorial. But in the very first slide (#slide-1) the style-attribute is still empty, even though I am using the same coding as you. The background-positions in “data-center” and “data-top-bottom” doesn’t seem to do anything.
    Any idea?

    Reply
  78. Dan

    Great tutorial. Say what is the css for Slide 1 and 3? You mentioned 2 and 4. This kind of stuff I need to know step by step because that is how I learn. I notice with tutorials in general people skip the little steps that are essential. Thanks.

    Reply
  79. Cha Minji

    How can I add an image to the slides which has a height 4022 px, and width, 2560 px? I tried changing the js as well as the css and it increases the size of the slide but I am not able to see the full image. Please help. Urgent.

    Reply
      1. Atilla

        Hi Petr, sorry for my incomplete and rushy comment. Your code is nice and I implemented it for my website. But do you have any suggestion(s) how to fix the deterioration of the images when screen is resized? This problem occurs, to my best knowledge, when I use the ‘background-attachment: fixed’ line and resize the screen on a OS X machine. Greets, Atilla Aydogdu, Netherlands.

        Reply
  80. Harold

    Thanks Petr,
    I am implementing this with a new WordPress site. When I initiate Skrollr.js the images disappear. Can you give me any thoughts on where to look for the issue?

    Reply
  81. marina

    Hi Petr

    I have a unusual problem with this tutorial. For some reason I can’t make the text appear when I apply the data effects to the divs for the first and second div. I reload the page and nothing happens, but if I open the developer tool or resize the browser window, they pop up, and work the way they are suppose to. What should I do to fix this problem?

    Reply
  82. Damon Cook

    A great tutorial, I was looking at implementing more slides just by copying code from a previous slide layout yet the text from slide 4 is unfortunately not fading out. If you could please let me know how I can fix this it would be great.

    Again awesome tutorial.

    Regards, Damon

    Reply
    1. Petr Tichy Post author

      Hi Damon, thanks for checking out the tutorial.

      There is a lot of things that could go wrong, I would suggest you build your page from scratch based on what you’ve learned here.

      You’ll be more in control of what’s happening with the layout.

      Reply
  83. Antonio Garcia

    Hi Petr, great tutorial, just a suggestion: I see many people are having the “have to resize window to activate the scrolling” issue, this is because they (we) are putting the code you told us to copy paste anywhere in the _main.js file. because you are not mentioning that you left two commented sections that match that code which is where it should be. it is confusing at first especially because we are newbies and don’t understand the flow of the program.

    Thanks!

    Reply
  84. alison

    There is a discrepancy between the ._main.js provided in the starting files and the ._main.js provided in the final files. I could not get the parallax to work during the tutorial then compared the two sets of files to figure out why. If I replace the ._main.js starting file with ._main.js final file – it works fine. The only difference I’m seeing is the difference in placement of the refresh homeslide (step 2).

    Thanks

    Reply
  85. Truyenle

    great tutorial. I enjoy reading it and applying it.

    I have a question though. Do we have a way to scroll the content instead of background image at an offset speed of mouse scroll?
    Thanks.

    Reply
    1. Petr Tichy Post author

      Hi Truyenle, thanks for the feedback. Yes you can animate your content at a different speed than the mouse scroll.

      You can fix the background image and then use Skrollr to animate data-attributes (CSS3 transforms for best performance) on the content.

      Hope that helps, keep it simple and always animate responsibly;)

      Cheers

      Reply
      1. Truyenle

        Thank for the fast response. I am able to scroll the content.
        Just another might be newbie question, can we achieve something like this http://www.infusemed.com/ top banner. When you scroll it is scroll and there another layer on top of it scroll with a faster speech.

        Thanks

        Reply
        1. Petr Tichy Post author

          You would need to write more js code to make the background moving. Skrollr can achieve a similar result but without the moving background.

          Reply
  86. harold

    Hi Peter

    I’m getting Object doesn’t support property or method ‘imagesLoaded’ in the _main.js when loading my homepage with this tutorial implemented.
    I think it is due to the function not being loaded yet at the time of calling.

    I’m trying this in a wordpress site. I’m developing the theme locally, so it is not available online but I can publish the theme so you can see for yourself if necessary.
    Tx in advance

    Reply
  87. Jamie

    Not sure if it’s possible for this tutorial to be out of date, but every time I start going through the steps in tutorial the page breaks every single time at steps 1 and 2. No errors in firebug. :S

    Reply
  88. Rama

    Hi Petr,
    it seems fine when i try this in native using source code you provided.
    But when i implement parallax in code igniter 3.0 the page wents black nothing happens. Some suggestion maybe?
    btw great tutorial Petr! very helpful!

    Reply
  89. Andy

    Hello! Thank you very much for this tutorial, it helped me a lot!
    I got 1 question and cant google the answer for it: how do i reverse this? I want user to see the basement of web page on open and then move up instead of down like in this tutorial. Is there some way to do it?

    Reply
  90. Kevin

    Hi, I am using google web designer and I have been following the tutorial on this page as well as using inspect elements on the index html file with chrome for more info. The software does not recognise bcg as a class. Any suggestions?

    Reply
      1. Kevin

        Thank you for the fast answer! And sorry if my vocabulary is not correct. I am referring to the following line:
        .
        “bgc” is considered as an “error” and wrong “object” by google web designer. Also, if I check my work on google chrome or safari, only the text is showing, not the background. I hope that this line might be the only problem…

        Reply
  91. Mark

    Hello, this is awesome…I am about a 95% novice and have found this very easy to get on with so thank you for sharing however, after a few frustrating hours I thought i’d get in touch…

    How can I make it so that I scroll through multiple pieces of content before the image changes?

    Much like this – http://mailchimp.com/2015/?utm_source=MailChimp+System+Alerts&utm_campaign=9ef1972d79-Annual_Report_2015&utm_medium=email&utm_term=0_21eda42079-9ef1972d79-93846974#visit-from-a-mariachi-band

    They have quite a few items per image which is what I am after…I tried to write a class to replace the H2 one but couldnt get to grips with it…any help would be great.

    Reply
  92. Chintan Raval

    Superb Sir,I have learnt now whole basic of Parallax scrolling, as I browsed many sites for learning parallax but it’s been difficult to get me perfect tutorial with deep explanation. Now I got the whole basic of Parallax Scrolling.

    Currently I’m studying Bsc in Bioinformatics So I’ve also knowledge of IT. And I’m also Front-End-Developer but on intermediate level. So,can I get your mail id or can contact detail because I want to learn many things for becoming professional Front-End-Developer.

    Thanks
    ChintanRaval 🙂

    Reply
  93. Arthur Stark

    I just wanted to give you a huge thank for this awesome tutorial. I needed a website done overnight, and if I hadn’t found this tutorial, I never would’ve made it in time.

    You are a life saver.

    Reply
  94. ferrarem

    Thanks for the tutorial but I didn’t have much success. I followed it twice but all I get as a finished product are the 4 scrolling backgrounds and the words “and share mine” static on the screen throughout. Can’t figure out what is wrong.

    Reply
  95. Natnael Zeleke

    Great Tutorial, thanks petr. I was wondering if it is possible to get the parallax effect on a single div that has overflow on the y dimension. This is the question I posted on stack overflow. http://stackoverflow.com/questions/36505199/how-to-use-scrollr-jquery-plugin-on-specific-div-to-make-a-parallax-effect-hap .Thank you.

    Reply
  96. Judy

    I have been looking for professional subtle movement and this is perfect. I have no issues except for one little thing, I’m trying to add a sticky nav to the top of the viewport so its always in view and it works on the first slide but then slide2-4 run on top of it.. .any suggestions? Thank you

    Reply
  97. Rowan Kehn

    How would I move the text boxes near the top of each slide and have smaller text inside them as well?

    Reply
  98. Lewis Charles

    This is a really awesome tutorial and thanks a lot for posting! I learned a lot about image parallax effects form this, I was wondering how i could add a static image into a div instead of the H2 copy, Ive done a bit of trial and error but i keep breaking it. Thanks!

    Reply
  99. ben

    if i load the page at a smaller window size, then full screen it, each slide’s height is = the the window size of when it is loaded. is there a way to make the slides bigger as you make the window bigger?

    Reply
    1. ben

      i assume it is related to this part of the js .

      //Triggers parsing of elements and a first reflow.
      _instance.refresh();

      _addEvent(window, ‘resize orientationchange’, function() {
      var width = documentElement.clientWidth;
      var height = documentElement.clientHeight;

      //Only reflow if the size actually changed (#271).
      if(height !== _lastViewportHeight || width !== _lastViewportWidth) {
      _lastViewportHeight = height;
      _lastViewportWidth = width;

      _requestReflow = true;

      Reply
  100. Bhupander Kumar

    Excellent tutorial, but i’m face one problem , these effect is not working in I phone and I pad. Please Help me

    Reply
  101. Allan

    Can this be done on mobile yet? I just tried viewing the site in Android Chrome and it doesn’t work. I’ve seen parallax work on other sites in my Android Chrome browser.

    Thanks.

    Reply
  102. James

    Hi Petr,

    Great tutorial! I was able to create a desktop version using your codes but when I switch to mobile, somehow I’m stuck and couldn’t get the thing to scroll. I also get this error in the console: Unable to preventDefault inside passive event listener due to target being treated as passive.

    Did I miss something? Thanks!

    Reply
  103. Brian McAlpin

    Hi Petr-

    I’ve posted this twice already and it disappears. I’ve created an account now so hopefully that was my mistake.

    Your tutorials are great. I am building something very cool now.

    However… even with your cheat sheet, there is something I cannot figure out… how to get a full screen panel to rise up and away with scroll, with no parallaxing. In other words… the whole image moves up… no different speed that begins to cover up the image.

    As an example, check this out…

    http://www.espn.com/espn/eticket/story?page=dock-ellis

    scroll down a bit until you see the big full screen red and yellow image of a ticket… it moves up on scroll, with NO parallax effect… it just raises like a curtain. Then the image it receals underneath as well… rises up on scroll with no speed difference between the rising and revealing.

    I’ve have messed with the controls a LOT and cannot get it to do that, and I have a feeling it is something simple. Can you help please?

    Thanks! and thanks for getting me started with Skrollr.js!

    Reply
    1. Petr Tichy Post author

      Hi Brian, thanks for getting in touch. As you can understand I am not able to help everyone with their own project. I hope my tutorials will help you to master the API of Skrollr.

      Reply
      1. Brian

        Thanks Petr. This is just one question though… is there a way to lift a panel with no difference in speed? So it’s just one solid panel lifting up on scroll…

        I kindof got there with …

        data-top-bottom=”background-position: 50% -1000px;

        but the bottom edge fluctuates as it moves up. Is there a way to do this, or am I expecting too much?

        Thanks

        Reply
  104. Aditya Ramadhana

    wow it’s awesome tutorial. but why when i download starting files, index.html file can’t be extract. it says the file is corrupt

    Reply
  105. Adrian Maull

    The demo seems ‘jumpy’ when scrolling in the Edge browser. It seems to work fine in Chrome and FF. Any ideas why?

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.