How to create a parallax scrolling website

How To Create A Parallax Scrolling Website

Today’s parallax website tutorial is a detailed explanation of the Parallax Scrolling Effect using Skrollr.js published a few weeks ago.

You will learn how to create a simple parallax scrolling website using Skrollr.js plugin.

If you haven’t seen the demo already, go and check it out. It will give you a clear understanding of what we are talking about in the sections below.

View Demo

Introduction

To develop a parallax scrolling website can be a bit scary especially if you do it for the first time, but as you know the practice makes perfect. Take this parallax tutorial as your first step to developing a great looking parallax website.

Please note, that this tutorial is suitable for a more advanced developers and attached files are the final files. Simply open index.html, main.css and _main.js and follow the sections below.

1. Include and initiate Skrollr.js

As a first step we need to include Skrollr.js preferably before the closing body tag. This plugin will do the magic and will animate the element properties on page scroll. Skrollr is a stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop. No jQuery. Just plain JavaScript.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/skrollr.js"></script>
<script src="js/_main.js"></script>

Initiate the Skrollr inside of the _main.js file. You can log the current scroll position if you need to work out a precise timing and positioning of your animations.

( function( $ ) {
    // Init Skrollr
    var s = skrollr.init({
        render: function(data) {
            //Debugging - Log the current scroll position.
            //console.log(data.curTop);
        }
    });
} )( jQuery );

Now lets have a look at the markup and Skrollr settings of the individual slides.

Parallax Scrolling Master Class

2. Slide #1 – Fade out elements

Section height – 100% of the viewport, resized on page load

/* CSS */
.hsContainer {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    opacity: 0;
}
.hsContent {
    max-width: 450px;
    margin: -150px auto 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #ebebeb;
    padding: 0 8%;
    text-align: center
}
.bcg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/bcg_slide-1.jpg')}

 

<!-- 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="opacity: 1"
                data-106-top="opacity: 0"
                data-anchor-target="#slide-1 h2"
            >
                <h2>Fade out elements before <br>they leave viewport</h2>
            </div>
        </div>
    </div>
</section>

.hsContainer and .hsContent are two nested containers helping us to center the content vertically on the page. .bcg is a container which takes up 100% width and height of each section and contains our background image.

Background animation
The background image of .bcg is animating from the initial position (data-center) 50% 0px to 50% -100px. This means that the background image moves up by 100px between the start of the scrolling and when the bottom of the #slide-1 hits the top of the viewport (data-top-bottom).

Content fading in and out
The content of the slide starts at full opacity as specified in data-center attribute and fades out to opacity: 0 when the #slide-1 h2 hits 106 pixels from the top of the viewport, where 106 is the height of our header.

Is this 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

3. Slide #2 – Background color animation

Section height – 310px fixed height

/* CSS - Slide 2 */
#slide-2 .bcg {
    background: none;
    background-color: #010101;
    height: 310px;
    text-align: center
}

 

<!-- HTML -->
<section id="slide-2">
    <div class="bcg"
        data-0="background-color:rgb(1,27,59);"
        data-top="background-color:(0,0,0);"
        data-anchor-target="#slide-2"
    >
        <div class="hsContainer">
            <div class="hsContent">
                <h2
                    data--200-bottom="opacity: 0"
                    data-center="opacity: 1"
                    data-206-top="opacity: 1"
                    data-106-top="opacity: 0"
                    data-anchor-target="#slide-2 h2"
                >
                    Fade me in and out
                </h2>
            </div>
        </div>
    </div>
</section>

Background animation
We are simply animating the background color from dark blue to black. data-0 contains the initial background color and data-top contains the background color to which we are animating when the #slide-2 hits the top of the viewport.

Content fading in and out
The content fades in when #slide-2 h2 is 206 pixels from the bottom of the viewport and fades out similar way as the #slide-1 content.

Parallax Scrolling Master Class

4. Slide #3 – Move background image horizontally

Section height – 100% of the viewport, resized on page load

/* CSS - Slide 3 */
#slide-3 .bcg {background-image:url('../img/bcg_slide-3.jpg')}

 

<!-- HTML -->
<section id="slide-3" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 0px 50%;"
        data-bottom-top="background-position: 0px 40%;"
        data-top-bottom="background-position: -40px 50%;"
        data-anchor-target="#slide-3"
    >
        <div class="hsContainer">
            <div class="hsContent">
                <div class="plaxEl"
                    data-106-top="opacity: 0"
                    data-bottom="opacity: 1; position: fixed; top: 206px; width: 100%; left: 0;"
                    data--30p-top="opacity: 1;"
                    data--60p-top="opacity: 0;"
                    data-anchor-target="#slide-3"
                >
                    <h2>Fixed element fading in and out</h2>
                </div>
            </div>
    	</div>
    </div>
</section>

Background animation
The background image on this slide is only slightly moving up until the slide is centered in the viewport. Then it’s moving 40 pixels left as specified in the ending position data-top-bottom="background-position: -40px 50%;".

Fixed content
The content is this time fixed to 206px from the top of the slide and doesn’t move. It fades in when the #slide-3 is 106 pixel from the top of the viewport and stays at full opacity until the slide is 30% above the top of the viewport. Then it fades out when 60% of the slide is out of the view.

Note: Using the percentage instead of pixels is very handy especially if you don’t know how tall your sections will be – e.g. if you are using javascript to keep sections 100% height of your viewport on window resize.

Parallax Scrolling Master Class

5. Slide #4 – Curtain effect

Section height – 200% of the viewport, resized on page load

/* Slide 4 */
.curtainContainer {
    width: 100%; height: 100%;
    position: relative;
}
.curtainContainer .curtain {
    width: 300%; height: 1px;
    background-color: #000000;
    position: absolute; top: 25%; left: 0;
    opacity: 0
}
.curtainContainer .copy {
    position: absolute;
    bottom: 30%; left: 0;
    width: 100%; text-align: center;
}
#slide-4 .bcg {background-image:url('../img/bcg_slide-4.jpg')}

 

<!-- HTML -->
<section id="slide-4" class="homeSlide homeSlideTall">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-bottom-top="background-position: 50% 100px;"
        data-top-bottom="background-position: 50% -100px;"
        data-anchor-target="#slide-4"
    >
        <div class="curtainContainer">
            <div class="curtain"
                data-bottom-top="opacity: 0"
                data-106-top="height: 1%; top: -10%; opacity: 0;"
                data-center="height: 100%; top: 0%; opacity: 0.5"
                data-anchor-target="#slide-4"
            ></div>
            <div class="copy"
                data-bottom-top="opacity: 0"
                data--100-bottom="opacity: 0"
                data--280-bottom="opacity: 1;"
                data-280-top="opacity: 1;"
                data-106-top="opacity: 0;"
                data-anchor-target="#slide-4 .copy"
            >
                <h2>Curtain effect while you scroll</h2>
            </div>

        </div>
    </div>
</section>

This one is my favourite. Why? Because it was made in the browser, by trying a few things.

Background animation
The background animation is similar to our first slide, so lets jump straight the curtain effect. Note that this section has additional class .homeSlideTall which give this section a double the height.

Curtain animation
The .curtain is basically a div with a background-color set to #000. It’s invisible (data-bottom-top) until the top of the #slide-4 reaches 106 pixels from the top of the viewport (data-106-top).

It’s height grows from 1% and becomes 100% when this slide is centered in the viewport (data-center). Remember that we’ve doubled the height of this slide? Now you know why. It gives us more room to show and fade out the .copy.

Copy animation
The .copy fades in just after the curtain covers the whole screen and fades out before it reaches our header (data-106-top).

Parallax Scrolling Master Class

6. Slide #5 – Cross-fade to blur effect

Section height – 300% of the viewport, resized on page load

/* Slide 5 */
#slide-5 {position: relative;}
#slide-5 .bcg {background-image:url('../img/bcg_slide-5.jpg')}
#slide-5 .bcg2 {
    background-image:url('../img/bcg_slide-5b.jpg');
    position: fixed; bottom: 0; left: 0;
    opacity: 0; z-index: 1
}
#slide-5 .bcg3 {
    background: none; background-color: #010101;
    position: fixed; bottom: 0; left: 0;
    opacity: 0; z-index: 2
}

 

<!-- HTML -->
<section id="slide-5" class="homeSlide homeSlideTall2">
    <div class="bcg">&nbsp;</div>
    <div class="bcg bcg2"
        data-bottom-top="opacity: 0;"
        data--33p-top="opacity: 0;"
        data--66p-top="opacity: 1;"
        data-anchor-target="#slide-5"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-bottom-top="opacity: 0;"
                data-center="opacity: 1"
                data-anchor-target="#slide-5"
            >
                <h2>Fixed element fading in and out</h2>
            </div>
        </div>
    </div>
    <div class="bcg bcg3"
        data-300-bottom="opacity: 0;"
        data-100-bottom="opacity: 1;"
        data-anchor-target="#slide-5"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-100-bottom="opacity: 0;"
                data-bottom="opacity: 1;"
                data-anchor-target="#slide-5"
            >
                <h2>The End</h2>
            </div>
    	</div>
    </div>
</section>

Finally lets have a look at the last section and congratulations if you’ve made it this far.

.bcg is the beautiful sharp image of a waterfall in Sapa, Vietnam. On top of it is a blurred image .bcg2(with z-index: 1) which starts fading in when the top of #slide-5 is 33% above the top of the viewport (data--33p-top). It becomes fully visible when the section is 66% out of the view (data--66p-top).

.bcg3 is the final screen which fades in between 300 and 100 pixels from the bottom of the page and it’s content .hsContent then fades in right at the end.

View Demo Download Files

Conclusion

If you want to create a parallax scrolling website that works and looks great, keep these points in mind:

  • Less is more – avoid lots of elements flying quickly through the viewport. Subtle movements softened by fading in and out usually look the best.
  • Keep it natural – avoid cars animating vertically, their natural way is horizontal movement. A car coming from the side into the viewport will be less distracting than car falling down from the top.
  • Make it readable – try to avoid text animating over objects with the same color, it will become unreadable.
  • Timing is everything – make sure that your content is perfectly aligned and everything looks the best when the section is centered in the viewport. Having it messy and out of place before and after is part of the beauty of parallax scrolling websites.
  • Have fun – you will create an amazing things when you will enjoy playing with different settings and effect.
  • Keep trying – you might not get it right the first time, just keep trying and things will improve.

Let me know in the comments below what are your tricks or struggles when it comes to developing a parallax scrolling websites. I would love to hear your thoughts.

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

328 thoughts on “How To Create A Parallax Scrolling Website

      1. hridya

        hi i am a web developer. i tried thid parallx scrolling function and its working. But this had a problem , this is not working in the mobile.

        Reply
  1. Stew

    Lovely tutorial.
    I’m curious about incorporating a navbar with scroll-to functionality similar to smint.
    I have successfully incorporated smint with skrollr.js but only for desktop browsers. Is there a way you know of for using skrollr to effectively slide to a Class or ID that works with ipads?
    Thanks again for a great tutorial ++

    Reply
    1. Petr Tichy Post author

      Hi Stew, thanks for the nice words about the tutorial.

      I am not familiar with smint, but as far as I know, you need to add an additional div#skrollr-body to your markup to enable mobile support for skrollr.

      There is more info in the skroll.js documentation.

      Hope that helps.

      Reply
  2. viny

    Nice work. I have downloaded your demo files and noticed that the page is not loading due to some quirky code in the javascript just before the closing body tag.

    window.jQuery || document.write(”)

    Reply
    1. Petr Tichy Post author

      Can you confirm that you are viewing the demo on you localhost environment (http://localhost/…) and not just the file (file://…)? Localhost should work fine.

      Reply
      1. Laura Barry

        I’m having the same issue… of course I am trying to load this on a wordpress site.

        www.espressoneeded.com/test

        Any thoughts?

        Reply
        1. Petr Tichy Post author

          Hi Laura, thanks for downloading the files and giving it a go. Your WordPress page seems to have a lot extra html markup which wasn’t in my demo.

          You either have to keep the same markup or adjust your WordPress theme stylesheet.

          Reply
  3. Mirko

    First of all, I want to thank you for a great tutorial. I played with skrollr a bit when it came out, and even had my previous portfolio done with it.

    Then a few days ago I started working on one project that is really suitable for skrollr. My question is how would you implement next and previous arrows to your tutorial? I am not aware that skrollr has and prev() or next() functions built in?

    Help much appreciated:))

    Thanks

    Reply
    1. Mirko

      Just use the skrollr-menu-https://github.com/Prinzhorn/skrollr-menu, or any other scroll-to/animated scroll plugin for one page websites.

      Reply
        1. Teresa

          Hi Mike,

          I’ve the same problem to put clickable links within the content.
          Have you got any working solutions?

          Thank you.

          Reply
          1. Rob

            Yeah, links within the sections don’t seem to work, unless they’re in the final section. Making the z-index higher doesn’t seem to help. Also, the links that do work in the final section will be present throughout all sections (like invisible links, but still clickable). This problem is also present in the demo version on this page.

          2. Petr Tichy Post author

            You’re right Rob, there are few bugs in the demo files.

            I still hope that people could learn from the tutorial and start something from scratch on their own.

            It wasn’t intended as a complete project for download.

            Thanks for understanding and your support.

    2. Ingee

      Working links inside the sections:
      Open main.css:

      .hsContent {
      	position: relative;   //insert this line
       	max-width: 450px;
      	margin: -150px auto 0 auto;
      	display: table-cell;
      	vertical-align: middle;
      	color: #ebebeb;
      	padding: 0 8%;
      	text-align: center;
      	z-index: 999;   //insert in this line
      }
      

      Many greetings
      Ingee

      Reply
  4. Frank

    Hi Petr,
    i have received your demo files. I like your demo for its elegant style.
    It’s not overdone with effects, that’s good.
    Looking forward to exploring it.
    Best wishes,
    Frank

    Reply
  5. Hassan Rana

    Hi,
    you made a awesome tutorial at the time when i badly need it. simple but effective..i want to know that can is use this plugin with bootstrap 3 and make it responsive..????
    Thanks in advance for any help…..!!!
    Rj

    Reply
    1. Petr Tichy Post author

      Hi Hassan, you can make the page responsive by including your preferred framework or just by setting your custom media queries.

      Please note that the demo is not mobile optimised, so you will also need to tackle that.

      Good luck.

      Reply
  6. Chris

    This is pretty great. I am having problems getting rid of the final “section”. I took the code out, but when I scroll to the bottom of the page in my browser, there is an empty black space. Any thoughts about how to get rid of this, so the scrolling stops at the bottom of the last section?

    Reply
    1. Petr Tichy Post author

      Hey Chris, nice to see the files being used in action. You will need to adjust the height of the last section. Currently it’s set in _main.js as 3x the height of your browser viewport.

      $slideTall2.height(winH*3);

      Edit the height or set your own height manually in your stylesheet and remove this line from the js file, it really depends on your content.

      Good luck.

      Reply
      1. Genevieve

        Hi, Petr,

        I just wanted to thank you so much for this tutorial–really fantastic!

        I’m having the same issue as Chris above: I’ve removed slide-5, and slide-4 is identical to slide-2 ( just a plain text slide, solid background needs to be height: auto, no special parallax rules–I took out the fade-in/fade-out rules for the content, because they’re not needed for my purposes), but no matter what I do there’s a TON of space added to the bottom of the slide. If I remove the “homeSlide” class, the space gets pushed below my footer (which is added below in my code), and if I leave the “homeSlide” class in slide-4, the space shows up at the bottom of that slide. I tried removing the winH() rules in _main.js, and setting my own height for slide-4 (using both a pixel height, and height: auto;), but neither worked. Help a girl out? 🙂

        Reply
          1. Genevieve

            Thanks so much for your help, Petr. I really appreciate it!

            I tried both the method described in the new tutorial, and adding forceHeight: false, and neither seemed to work. I ended up making the footer slide-5, and we just went live with extra space in that slide, but I would still love to get ride of that space. Would you mind taking a look? http://thewhiskyextravaganza.com

          2. Petr Tichy Post author

            Nicely done Genevieve, I can’t see any blank space at the bottom of your last slide. The slide takes up the whole height of the viewport. Isn’t that what you wanted?

          3. Genevieve

            Thanks, Petr! I’m actually trying to get the footer slide (slide-5) to ONLY be as tall as the content (the way it is on the inside pages of the site), not as tall as the browser window. Is there a way to do that?

          4. Adam

            Thanks a lot Petr, by adding “forceHeight: false” fixed my bottom blank space problem, it works on my website.

  7. stefano almonte

    Hi Petr,
    thanks for your replay …
    the question is:
    i have some sections …
    the first section have 2 divs:
    left and right (same width) …
    left contain 1 image and right contain a long text …
    i need to scroll next section only after reading all text from div right and div left must be fix …
    you understand?
    thanks …
    sorry for my little english …

    Reply
    1. Petr Tichy Post author

      Stefano, I would love to be able to help, but not sure if I understand your question correctly. Maybe you can show a screenshot of what you are trying to achieve?

      Reply
  8. Joe

    Just gotten around to playing with this tutorial. Very awesome work! Especially like the curtain and blur effects. Keep up the good work!

    On a side note, would it be possible to implement a zooming in on background effect? Instead of the standard move up/down/left/right by a couple pixels effect to slowly zoom in picture by 10%? Thanks again Peter!

    Reply
      1. Joe

        Wow that is spot on exactly what I was looking for haha! Seems like you have everything covered, I’m going to have to spend a weekend or two going through all your posts. Thanks!

        Reply
  9. Emad

    Any experience hosting this script on AWS S3? I tried to host it there and it doesn’t seem to work any more. I just loads the text and no images or scripts.

    Reply
  10. Savion

    Is there a way to make a section of text that scrolls, while the background image stays, then at the end of the text it switches to the next section?

    Reply
    1. Petr Tichy Post author

      Hey Savion, thanks for stopping by. You can make your background image fixed which wouldn’t make it move while you are scrolling. You might try to wrap your text in a container and give it a different Skrollr settings to create the effect you are after. Hope that helps.

      Reply
  11. Savion

    Tried adding an image that is 300px high above the first H2 and for some reason it’s showing the 3rd slide text above the 1st slide… Please help…

    Reply
        1. Savion

          Also I am trying to add interactive buttons and links into each section, but it is not letting me click anything… does it have to do with z-index?

          Reply
  12. Dave Dennis

    I am trying to work out how to integrate this kind of design into a CMS (CMS Made Simple) but it seems to me to be very “hands on” with the coding of all the movement etc so it’s a bit of a struggle to get it to behave when using TinyMCE to edit the page content.
    Is there any examples out there of the skrollr.js or similar in a CMS environment?
    Second question – you say at the top of the article “no jquery” but there is jquery being loaded in the page. Why is that? If it’s not needed can it be removed?

    Reply
    1. Petr Tichy Post author

      Hi Dave, thanks for getting in touch. To answer you question #1 – integrating the template to any CMS should be the same process as integrating any other templates. The tricky bit is that parallax websites are all about working out the right timing and positioning based on your content.

      I would suggest you start with some si ple skrollr tutorial so you understand exactly how it woks. Getting to know the basics will help you to uncover the more comples animations and layouts.

      #2 – Skrolls.js is pure JavaScript library and doesn’t require jQuery, but in my example I am using jQuery for resizing each of the sections. If you remove jQuery you also need to remove some of the code in the main.js.

      Hope that helps and good luck with your project. You are looking at the right stuff so keep exploring and learning new things.

      Reply
      1. Dave Dennis

        Thanks for the speedy reply. I hope to crack the integration of this into CMSMS, but the included TinyMCE module does not play well with html5 tags and strips out things like “” from the content, so I am changing things to to try and accomplish the same layout bevahiours.

        Thanks again for sharing your brilliant work!

        Reply
  13. Quilan

    Hi petr, I’m trying to figure out how to achieve this effect here on the homepage. http://nautil.us/

    It’s like a blind that pulls up and down OVER the website behind it. This is not parallax scrolling long page website, but people keep pointing to this page. I’m confused can you please help clarify ?

    Reply
    1. Petr Tichy Post author

      Hi Quilan, thanks for your comment and a great question. You can create similar effect using Skroll.js. Just create the blind element, position it over the top of your content using CSS and then set the skrollr attributes to move it up as user starts scrolling.

      Please note that you should also include a fallback for users who don’t have JavaScript enabled or your content will not be a accessible to them.

      Good luck and share the site with us when it’s live.

      Reply
  14. brod

    Thanks for this, very useful.

    However, I it does not work on iPads. I understand that you need to have the #skrollr-body id somewhere for touch devices and I don’t see it in your demo.

    Reply
    1. Petr Tichy Post author

      Hi Brod, thanks for your feedback. You’re right, my demo is not optimised for iPads, so you will need to do some extra work and testing. Good luck and share your site with us when it’s live.

      Reply
  15. Bhartendu

    Thanks a lot for sharing parallax tutorial. I was searching all through to find such a good tutorial. You have explained everything clear.

    Thanks a lot again. 🙂

    Reply
    1. Petr Tichy Post author

      Hi Shah, thanks for your feedback. To use the scrolling effect with any CMS, you simply just need to keep the same HTML markup and replace hardcoded text and images with the content coming from your CMS.

      Reply
      1. Shah

        Thankyou very much for your reply , i have set everything as you said and everything load and gets displayed in the browser but the jquerry effects are not working. i have included the jquerry, Can you please help in this regard.
        Thanks

        Reply
  16. Nick

    Hi Petr, thank you for an awesome tutorial.

    I successfully integrated your css and html code for making the curtain effect(slide#4) work at the top of my site’s landing page.

    However I have one question, instead of the background image in .bcg class. How can I keep a background video and still maintain the same curtain effect over it.?

    Also why the curtain effect is not working in IE or firefox browsers. Currently it’s only working with chrome!.

    Thank you!

    Reply
    1. Petr Tichy Post author

      Hey Nick, great to see you’ve tried to implement it on your project.

      Can you share a link to a page with your code? It’s hard to know what’s going on without it.

      Reply
      1. chris hough

        Was the video problem solved? I am having the issue and could use an example of how to embed html 5 video as a background.

        Reply
        1. Petr Tichy Post author

          Hi Chris, currently I don’t have a demo using a background video instead of an image. You will need to try to implement it on your own. Cheers

          Reply
  17. Luca Salvioni

    I love this tutorial! I hope is no problem if I tweak it to make my own site. Only one question. If I delete #slide-5 the body still loads as if it was there so in the end there’s like a black ghost slide. Can you explain me why?
    Thank you for your great work!

    L

    Reply
    1. Petr Tichy Post author

      Hey Luca, great to see you’ve found the time to go through the tutorial.

      To fix the black ghost slide, you will need to add forceHeight: false to the _main.js. The height of the body will then stop after your #slide-4.

      It should look like this:
      var s = skrollr.init({forceHeight: false});

      Feel free to use it on any projects or you own site. Let me know how you go.

      Reply
  18. Anthony

    Hi Petr,
    this is a great tutorial for parallax, but it’s not compatible with IE 7 and 8 ?

    With IE8, i have so the section with the black background and the white text (“The End”), there is the scrollbar but nothing happens when i scroll, is it normal ?

    Thanks.

    Reply
    1. Petr Tichy Post author

      Hey Anthony, thanks for stopping by. I haven’t tested it in IE7/8, you might need to tweak the code to make it work in these old browsers. I wouldn’t think someone would try to use this on a website which needs to be IE7/8 compatible. Cheers

      Reply
      1. Marcelo

        Hi Petr,
        Looks lovely in Chrome but it doesn’t work fine in MS Edge/IE 11 neither. It kind of shakes when scrolling.
        I’ve download your code anyway to understand the implementation.
        Regards, and thanks for your post.

        Reply
  19. Mateusz Niziołek

    hi Petr I used your tutorial but I came across problem. What I wanted to achive is process opposite from your slide-5 which is fade to black background. And I wanted to add this effect of unfade black div after first and second slide which is the same as in Your tuttorial. I have been experimenting with different sets of skrollr data structures but nothing works as I want to. I created black div which i want to unfade in slide-3 and show bcg of slide-3 but when i set data-top as opacity it shows my black div in front of slide-1 and slide-2 and I ve set the anchor to the slide-3. I want to unfade from black only section third. Could you help me please?

    Reply
  20. Mateusz Niziołek

    Hi Petr. It’s again me, I resolved my previous problem with unfading from black on my own 😉 but there is another question I have for you. So it’s about height of slides. In my project I have slide which I would like to have winH*3 because there’s a lot going on in this one. So I have my background set to 50% 0 and the center and at the top-bottom as 50% -100 to have this slick move in the back. So problem is with this multiple height of the view port my background end and there is black spot untill next section will come. I’ve spotted your Demo has the same problem in the moment when the text “curtain effect while you scroll” is going to fade out. its like 30px but its unestetic. Could you tell me please if you know solution to this? I’ve tried to make height of my slide above 100% but it didnt work out. Please replay me in your free time

    Reply
    1. Petr Tichy Post author

      You again? 😉 Great to hear from you, keep the questions coming.

      Good point about the black space between the tall slides.

      You will need to resize your image in Photoshop to be more narrower instead of being ‘landscape’ you should use ‘portrait’ image.

      Then you can change the skrollr settings to:

      data-bottom-top="background-position: 50% 0px"
      data-top-bottom="background-position: 50% -200px;"

      Hope that helps.

      Reply
  21. Justin

    Really was looking forward to working with these files. Signed up for newsletter. never received download. I got shafted hard. didn’t even get a reach-a-round or a kiss on the mouth.

    Reply
    1. Petr Tichy Post author

      Hey Justin, my email provider is down at the moment, that’s why you are not receiving any emails. Email me through the contact form on the homepage and I will sort it out manually. Sorry for the hassle.

      Reply
    1. Petr Tichy Post author

      Thanks Henrik, great question.

      The value in the stylesheet doesn’t have any effect on the animation, because the top is overwritten by the Skrollr data attributes.

      It can be actually removed from the stylesheet and the effect will stay the same.

      Reply
  22. Meg

    Hey Petr!

    Thank you so much for this tut, it really helped. However I’m having this weird issue with the pre-loading screen.

    Now when my scroller is at the top of the page and I refresh my site it loads perfectly. However lets say I’m on slide 3 and I refresh the entire body almost doubles in size (it’s minus the size of one slide) for some reason.

    I am using the adjustWindow, and I have 7 slides, and I’m using the homeSlideTall twice if either of those things are relevant.

    Any idea what’s happening?

    Reply
      1. Meg

        Hey Petr!

        So it turns out that removing the fixed height on the last slide fixed the weird issue.

        However, I have a new question. Is there a simple way for the .homeSlide class to refresh the height when you resize the browser window in real time? I’m terrible with JavaScript and jQuery, so any help would greatly appreciated.

        Reply
        1. Petr Tichy Post author

          Hey Meg, great to hear that you’ve fixed it.

          Sure there is a way to resize your section when the browser is resized. Adding this to _main.js will make the trick:

          $window.resize(function() {
          	adjustWindow();
          });
          

          Let me know if you have any other questions or suggestions for tutorial or demo.

          Talk soon.

          Reply
  23. Zicollas

    Hello,

    Thanks for the tutorial, I would like 7 slide, I have duplicated the codes in the HTML and CSS and change the slide number.
    But slides 5 and 6 have no image background, do you have any idea why ? do I need to change something else ?

    Thanks for your help.

    The order of the slides is:
    slide-1:Fade out elements before
    slide-2:Fade me in and out
    slide-3:Fixed element fading in and out
    slide-4:Curtain effect while you scroll
    slide-5:Curtain effect while you scroll
    slide-6:Curtain effect while you scroll
    slide-7:Fixed element fading in and out

    Reply
  24. Sander

    I just can’t understand how you create the ‘curtain’ effect on the 2-3 slide, where the blue-black scrolls and a new section appears.

    I’m working on a site where we have the first slide, then a small (50% of viewport @ height) bar comes up and while that scrolls, beneath that div, a new slide should appear, which appears above the first slide; which is a curtain effect. I just can’t understand, even after about 20 times reading the tutorial. Everything else seems clear, but I just don’t understand how to append the curtain effect on two fixed full screen elements..

    Perhaps you could clarify some key points? Thanks!

    Reply
    1. Petr Tichy Post author

      Hi Sander, thanks for your comment.

      The curtain effect is created by resizing a div inside of another. That’s all.

      Which key points you want me to clarify? Which css property is animating or something else?

      Try going through the simple parallax website tutorial first, if you having issues with understanding how Skrollr works.

      Cheers

      Reply
      1. Sander

        Hey Petr,

        Thanks for your reply. I’ve got it working. It was a combination of being unknown and being ignorant, as I was using one div (section) for both the slide and the .bcg ‘layer’. Because of that, the slide-curtain effect did not appear. After studying (inspect element) on the first tutorial, as you recommended, I indeed found what was wrong.

        After experimenting, I’ve come to the point of understanding, that having two separate layers of content (.homeslide & .bcg) causes the curtain effect, by having the .bcg div stay exactly fixed in place, while the parent (.homeSlide) div gently sliding upwards, while scrolling, causing the .bcg becoming hidden, just like a curtain. Perhaps a strange, incomprehensible way of explaining, but this way, I do understand it. 🙂

        Much thanks for this tutorial!

        Reply
        1. Petr Tichy Post author

          Hey Sander, great to know that you’ve figured it out. And thanks for sharing your explanation of the effect, I am sure others will find it useful. Cheers

          Reply
  25. Ben C

    Awesome parallax plug in. Probably the best one I’ve found over the past year and a half.

    Kudos!

    Question:
    Do you have any recommendations on HOW TO have each #slide height be flexible to ensure dynamic content that grows in vertical height? (Especially for responsive)

    For example, floating divs (columns) inside of a #slide will stack on top of each other as the viewport scales down to mobile size.

    Right now I have to set up media queries to handle the height of #slide, but it doesn’t sustain proper height for dynamic content injected in.

    Please help!
    Thanks.

    Reply
    1. Petr Tichy Post author

      Hi Ben, thanks for you comment and questions.

      In my example the slide height is calculated with JavaScript, but you can create you own version with dynamic height of the slides, but you will need to remove the height resizing from the main.js.

      I made the content to always fit the viewport, because the main point of the tutorial is to get to understand the Skrollr data attributes and element animations.

      You could alternatively use something like enquire.js and resize the slides height in the JavaScript file.

      Hope that helps.

      Reply
  26. Dan

    Great Script Petr,

    I have incorporated the simple parallax scroll effect with the fade out (first slide type).

    Two questions:

    1. Where can i alter the header height that will trigger the effect.

    2. I am having a issue whereas the type is not showing on top of the background image. The div is present, and the fade out opacity is clearly being changed but i do not see the text at all. Almost like it is sitting behind, that being said i attempted to add a z-index without luck.

    Reply
    1. Dan

      A little reconstruction seems to have fixed up both these issues.

      i wonder if you have any recomendations for mobile implementation. Even with the addition of a #skrollr-body i am having a version of my site that simply wont fit the application

      i am hoping to be able to disable the scroll effects for lower resolution devices, but am having difficulties as the changing styles are called within the html and not within the css.

      Reply
  27. Henrik

    Thanks for the great tutorial!
    Is it possible to adjust the speed of the curtains effect when it goes down? I would like the curtain to be fully down at the same time that my next page is in 100% viewpoint (the curtain would then be in the bg and the next page would lay on top of it).

    Thanks!

    Reply
  28. Art Lemus

    Thank you to a great tutorial Petr,
    I’m an interactive design student from Fullerton Ca. I have a question that maybe you can answer. I am trying to use your parallax scroll html code to create a simple 5 slide presentation. I love the way slide 5 shows us a second image of the previous one blurred and with the opacity changed. I am basically trying to copy slide 5 code 5 times and redirecting the image path. If I try to do this it shows me the first slide and all black space until the very end. Why is this? Is there something in the code for slide 5 I am not seeing?? Please get back to me when you can please.
    Thank you
    Art

    Reply
  29. Stefan

    Hello!

    I wanted to recreate only the Slide #1 Example. So I used the HTML Code and the CSS.

    Parallax is working, but I just cannot make my section to fit 100% of the browser height. The section is always only as high as the content inside of it.

    Is this solved via CSS or does some JavaScript do the magic?

    Reply
  30. Justin

    Thank you for the great tutorial, Petr.

    I am trying to apply a blur to my image through a css filter. When I apply the filter, it blurs the image and the content.

    Do you have any suggestions that would allow me to just blur the image?

    Thank you! It is really great to see someone so responsive to the comments/questions.

    Reply
  31. feeLippas

    Hi, and sorry for my bad English.
    I haven’t worked on HTML/CSS for a really long time and I’m trying to replace your header with a logo of mine. I’m trying this but all i get is a blank space. Am I completely wrong?

    .back-link a {
    	color: #4ca340;
    	text-decoration: none; 
    	border-bottom: 1px #4ca340 solid;
    }
    
    to
    
    .back-link a {
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:440px;
    	height:210px;
    	margin-top:5px;
    	background-image:url('../img/logo.png') no-repeat;
    }
    
    Reply
  32. Yash Bhat

    I’m trying to incorporate an image slider on the parallax slider but for some reason it isn’t displaying. I also tried to display the image slider using an iframe but in that case when I click in the iframe (to change the image), nothing happens.

    Reply
    1. Petr Tichy Post author

      Hey Yash, thanks for the comment. I wouldn’t try to implement image slider on a section with a parallax effect. You will need to debug it in the developer tools or Firebug. Cheers

      Reply
  33. chroix

    I love skrollr and have been using it quite a bit lately. One issue I’ve run into is that if I have multiple dynamic content sources the page gets cut off. If I adjust the browser window, even slightly, all of the content displays. I can set a min-height for the window, but this feels like cheating and doesn’t allow for dynamic content to display 100% without vertical scroll bars. Any clues on how to deal with this issue would be greatly appreciated.

    Reply
  34. Stephan

    Hi Petr,
    thanks a lot for your great tutorials – those are perfect for getting started with parallax scrolling websites. Unfortunately I was not able to download the files. Entered my mail adress (gmail) but didn´t receive any mail back. Even not in the spam folder. Is there a way to fix this so I can download the files?
    thanks!!

    Reply
  35. Stephan

    Hi Petr,
    thanks – yes, the mail has arrived in my inbox 🙂
    thx for fixing the issue and now I will start studying the code 🙂
    happy Easter!
    Stephan

    Reply
  36. Mathew Hammett

    Let me start off by saying, this is a wonderfully done tutorial on how to build a parallax scrolling website thank you for that. This site is professionally done and works the way it should.

    I am trying to incorporate this site into a WordPress website that I am designing. Any ideas to as how to make this HTML website work in WordPress and still be editable through the WordPress Admin Panel? Thanks for any help you might have.

    Reply
  37. Jianhong Zhang

    hello,petr ,我在做一个类似于这样的web,需要手机端兼容,对js不是很精通,求帮助!

    Reply
    1. Petr Tichy Post author

      Google Translate: hello, petr, I was doing a similar such web, mobile terminal needs to be compatible for js not very proficient, seek help!

      Reply
  38. Mathew

    Petr,
    How do I change out the pre-loader images with my own. every time i try this in Dreamweaver CS6 you have some settings on it that does not permit me to just enter my own img src path. How would i go about changing out the images you have with my own?

    Reply
  39. Mathew

    Hi Petr,
    I am trying to incorporate my own images in the preload div tag and they are not acting the same every time i go to change anything in the HTML these elements change. any idea how I can change these images to work with my own, and also how would i add more slides? every time i change the images out it no longer acts as a parallax scroller anymore, rather it turns into a bunch of images next to one another. please help?!

    Reply
  40. Aaron Watts

    Thank you for your tutorial and sharing your knowledge.

    My question is simply how do I add a six and seventh slide? Can I not just create a new section and make a reference to it in the CSS? I added a six slide but don’t see it.

    Thank you.

    Reply
  41. Sanket

    From So many days I was looking for this plug in or so called technology..
    I am new to js, it looks amazing.
    Thanks a ton Petr.

    Reply
  42. Jay

    Hi Petr,

    I’m attempting to put this into use – I’m a newbie to this but learning quickly! I’m attempting to go from the blur-lock screen (slide-5) back to some normal, non-parallax content, either after it transitions into .bcg3 or instead of going to .bcg3 entirely. I’ve tried reducing the height of .bcg3 to 0px, putting in a and continuing after that and a few other options, but nothing’s doing so far. I’ll admit – I definitely don’t understand Skrollr as well as I should, but I was hoping you could fill me in on this detail.

    Reply
    1. Petr Tichy Post author

      Hi Jay, thanks for reading and you comment. I would suggest you first disable skrollr and then implement each of the effects one by one. You really need to know how Skrollr works though.

      I am running a survey where you can ask any questions regarding building a parallax scrolling websites. Take a minute and complete the survey to help to creating the most relevant tutorials.

      View survey

      Thanks Jay

      Reply
  43. Wang

    Hi Petr,
    Thanks for such awesome tutors, they’re really amazing!

    But the only issue I’m still confused is that the blur picture doesn’t work on my and my roommate’s Chromes (v34.0.1847.131), but it works perfectly on my safari.

    I’m not sure it is about the z-index or some other hidden secrets of Chrome, I’ve been working on this since last night but still have no idea.

    I wonder is there anyone has the same issue as me and has a hint of how to solve it?

    Thanks!

    Reply
  44. creativespark

    Thanks for this, and the other related tutorials!
    I thought I’d share, in case anyone needs similar: I had to adjust my scroller site so that content could run long if needed since the content is coming from either a loop of posts or from custom metaboxes… so I added a min-height using jQuery to the place where you resize the slides in _main.js.

    // Resize our slides
    //added this next fn to let the sections run long if needed...
    $slide.css("min-height",function(){
        return $(this).height();
    });
    $slide.height(winH);
    s.refresh($('.homeSlide'));
    

    Also note that in enquiry.js, the “listen” function is now deprecated (it throws an error), but you can just delete it from the end of that line:
    the end of the _main.js (responsive version):

    enquire.register("screen and (min-width : 768px)", initAdjustWindow(), false);
    
    Reply
  45. Tino

    How can I create more slides? A couple of people asked the same question but they got no answer. Could you please let us know?

    Thanks!

    Reply
    1. Petr Tichy Post author

      Hey Tino, you would need to modify and tweak the current HTML, CSS and potentially the _main.js files. There isn’t one sentence answer to your question and you will need to dive into some coding.

      I would suggest you going through the Simple Parallax Scrolling Tutorial, learn the basics of Skrollr and then you will be one step closer to adding as many slides as you like.

      Cheers

      Reply
      1. Tino

        Thanks for the quick reply!

        I added a new section in the html and modified the css but doesn’t seem to even see it. What else am I missing?

        Thanks in advance,

        Tino

        Reply
  46. Tiago Santiago

    Hi,

    I’m definitly going to try and learn from your tutorial. But before that, I need to thank you for your time and effort spent 🙂 it looks very simple and well written! I will give you feedback in the end

    thank you

    Reply
  47. loricyau

    hi, petr thx for the such awesome tutorial
    i got some question ask about your page, from i downloaded your demo
    it seems something has been lock, when adding hyperlink (like example “fade out element before they view port”) it dosent response.

    im a newbie designer trying learn about html. Appreciate can teach me how.

    Reply
  48. Jay

    Hey Peter,

    I am hoping you can help me with something in regards to parallax scrolling and one site navigation. I am using Squarespace (with the Marquee template, which is a parallax template) and have been trying to generate a one site navigation look.

    It is easy enough on Squarespace, but one major issue I’m having is getting anchor links to function within drop down folders.

    I’m hoping you can help me figure out how to get this fixed. I’ve gone from site to site seeing if anyone knows the necessary coding for this, but haven’t found any luck.

    Anyway, I’m just getting into code, so am not incredibly versed in it, but it’d be great if you could assist me with this–or if not–refer me to someone who can.

    Thanks!

    Reply
    1. Petr Tichy Post author

      Hey Jay, thanks for reading and for the comment. The best way to get help with your Squarespace template would be to contact their support. Cheers

      PS: and no need to apologise for the spelling of my name, I am used to it:)

      Reply
  49. George

    This is a great tutorial and with a smooth implementation.

    However while it all looks good in Chrome and Safari, in Mozilla the Parallax effect doesn’t work for all images.

    you can have a look here http://www.digital4u.gr/photolab

    Reply
  50. Katie

    Thanks, Petr! This tutorial was amazing and very useful. I am having some issues with a few pieces of it, though. I tried to make the first slide longer to accommodate the graphic by manipulating the .bcg height percentage, but it didn’t help. Any suggestions?

    Also, the text from slide 3 displays at the top when I load the website. How can I fix this?

    The URL is: http://kgoellner.com/NEWindex.html

    Reply
  51. Matt

    Hi Petr

    Firstly, thanks for making the great resources available that you do! It’s very kind and helpful.

    I’ve been trying to employ the resources for the parallax scrolling website with WordPress. The resources seem to work fine when in a standalone .html or .php file when accessed directly; but when I try to utilise them in a WordPress template based on TwentyTwelve, I’m finding that it’s not utilising any of the css or javascript.

    Was just wondering if there was a known issue for this that doesn’t allow the resources to work with WordPress. I noticed that your blog is in WordPress, so I’m a bit bamboozled!

    Thank you in advance for any help 🙂

    Reply
    1. Petr Tichy Post author

      Hi Matt, thanks for the nice words about my tutorials. It looks like the reference to the js and css files is broken on your site. My demo files are running as a static html pages, they are not implemented in WordPress as a part of this site.

      I might have a tutorial on how to implement this page to WordPress in the future. In the meantime check the developer tools console and see that all your files are loading.

      Reply
  52. zach

    hi petr

    My preloader screen takes like 30’s to load
    how can I fix this, and how can I change the background color of my slides.

    thanks

    Reply
  53. Hugo

    Amazing tutorial! Just want to point out that the “anchor-target” is not always mandatory. By default the anchor-target is set to ‘itself’, so you only need to explicitly specify it when you want the anchor-target to be something else!

    Reply
  54. anees anees

    Thank you very very much,

    this is a first time I can get some info & execute some thing .. thanks a alot

    please, I would ask about this tutorial, is that a series or lesions from start to advance, I need to learn how I can control a page more affiance, and learn about js library are used, and how or when needed to edit a main js like this …

    thanks a lot

    Reply
      1. anees anees

        Dear Petr Tichy,

        thank you very much, Im start to build tow parallax website just from tow tutorial, you are amazing man, also Im read about skollr js from github, its very nice …also Im try to buy a master course but I suddenly I have 49$, so bad, I will wait some time to i can get it … but really thank you ^_^

        also, please I would ask about stop scrolling main wrapper and start scrolling for inner div, when finished scrolling inner div, its will be out and continue main wrapper scrolling, my case is I need scroll normally, but when Im visit about us section, I need display a one by one, one hide, second display…etc

        Im fixed this by set a position fixed for main wrapper when im in about us section. after that Im return it to relative, to continue scrolling normally, any others idea ?

        also about update url, its any way to update url without refresh a page?

        thanks,

        Reply
        1. Petr Tichy Post author

          Hi Anees, thank you for your feedback, glad my tutorials are helping you to learn more about Skrollr. I would love to help, but your questions are quite tricky to answer in one comment. Please study more the Skrollr documentation to figure out exactly how Skrollr works and how to accomplish your desired effect. Thanks again and good luck.

          Reply
          1. anees anees

            Dear Petr Tichy ..

            Really, your blog and tutorial is very good ..I like it ..

            Im build two website parallax now, its nice start to learn more of thing about this technology …thanks a lot ^_^

            http://2nees.com/parallex/en
            http://www.pioneers-bookshop.com/

  55. TDP

    Thanks for help. Is there any way to put hyperlink in these images I tried:

    <a href rel="nofollow">

    tag but it doesn’t work. Please reply. Thanks

    Reply
  56. Sunaina

    Hi all!

    I am new folk here, and have short understanding about JQuery. I know about HTML, CSS, JavaScript. This post is so informative and i must appreciate your attempt. Now i want to create a parallax website. Just like this.

    But i am unable to understand whole process what should be my first step.
    Please guide me

    Reply
  57. Santino

    Hi Petr,

    Is there a way to start the skrollr from the last slide or bottom of the page on page load?

    Reply
  58. James Hanratty

    Hello Petr,

    Thank you for all of your tutorials. This is the best place on the internet for parallax help!

    I am trying to add slides after slide 5, but I am having no luck. Is this possible or does slide 5 have to be my final slide? I have tried to replicate slide 5’s functionality on another slide but am unable to get it working. Thanks!

    Reply
    1. Petr Tichy Post author

      Hi James, thanks for the great feedback. I wouldn’t recommend just copy and paste the slides, it wasn’t build to be a flexible template reusable on any project. I’ve created the demo to hopefully teach you how skrollr works and what can be achieved. Any modifications require CSS and Skrollr knowledge. Cheers

      Reply
  59. Vlad-Mihai

    Hey Petr,

    Great work my friend, but I have a question. I tried adding a background image that is 310 px high (like on the slide #2 of your tutorial) on a section with a fixed height of 310 px. This is the CSS:

    /* Slide 4 */
    #slide-4 .bcg {background:url(‘images/bcg_slide-4.jpg’);
    height:310px;}

    What happens is that i see the background image but the rest of the section continues with a black background (since the .bcg is at height : 100%). I tried everything but i cant seem to be able to get rid of that black background underneath my image, any help would be greatly appreciated, thanks!

    Reply
    1. Vlad-Mihai

      lol right after i typed my message i removed the homeslide in the HTML section and it works, thanks for the great tutorial!

      Reply
  60. Vlad-Mihai

    Hi Petr, great work btw. My question concerns the horizontal movement of a section, when i add the code, the image moves sideways but it reveals the black background on the edge. My image is not black on the edges like on your scooter image. Is there a way for the image to occupy the whole screen even when scrolling horizontally? Thanks!

    Reply
    1. Petr Tichy Post author

      Vlad, you might need to remove the image as a background-image and create a html object on the page. You then need to write a javascript code which will resize the image to the full-screen size. Or try play with the aspect ration of your image, making it more landscape might also help. Good luck.

      Reply
  61. Brandon

    Hi Peter,

    Quick questions, I am using skrollr on a WordPress site and would like the user to be able to manage the bcg images via the WP backend. I’ve gotten the images and text to load so far, but the parallax isn’t kicking in.

    I’ve removed the background image on #slide-1 .bcg and instead added the background-image as an inline style on the .bcg. Can it work this way? Markup went from:

    To:

    Thanks!

    Reply
    1. Petr Tichy Post author

      Hi Brandon, the markup didn’t come through so hard to say what your issue is. Having the image as an inline style is a good approach. Make sure you don’t have any JavaScript errors on your page. Cheers

      Reply
  62. Vlad-Mihai

    Hi Petr,

    Im trying to do the cross fade effect with 2 bcg on my section 7. I added the code and i see the transition being done in the browser, but right in the middle of it, the other section (section 8) comes barging on top, and all my sections disappear after that. Do i need to change the height in the .js file? I see that in the HTML you added a “homeSlideTall2” class, anything to do with that? Im pretty dumbfounded at this point, i just need to do this + the zoom and curtain effects to complete my masterpiece for a new dance/pop star here in Montreal.

    www.gibbyrecords.com/main.html

    (the section where i want to do the effect is the one with an image of a rolls royce, theres 2 images there, a light and darker one)

    Again, cheers for your excellent work!

    Reply
  63. Kamil

    Hi Petr.
    Im trying parallax.
    I have question. On this page http://page4u.waw.pl/ on bottom i have white empty spot. I can not fix it. When i resize window it disappears.
    I can not figure it out.

    Reply
      1. Kamil

        wohooo it works!
        on page load i use

        skrollr.init({
            forceHeight: false
        });
        

        and every time I change height property of any section i use

        skrollr.init({
            forceHeight: false
        });
        

        and then refresh viewports

         
        s.refresh($('.slide'));
        

        🙂

        Reply
  64. Vlad-Mihai

    Hi Petr,

    I managed to complete the cross fade effect on my car image by changing the height of the section, but it was still not working, so i changed the “bcg2” background position from “fixed” to “absolute” in the css and now i can see my final sections scrolling after that. Now i need to ask you a question that may have a simple answer but i dont know WHERE to insert a specific data attribute that i want to add on that car image. After the cross fade effect, theres the next section that scrolls, its a 310 px height background where you see “PICTURE GALLERY”, i want to add:

    data-center=”background-position: 50% -29px;”
    data-top-bottom=”background-position: 50% -100px;”
    data-anchor-target=”#slide-7″>>

    on the car image to add an upward movement to it (instead of it staying still like it is now) while the PICTURE GALLERY section scrolls through and the car image leaves the viewport. I just dont know where to insert that data attribute so it kicks in right after the cross fade effect

    You can visit my current progress on www.gibbyrecords.com/main.html

    Thanks!

    Reply
    1. Petr Tichy Post author

      Hi Vlad-Mihai, you always insert the data attributes directly on the element which you want to animate. You can also define a data-anchor-target which is an element that will trigger this animation. Cheers

      Reply
  65. Vlad-Mihai

    Hey Petr,

    I successfully corrected all previous problems, but now i need to do one last effect to complete my website. I have 2 last questions for you:

    1. I noticed that a fixed element, in this case a full screen youtube video in an iframe, is actually active in other sections (but invisible), the problem is that this blocks out the other hyperlinks in those sections. Is there any way around this?

    2. The last effect i need to do is the zoom, because it fits well with the concept of my website. Right now, i have my slide #6, which contains all the images of downtown montreal, and slide #7 which is the 2 images of the car in the street. I need to apply the zoom effect on the last .bcg of slide #6 (zoom in the city), fade to blue background, then the car image fades in. I tried following your zoom tutorial but im having problems integrating this in my page. How can i do this?

    Without your tutorials, i would have not made it this far, im grateful for your hard work, cheers to you my friend!

    Reply
  66. Alex

    Hey Petr

    Thanks so much for this tutorial – I was banging my head against a wall with Parallax design for a long time!

    I’ve got everything set up and looking beautiful on my website – but the issue I’m having is that when the page first loads all the images and text appear jumbled at the top for a few seconds before popping into place. I know on your demo’s you have a loading gif that prevents that.

    Can you think of any bit of code I might have accidentally altered or removed that might have turned the loading gif off?

    Cheers

    Reply
    1. Petr Tichy Post author

      Hi Alex,
      thanks for the comment. Make sure you have a ‘loading’ class on the body tag and that there no javascript errors in the browser console. Cheers

      Reply
  67. sai krishna

    hi petr,
    Great work really awesome .i have a small doubt

    i have 20 images in a grid with divs i am able to load image one by one .i am giving the data-4500 =”opacity:0″ data-4510=”opcacity:0″ but when i switch to bigger resolution device scrolling is not happening .how to fix i am new to parallax scrolling .thanks

    Reply
  68. Mario

    Hi! I’m a real rookie in html but i’d like to update my private website with that amazing look of parallaxe moving… So i have downloaded your testfiles and changed all stuff like text, or the backround pics and i’m on the right way. I placed some buttons (pics) where i can navigate to secondary sides with many fotos of my hobby. It looks good for me from the design but i have a small problem with links on the slide5 area… i have set the content z-Index to 666666, and all buttons are running on slide area 2,3 and 4, unfortunately not on the blurring picture area ( i have 3 buttons there) . The last black background (the end) shows other 3 buttons and they work…
    What can i do?
    many thanks
    regards mario

    Reply
    1. Petr Tichy Post author

      Hi Mario and everyone else.

      Thanks a lot for checking out this parallax scrolling tutorial and for you comment.

      My recommendation is to use the knowledge you’ve learned by going through the tutorial and build your project from scratch.

      That way you would know exactly what’s happening with your css/html/js.

      By downloading and using my files, you are getting it as is and there is just too many variables to consider, to be able to help with individual requests.

      Thanks for your understanding and for the amazing support.

      Cheers
      Petr

      Reply
  69. kense

    Hi Petr,

    I’ve tried to implement an instance of the first slide on a site I’m developing. I’ve copied the code exactly and can see that the image and text are both present, but for some reason the text isn’t visible?

    When I inspect the element using the developer tools on my browser, I can see that the text is present and is even scrolling up as it’s supposed to do, but it’s just not visible…

    I’ve tried adding a high z-index on .hsContent and adding position: relative, but no luck. I’ve even tried lowering the opacity of the image to see if the text was hiding behind it for some reason, but it’s just not there.

    Any ideas?

    Reply
  70. Neil Cooper

    Hi Petr,
    Great tutorial and a great help to everyone!
    One quick question, I can’t seem to get any of the hsContent to appear on the page. It’s all present in the markup, but just hidden for some reason.
    Any ideas why this would be??

    Thanks in advance,
    Neil

    Reply
      1. Neil

        Thanks for getting back to me Petr.
        The demo page works fine, but it’s as soon as i try to put any thing else in to the in the mark up it doesnt appear.

        Ive got a test page live here…
        http://www.neilcooperdesign.co.uk/sagetest/

        Ive got around it by putting text onto the images for now, but not an ideal solution. You can see the h2 and p tags in the mark up but not on screen.

        Thanks again, really appreciated.
        Neil

        Reply
  71. Sam Singh

    Hi, love the tutorial and plugin.

    However, after following your tutorial, I can’t get any of the text to show up. For example, the on the 1st slide doesn’t show. My code is exactly the same as yours. I’m not sure what’s going on.

    Reply
  72. sckarolos

    Hi Petr,

    Great work. I have read the license file etc but still it is not clear to me if i have to link back or if i have to keep the css header comment as it is. I am very interested to modify your excellent example for my portfolio website so this why I am asking.

    Reply
  73. Rich

    Thanks for you hard work, I have used this and it looks great……. on a pc unfortunately it doesn’t look so good on any devices i have viewed it on other than a desk top, on my phone(Samsung 4gs(running with Android)) all the images seem to load at the same time, the text size is easly fixable but with out the devices fixes it’s not much use.

    I have viewed it on other devices as well as my phone, 2 tablets and i different phone as well.

    Reply
    1. Ingee

      Hello Rich,
      one solution for your problem is to use a framework like bootstrap.

      Petr edit: removed too much code for a comment.

      In the last sections inside the stylesheet you can set all options for mobile or tablets.

      My site is not finfished yet, I´m working on it, nd ou must try some difference options, if one option will not work. For the basic of my bootstrap site I used the free template of Squadfree.

      There is no ready for use solution everywhere. It´s learning by doing.

      Many greetings
      Ingee

      Reply
      1. Petr Tichy Post author

        Thanks Ingee for the comment, I had to remove the large amount of code. Perhaps you can get in touch with Rich and email him a zip file?

        Alternatively you can create a CodePen demo and share it with us here.

        Cheers
        Petr

        Reply
      2. Rich

        Thanks i will try playing with it and see what happens, i was trying to find the video where you made it but i don’t think you have done one?

        Reply
  74. Lucas

    Hi Petr

    First of all thanks bunches for you tutorial. Ive been using your code as the structure for a personal website that I am making and its looking awesome. Now when I run the website locally (just opening the html file in chrome) everything works fine, the issue arises when hosting via github. Ive been trying to troubleshoot this issue myself but to no avail. Heres a link to my website and the problem should present itself http://lucasflores.github.io/ (it seems to be stuck in the “loading” screen). From my research my best guess is that github doesn’t support certain pluggins. But even if that is the case i havnt the slightest clue to a work around. Any help/insight would be greatly appreciated!

    Best,
    Lucas

    Reply
    1. Petr Tichy Post author

      Hey Lucas, check the web developer tools (Network tab) and you’ll see a broken reference to _main.js, that’s why it’s not loading anything.

      The browser can’t find http://lucasflores.github.io/js/_main.js.

      Hope that helps.

      Reply
  75. Fabbryzz

    Hi Petr! Great tutorial! But I have a problem and I hope you can help me..
    I’m working on this site: http://goo.gl/90zayl and I would make arrows near the texts that point at other pages of the site. But I can’t make them clickable, and also for the text nearby! It is not clickable and not selectable. I tried to apply “z-index:999999” even to arrows and text layers but doing like this these layers are visible when they mustn’t have to do this!
    If I can make text linkable to pages would be more than enough!

    Reply
    1. Petr Tichy Post author

      Fabbryzz, thanks for the comment. You can make elements visible only when you need them using Skrollr.

      Simply use display: none and display: block in the data-attributes.

      With the non selectable text you might need to also give the position:relative.

      The best way to debug this is to leave only two sections on the page, make everything clickable, add another section, make everything clickable etc. This way you’ll keep your CSS and Skrollr data-attributes under control.

      Hope that helps and good luck with the project.

      Reply
  76. Daniel Heppner

    I really want this to work, but it’s just not working when I follow the tutorial. I don’t know what to do.
    http://i.imgur.com/LevcZLh.png
    http://danielheppner.com/

    Please help.

    Reply
    1. Petr Tichy Post author

      Hi Daniel, sorry that you having troubles with the tutorial. Try to download the final files and include the _main.js file in your project. That should resize your slides to fullscreen. Hope that helps. Cheers

      Reply
      1. Daniel Heppner

        That definitely helped! However, it still isn’t displaying the text. Thank you so much for helping; I want to figure this out instead of downloading the sample so I learn and know how it works.

        Reply
          1. Dan

            I hit this too. Petr, you have opacity:0 in your code snipper for slide-1 (on the web page). But not in your downloaded file.

            Great tutorial. Thanks.

  77. Sam Racupiens

    Can I request for some demo files of this because this is a bit more complicated then the simple parallax. I really want to learn this. Thank You and keep up the good work!

    Reply
  78. Cayle

    Hey Petr, amazing stuff! Just a quick question that I couldn’t seem to find answered through the many questions asked previously.

    I’m looking to change some of the text to images. For instance the “fade out elements before they leave viewport” would be an image instead.

    I’m erasing the text and creating an tag in between the function. When I view the site, the image doesn’t display unless I scroll up. It’s like the scroll function works backwards.

    Should I be putting these images in the CSS or just adjust the fade out settings to different pixels?

    Thanks again!
    Cayle

    Reply
    1. Petr Tichy Post author

      Hey Cayle, looks like the skrollr data-attributes are misbehaving after you change the markup.

      I would recommend to get familiar with Skrollr and start your project from scratch.

      You’ll find that it will be quicker and you’ll be across every single line of code on your project.

      Cheers
      Petr

      Reply
  79. Sander

    Hi Petr,

    Thanks for your marvellous tutorial. I’m not a techy, so from time to time it is pretty difficult for me to understand, but I’ll survive!
    I only have one problem. When I add a new image to the directory img, I do not get it loaded on my site. I have looked into the imagedloaded.js, because I have the feeling there is the problem, but my technical knowledge is shortcoming.
    On line 658 the image was in this.addImage( img ). After line 669 the js jumped back to 658. Then it touches 726 and runs to the end of the script. I do not know how to find out more. I have downloaded the files last week.
    I’m pretty sure, that it is such a silly thing, but I just can’t find it. Can you please advice?

    Thank you very much in advance.

    Reply
  80. Bobby Gulshan

    Great tutorial. Basis for a site I am working on. Question. I want to add internal links and add jquery click events to automatically scroll to various DOM elements. Is there anything to keep in mind before trying this?

    Reply
    1. Petr Tichy Post author

      Hey Yannick, feel free to use it for anything you like. Please take a time to understand what the code does as I am not able to provide any support.

      The tutorial was created to teach you how Skrollr works and wasn’t intended as a complete solution, but if you think it meats your project requirements, use it.

      Reply
  81. vladimir

    Hi, great tutorial indeed. But why you didn’t explain any of the javascript function and javascript loading scripts… I think it is also very important 🙂

    Reply
    1. Petr Tichy Post author

      Hi Vladimir, thanks for the feedback. The focus of this tutorial are Skrollr data attributes, what specific questions do you have regarding the js functionality? I could create a follow up article. Let me know. Cheers

      Reply
  82. Jenni Nexus

    Great tut.. Mine is still a work-in-progress, but wondering the easiest way to get it to work on my iphone or the code for alternative page – thank uu!!

    http://www.jenninexus.com/FAQ-Parallax.php

    Reply
  83. ruth

    hi, im trying to use this effect on my page on asp.net platform
    (function($) {
    $(‘Body’).imagesLoaded( function() {
    setTimeout(function() {
    the code above returns error saying object not recognised.
    can u help…am imissin smthng?

    Reply
    1. Petr Tichy Post author

      Hey Ruth, this could be a lot of things. Check the order of js files and make sure jQuery is loaded first, then your plugins and main.js.

      Or try to simplify your page as much as you can and start adding back all js files and html elements one by one, until you get the same error.

      Reply
      1. ruth

        this is how i hv rendered it,

        window.jQuery || document.write(”)

        ( function( $ ) {
        // Init Skrollr
        var s = skrollr.init({
        render: function(data) {
        //Debugging – Log the current scroll position.
        //console.log(data.curTop);
        }
        });
        } )( jQuery );

        Reply
  84. Mitchell Goudie

    Hi there, great tutorial!

    I was just wondering how I can increase the size of the first section? I’ve tried adjusting the hsContainer height but it doesn’t seem to work. I’m looking for a similar effect used on this site: http://www.verblondon.com/#home

    Any solutions?

    Reply
      1. Mitchell Goudie

        Thanks Petr, I read through the tutorial and fixed the issue.

        However, Now I’m trying to have links in the header that when clicked scroll to elements on the page. I’ve tried to use the solution on this page http://stackoverflow.com/questions/6677035/jquery-scroll-to-element but when I click the button, it doesn’t scroll.

        Is something interfering with the code? I saw your tutorial for the page scroller but I need the links to be in the header and for some to lead to content halfway or at the bottom of the page.

        Any help would be appreciated, thanks.

        Reply
  85. Alex

    Hey,
    I love your tutorial great job!

    But when i use the framework and the parallax effect and add/remove slides i get a performance issue. when i test your demo there is no problem and gets a 8,6 speed grade, but when i edit a few slides and upload it the performance drops and its nasty to scroll! It gets a 7,6 speed grade.

    i have tried optimizing the images etc. and removing unwanted css and html codes but no improvements.

    I hope you can help me!

    Reply
  86. vimal

    Hi,

    I am doing a parallax web site but i have added link like this..

    Section part:

    In bottom of my html page taking blank white space. and when i comment this link then space is not there, but it will not become parallax scrolling page.

    Please suggest me soon….
    urgent
    Thanks
    vimal

    Reply
  87. vimal

    hi,
    i am new in parallax scrolling web development.
    and i have created at local machine a parallax scrolling webpage.
    but in bottom of page have blank white space is coming.
    Section:

    and there are four different section layer also i added skrollr js.
    pls let me know why blank space is coming

    thanks
    vimal

    Reply
  88. Mathan

    Hi Petr Tichy,

    I am new to parallax development.You documentation is awesome.Thanks for your support.

    I have some doubts in skrollr.js.I am trying to create a site like this below link.

    http://journey.lifeofpimovie.com/#!/

    In my scenario i have four sections and all are html parts.I don’t have background image for each section.In all your documentation you explained with using background-position.

    So my question is how to apply parallax with out using background-positions.

    Regards,
    Mathan

    Reply
  89. Dixie

    i need help please,
    i’m using parallax scrolling master
    everything is fine on pc but not on mobile divices.
    my question is it possible to disable it on mobile?
    i’m experting an anwer.
    thank u!

    Reply
  90. Arni

    Hi Petr!
    Fantastic tutorial! It really encouraged me to try a parallax site on my own!
    Especially the blur effect in the fifth section is amazing!
    Unfortunately it turned out, thats its not working like its supposed to be in google chrome! Also your demo site..
    Do you have an idea what to do, my site is somehow ready and im trying different things for days, without the desired result!
    I’d appreciate any help or idea for what to do..
    Best..
    Arni

    Reply
    1. Arni

      Ohh i meant the blur effect of course! 🙂
      Safari and firefox is good, but in Chrome the first picture, the sharp one is not positioning correctly! Tried position: fixed and many other ..

      Reply
  91. Javier Estrada

    Hi Petr, Thanks for the tutorial its really informative. I just had one question. How do I initiate the function that give me the exact pixel placement for the precise timing and where would I go to check that number? Thanks!

    Reply
  92. Wayne

    Hi Petr,

    Finally getting around to trying out your tutorial, I am able to get my own images and understand the scrolling options, but all the background images after the 1st one are cut off at the bottom. I noticed this when also comparing your demo the JPG image files.

    How does one fix this so the entire image displays?

    Reply
    1. Petr Tichy Post author

      Hi Wayne, you can fix that by changing the aspect ratio of your images, but still there will be scenarios when the image will be cut off.

      Or you can animate a container with an image instead of a background image and have content siting on top of this container.

      Hope that helps.

      Reply
      1. Wayne

        Hi Petr,

        Thanks for the reply…I fixed this problem shortly after posting that message. The whole parallax is working now! 11 slides. Maybe a little long, but the images are knockout IMHO. I will email it to you, maybe you can give it a quick look-see.

        I think I will try to add some (optional) music. It’s an (optional) intro for a website promoting a book.

        I changed the main.css bcg – background-size to CONTAIN instead of COVER. I then resized the images by reducing the height. Yes, there is a slight black border on the left/right but it is uniform and doesn’t detract from the look.

        Maybe I could get rid of the black left/right border by further resizing the images, but I am limited due to the nature of some of the photos.

        Reply
  93. Arnar Kári Ágústsson

    There is one big problem with this implementation… It is not build for the graphics card. The CPU has to paint the page multiple times causing the animation to be laggy on some computers and well bellow 60fps. The best way to implement this feature is to move each moving component to a layer on the graphics card.
    http://jankfree.org/jank-busters-io-2013/template.html#1

    Reply
  94. Helen

    Hi,

    I’ve downloaded the demo and tried to replace slide 1 and 2 with my own images to test it out. However, the parallex stopped working once i did that. The difference i noticed is that your images are 1600px X 1066px, whereas mine are 1400px X 860px. Is there somewhere i need to change my code to reference the height? Please help!

    Reply
  95. Gerard

    Awesome effect for a website! Congrats for this amazing job!
    I’m learning about this effect as much as I can with your tutorials.
    I just want to ask a question that something weird happened to me. I tried to define larger font to 70px for h2 element and I want to adjust the texts to different positions in each slide. I mean, in first slide, display the text at the bottom right with a padding of 0 30%. In that case its displayed where should be, but the text of the slide 3 is appearing at the very beginning of slide 1. This happens with the example you made available for download. Could you give me some advice for this?
    Thank you very much

    Reply
  96. Ingee

    Hi,
    have one question: the picture bcg_slide_1.jpg: Is it free to use for commercial sites? If not, where can I by this one?

    Many greetings
    Ingee

    Reply
    1. Petr Tichy Post author

      Hey Ingee, that image is a snapshot during my traveling in Vietnam. Feel free to use it however you like.

      If you become a millionaire using this picture, please donate something to a charity.

      Good luck.

      Reply
  97. Adam

    First, I want to say thank you so much for these tutorials. They are amazing!

    Secondly, HELP! I am trying to make a parallax site for my wife and can’t seem to get it.

    I copied everything down (she uses weebly.com), but it isn’t working.

    Here’s a link:
    http://sl-ent32.weebly.com/

    Reply
    1. Petr Tichy Post author

      Thanks Adam, I am not familiar with Weebly, but had a quick look and it looks like none of the necessary javascript files are referenced properly. In other words Skrollr is not loading, which means animations are not working.

      You might need to get in touch weebly directly.

      Thanks

      Reply
  98. mike d

    Your script doesn’t work on a mobile Galaxy 5s with either Chrome or Explorer. You could have told us that!! But because you didn’t I find it irritating that I wasted my time installing this thing.

    So while it’s a beautiful effect, and a beautifully well intentioned giveaway and tutorial, unless you’re going to redirect users to a mobile site it’s a complete waste of time. I appreciate the sentiment and the effort it takes to make and give things like this away but if it doesn’t work on mobile it’s pretty useless.

    Reply
  99. mike d

    I’d like to apologize if my previous comments appeared rude, the parallax scroller is amazing. And while it may not work on mobile very well on mobile in its current form, I’m pretty sure it can be adapted to with the background-url adjustments. At the very least a mobile redirect is suitable, and there is also some modest documentation on google on how to make this script mobile responsive. It may also have difficulty in displaying links prior to the end of the page as nothing is clickable. But it’s certainly gorgeous and I’m looking forward to using it. Thank you Tomatohater!

    Reply
  100. Federica

    Hi Petr,

    Great tutorial.

    I tried to apply it to my website but I had no luck with the parallax animation.
    It’s not working!

    I’m using only the first two sections (slide 1 and slide 2).
    I had to set #slide-1 .bcg with position:absolute as the background-image didn’t show up otherwise. Also, #slide-2 .bcg has heigh:100%.
    The rest is exactly the same as in your files.

    Hope you can help.

    Thanks!

    Reply
    1. Petr Tichy Post author

      Hi Federica, the best way would be to setup a reduced test case on CodePen. Check the browser developer tools console for any javascript errors, also what you mean by it’s not working? No animations at all, or things are out of sync?

      Reply
      1. federica

        Hi Petr,

        Thank you for the prompt reply.

        Here is the link to the website
        http://www.rene-official.com/

        As you can see, there’s no animation at all.

        I can’t figure out where I might be wrong.

        Thanks!

        Reply
        1. Petr Tichy Post author

          Hi Federica, your body has height: 100%; , which means that there is nothing to scroll to, but you have also 2 js errors in the console.

          1. imagesLoaded plugin is not loading
          2. check line 99 of your html (window.jQuery…), you seem to have too many closing tags

          Fix the js errors first and then you’ll see what else you need to adjust.

          Reply
          1. Federica

            Hi Potr,

            That was a good spot. Thank you so much!

            I removed height:100% from body and called the imagesloaded.js

            I also removed position:absolute from slide 1 .bcg .
            The animation now works!

            There’s only one little problem.
            At the top left of the second section there’s a bracket which I’d like to remove and I can’t figure out what causes it.

            Thank you.

          2. Petr Tichy Post author

            You don’t like the smiley face? It’s at the bottom of your html. Remove ') jquery-1.9.1.min.js reference.

            It should only read like this:

            Hope that helps.

          3. Federica

            Hi Petr,

            This tutorial is helping my website looking great! Thanks!

            However I have a problem with my third slide’s background which doesn’t fit 100% height of the screen.

            This is the link: http://www.rene-official.com/rene.html

            What should I change?

            Thanks for your help!

  101. Afeez

    This is a great work. I have saved your link as a favorite since beginning of the year looking forward to the best time i can try this. The thread itself has become a knowledge base, which is a testament to how useful your post is.

    Straight to the point, i would like to know, what changes i need to make if i want my parallax scrolling effect, just within a container which is about 60% of the screen. i.e having 3 pictures that would scroll before other content of the body.
    Take for example this url: http://hsshopfitters.co.za/

    Reply
    1. Petr Tichy Post author

      Hi Afeez, thanks for the nice words, I am glad you’ve found it useful.

      And thanks for sharing the nice example of subtle Skrollr animation.

      I would suggest you create you page layout from scratch instead of reusing code from this tutorial.

      That way you will only include what you need for your layout and will be in full control of your animations.

      Reply
      1. Afeez

        Hi Petr,
        Thank you for the immediate response. I really want to create my own layout as you recommended. I took a look at your page Simple Parallax Scrolling Tutorial/.
        Now this is the skeleton I have – my markup:

        [CODE AUTOMATICALLY REMOVED]

        I want MAIN not to be more than 600px of the entire page, and I want each of the pictures/slides to occupy the entire height of 600px. and the rest of the div should flow along.

        Using the css and _main.js in Simple Parallax Scrolling Tutorial/ I have added some 3 div containers with specified heights below the MAIN container in the body.
        I also changed the height of the main in css file to 600px and overflow-x property to hidden.In the _main.js I changed the forceheight to true.

        Now my page on the browser is looking almost the way I would like it but, there is an additional scroller introduced in the browser. How do I get rid of that?

        Should I include the 3 other containers in the main as sections with slide numbers?

        I have tried to edit the $slide variable in javascript to cover the entire body but I don’t like the result?

        I would really like the browser to scroll only 3 pictures in the main container and seamlessly scroll the other div on the page.

        I have spent the whole day trying to crack this. I need your help, please!.

        Reply
        1. Petr Tichy Post author

          Hi Afeez, I would love to help, but comments are not the best place to copy all your code. Setup a reduced CodePen demo and I might be able to have a look. Cheers

          Reply
    1. Petr Tichy Post author

      Hey Daniel, another option is to create a container and apply a background to it, then you can animate the position of this container instead of a background.

      Reply
  102. Michele

    Hi Petr,

    This tutorial is helping my website looking great! Thanks!

    However I have a problem with my third slide’s background which doesn’t fit 100% height of the screen.

    This is the link: http://www.rene-official.com/rene.html

    What should I change?

    Thanks for your help!

    Reply
  103. anubhav

    This is one of the best tutorials i have ever seen. i have a problem i want to put image links over slide 3. i am able to put images but links are not working i don’t know why please help me.

    Reply
  104. Kazi Obaydollah

    Today I search about Parallax scrolling for learn it, and finally I found this piece of gold! Your detailed explanation will be very helpful for a beginner like me.I can’t wait to give a try. Thanks Petr for this lovely tutorial.

    Reply
  105. Joey Aza

    Hi, maybe I am being stupid but where is the starter code ?
    you mention about having starter code or do I have it incorrect?

    thanks

    Joe

    Reply
  106. Marco

    Wonderful post about parallax, thank you! ! I noticed I can’t use jquery to create my own effects (i.e. show a div when mouse hover the title). I updated the library with the new JQuery version and tried everything possible. Can anybody help me please? thanks a lot!

    Reply
      1. Marco

        Hello! Thanks for your reply. There were an error once I downloaded your code, the error was about jquery library not found in the ajax.googleapis.com repository. I just fixed it adding the library manually, and now there are no errors. Then I tried adding a button (or another user mouse or keboard event, it’s the same) and specify what to do when the button is clicked. I wanted to show a div after clicking. the jquery code is in a new jquery.js file and not in your js code. I added the event under $(document).ready . I’m not expert with jquery/javascript, this could be the real issue 😀

        Reply
  107. Carlos

    Hi Peter!

    im making a site for hobby of the history of the synth and i want the scroll to stop with every synth description so the user can read the full description before scrolling to the next one here is a sample of the site.

    http://www.webcsz.com/synth/index.html

    i hope you can help me
    THX

    Reply
  108. Dan

    Does skrollr support triggering a CSS animation at a given point?

    Or only the CSS value interpolation (or CSS value change, like static to fixed)?

    Reply
  109. Alec

    Hi, I am following your tutorial and everything is working except for one thing: the text is being hidden behind the background images. I do not know how to fix this. Thank You.

    Reply
    1. Petr Tichy Post author

      Hey Alec, it might be a lot of things, but most likely and issue with z-index. Double check your markup for any unclosed html tags and review your stylesheet for any small mistakes. Hard to help any better without seeing the code. Thanks for checking the tutorial out.

      Reply
  110. sani

    Hi, I’ve problem. I’m doing exactly you did in your video. Everything matches. My src folder has even have required files. But still it’s not working in my chrome browser.
    Please guide me what’s the problem. I’m waiting for the response.
    Thanks,
    If you can ans me here that would be great. Waiting!

    Reply
      1. sani

        here’s the youtube link

        https://www.youtube.com/watch?v=7ftdR_DTUFo&spfreload=1

        Yes, I have already checked everything. I’m not able to figure out the issue.
        The error is:
        Uncaught error: skrollr.init() is not defined

        Reply
          1. sani

            Thank you. I fixed the issue. You’re providing Great helping material.
            Stay blessed 🙂

          2. Petr Tichy Post author

            Great to hear that you’ve fixed the issue. Can you share with others what the fix was? It might help someone else with debugging. Thanks

  111. Luis

    Hello Petr,
    I have seen the tutorials and they are great, I made a website and it’s working awesome, almost, I find that sometimes it gets choppy, specially in safari it gets very choppy, I tried some optimization things that I read online, like adding
    *,:before,:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-backface-visibility:hidden;
    }
    to the top of the css, and this,

    to the top of the body to get the gpu working to render.
    I had some success (fixed some alignment problems with safari as well) but not that much, now I tried using transform: translateY to replace the animations with top, but it only worked with the first element (a video), I tried using it in the next but the only way I got it to show it on the viewport was with a value of -3000%….which seems a bit excessive, so my question is this, do you have any idea/advice on how to tackle this problem? why is the value so extreme? is it worth to keep going this route with the translateY ?

    Thank you VERY much for your time, I am waiting for the new scrollmagic workshop!

    PS: the website I am working on is www.acaciacapital.mx (I am still fiddling with the skrollr menu library)

    Reply
  112. hamit

    Hi Petry,

    it’s working on computer fine. But parallax effect does not work on mobile and tablet with touch screen. scrolling is not working on phone. why ?? how can we fix this issue ?
    thanks

    Reply
  113. Miss Geek

    Hi,
    great work! It’s amazing! Thank you so much.
    I really took so much benefit from it.

    In addition I’ve got one question.
    For my own example I need that the first ‘blue picture with the two boots’ remains some time on its vertical position while scrolling has left already 200px or more. I tried allot but unfortunately I was not able to produce this scenario. Do you have any tip for me how to realize this? That would be great.

    Many thanks and best regards

    Reply
  114. Tanishq

    Hey Petr,
    You have provided a very cool tutorial but can you tell me a very easy Framework for scroll animation and tutorial if you can plz. I appriciate you

    Reply
  115. James

    Great tutorial! I’m having a problem with the fixed text on certain slides.
    I used the same code (copy/paste, with care to change out the slide # in each one), and the text in the 3rd, 4th, and 5th slide on the page loads in front of everything when opening or reloading the page. Picture them all stacked in the same spot on top of slide #1.
    Not until I scroll down to each of those slides, do they go down to opacity: 0, then 1, then 0 like normal. I’ve tried z-index with no luck.
    Thanks!

    Reply
  116. Ahmed

    I have said this on another page on your site a few minutes ago, but I will say it again here, you are an artist I love the site and it just made me love scrolling.

    Please let us know how would this work on a page like divi theme.

    Reply
  117. Usamah Jundi Abdillah

    Hello sir! i am wondering what changes must be made to make it a purely horizontal-scrolling page? i.e the next page overlapping the current page comes from right to left or vice versa

    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.