How to create a parallax scrolling website

How to create a parallax scrolling website

December 29, 2013 • Web development164 Replies

Share on Facebook2Tweet about this on Twitter1Share on Google+9Share on LinkedIn3

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 Download Files

Part 2 – Released!
In part two you will learn how to add a one page website navigation using jQuery Waypoints.

Go to Part 2 – Adding one page website navigation.

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.

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.

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.

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.

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

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

Part 2 – Released!
In part two you will learn how to add a one page website navigation using jQuery Waypoints.

Go to Part 2 – Adding one page website navigation.

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.

If you have enjoyed this tutorial you will love reading “Part 2” and “Simple parallax scrolling tutorial“.

Still confused how Skrollr and the data attributes work?

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

I will teach you:

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

Parallax Scrolling Master Class

Want to download the files?

The files are only exclusively available to my newsletter subscribers. Sign up to instantly receive the files and get also my future tutorials straight to your inbox.

164 thoughts on “How to create a parallax scrolling website

  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
  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?

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

Leave a Reply

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

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