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.
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.
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!
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"> </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.
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!
Related Articles
- How To Create A Parallax Scrolling Website – Adding one page website navigation – Part 2 of this tutorial
- Skrollr vs ScrollMagic – which one to choose and why
- How To Create A Scrolling Slideshow Using Skrollr
I have not tried it yet but I appreciate your work !!
Try it and let me know what you think. Cheers
Awesome tutorial. Gives me the courage to get my feet wet with parallax sites.
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.
Hi Hridya, check my other tutorial on how to turn scrolling animations off or refer to the mobile sections of Skrollr documentation. Cheers
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 ++
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-bodyto your markup to enable mobile support for skrollr.There is more info in the skroll.js documentation.
Hope that helps.
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(”)
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.
I’m having the same issue… of course I am trying to load this on a wordpress site.
www.espressoneeded.com/test
Any thoughts?
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.
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
How do I insert working links in the sections?
Just use the skrollr-menu-https://github.com/Prinzhorn/skrollr-menu, or any other scroll-to/animated scroll plugin for one page websites.
Mirko, I’m not trying to build navigation. I am trying put content with working anchor tags in the sections.
Hi Mike,
I’ve the same problem to put clickable links within the content.
Have you got any working solutions?
Thank you.
Teresa/Mike, to get links in sections working add a higher
z-index and position: relativeto the.hsContent, that should fix it.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.
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.
For links in final section you can use pseudo-class and pointer-events 😉
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
Thanks for sharing this with others Ingee!
Thanks so much!
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
Thanks for the feedback Frank.
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
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.
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?
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.jsas 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.
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? 🙂
Hi Genevieve, thanks a lot for the feedback.
I am covering how to safely remove the last section in the second part of the tutorial.
It looks like you need to add
forceHeight: falseto theskrollr.init()function in_main.js.That should fix it.
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
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?
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?
Thanks a lot Petr, by adding “forceHeight: false” fixed my bottom blank space problem, it works on my website.
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 …
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?
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!
Thanks for the encouraging feedback Joe!
You can read my other tutorial How to zoom into an image on scroll. Is that the effect you are after?
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!
Haha, thanks for the nice words Joe. Explore the rest of the blog, I am sure you will find some other useful articles.
Pete,
This is an incredible demo. I am forever grateful for this!
Great stuff, thank you for sharing.
Emad
Thanks for the nice feedback, I am sure you can put the files to good use.
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.
Emad, check your browser debug console and see if all the file paths are correct. It should work regardless where you are hosting it.
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?
Hey Savion, thanks for stopping by. You can make your
background image fixedwhich 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.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…
Looks like you need to adjust the Skrollr settings for
. hsContenton the first slide. It’s hard to help without actually seeing your code.Where exactly can adjust the .hsContent settings for 1 slide at a time?
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?
Try adding high
z-indexandposition: relativeto.hsContent.Thank you so much for your speedy replies! Great piece of work here. Thank you.
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?
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.
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!
You’re welcome Dave, great to see that you’ve found the issue. Share the site with us, once you are done! Cheers
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 ?
Hi Quilan, thanks for your comment and a great question. You can create similar effect using Skroll.js. Just create the
blindelement, 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.
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.
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.
Great work! Subscribing to get more 🙂
Good luck with your projects.
J
Great, welcome on board and good luck with your projects too Jakub.
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. 🙂
Thanks for the nice words Bhartendu. I am glad you’ve found it useful. Happy coding.
Hi, Petr Tichy very nice work , can you please tell me how to use this scolling effect with drupal 7.
Thanks
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.
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
Shah, it looks like you still have some javascript errors. Check the console log.
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!
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.
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.
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
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
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: falseto 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.
Thank you! Great work!
You’re welcome Luca. Cheers
Awesome tutorial, just what i was looking for. Subscribed for future tutorials, keep it up.
Welcome on board Robbin. Great to hear from you.
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.
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
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.
hi Petr I used your tutorial but I came across problem. What I wanted to achive is process opposite from your
slide-5which 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 inslide-3and showbcg of slide-3but when i setdata-topas opacity it shows my black div in front of slide-1 and slide-2 and I ve set the anchor to theslide-3. I want to unfade from black only section third. Could you help me please?Hi Mateusz, check the part 2 of the tutorial, I have created a 3rd slide which fades in from black. Cheers
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
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.
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.
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.
Why is “top” at 25% on .curtainContainer .curtain at slide#4 in css?
Thanks Henrik, great question.
The value in the stylesheet doesn’t have any effect on the animation, because the
topis overwritten by the Skrollr data attributes.It can be actually removed from the stylesheet and the effect will stay the same.
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?
Hey Meg, can you post a link to you page? Or email it to me through the form on the homepage.
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.
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.jswill make the trick:$window.resize(function() { adjustWindow(); });Let me know if you have any other questions or suggestions for tutorial or demo.
Talk soon.
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
Hi Zicollas, thanks for stopping by, I would love to help but it’s hard without seeing the code.
I would suggest you try to understand how Skrollr works, so you can debug your page. Copy and paste of the code could result in unexpected results.
Try the simple parallax website tutorial first.
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!
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
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!
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
Well explained ! And by the way it’s a great plugin for parallax
Thanks Kowo, yep it’s a great plugin and perfect for simple scrolling animations.
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.
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.
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.
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.
How did you fix the text to show? I’m having a similar issue :/
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!
Henrik, you will need adjust the data attributes for the
.curtainif you want to make it quicker.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
Hi Art,
thanks for the feedback and welcome on the blog.
What you are trying to do might not be as easy as copying
#slide-55x times.You will need to understand how skrollr works in order to debug your code and get the result you are after.
Try my simple parallax website tutorial first or refer to skrollr anchor points infographics.
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?
There is a bit of JavaScript which resizes every
.homeSlideto 100% viewport height.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.
THIS IS NOT MOBILE COMPATIBLE, no work on Android and no work on iOS
Hi Diego, you’re right it’s not mobile compatible, but the part 3 of the tutorial will be mobile optimised.
Stay tuned.
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; }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.
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
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.
Hey Chroix, thanks for the comment.
I am not sure if I understand your question correctly, but if you are pulling content dynamically from somewhere you might want run the refresh(); function after the loading has finished.
Or this video describes how to add a slide with a dynamic content to a simple parallax page.
https://www.youtube.com/watch?v=9adt6RW-mfs
Hope that helps.
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!!
Hi Stephan,
my email provider had some issues, but I believe you’ve received it by now.
Can you please confirm?
Cheers
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
Great Stephan. Happy easter.
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.
hello,petr ,我在做一个类似于这样的web，需要手机端兼容，对js不是很精通，求帮助！
Google Translate: hello, petr, I was doing a similar such web, mobile terminal needs to be compatible for js not very proficient, seek help!
Hi Jianhong, I will be doing a tutorial on how to turn the skrollr off for mobile devices. Stay tuned.
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?
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?!
Hi Matt, please make sure you don’t have any
htmlorjserrors in your code. Everything should work even with your images.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.
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.
Thanks for reading Sanket.
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.
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
Great post! Your explanation was exactly what I was looking for!
Thanks for reading SQ.
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!
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);Thanks for the comment and the suggested code update. Cheers
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!
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
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
This might be quite a few things. You’ll need to debug it through Goggle Chrome web tools.
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
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.
Hi, get the files from the second part, some of these issues have been fixed there. Thanks
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!
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:)
Whoops I meant Petr*
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
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
Hello Petr Tichy ,
Thank you this tutorial it’s very usefull and this is my first lesson,
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 🙂
Hi Matt, thanks for the nice words about my tutorials. It looks like the reference to the
jsandcssfiles 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.
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
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!
Thanks petr for parallax design..
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
Hi Anees, start with Simple Parallax Scrolling Tutorial. That should help you to understand the basics a bit better. Cheers
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,
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.
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/
Thanks for help. Is there any way to put hyperlink in these images I tried:
tag but it doesn’t work. Please reply. Thanks
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
Hi Sunaina, welcome to the blog. The best way to start would be to go thought the Simple Parallax Scrolling tutorial first. Cheers
This is sample website i want to create just like this http://quiteperfect.net/
Nice tutorial, shame your source files are so poorly indented 🙁
Hi Petr,
Is there a way to start the skrollr from the last slide or bottom of the page on page load?
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!
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
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!
lol right after i typed my message i removed the homeslide in the HTML section and it works, thanks for the great tutorial!
No worries Vlad, thanks for the feedback and I am glad you’ve worked it out.
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!
Vlad, you might need to remove the image as a background-image and create a
![]()
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!
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
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!
Hi Vlad,
really nice site you are building there, well done! I would love to help, but there is not a simple answer to your question.
Please take some time to really understand how skrollr works or take on the Parallax Scrolling Master Class, that could help you to create any scrolling layout without any headaches.
Thanks
Petr
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.
Hi Kamil, looks like setting
forceHeight: falsecould do the trick. Read more about it here. Cheerswohooo 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'));🙂
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!
Hi Vlad-Mihai, you always insert the
data attributesdirectly on the element which you want to animate. You can also define adata-anchor-targetwhich is an element that will trigger this animation. CheersHey 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!
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
Hi Alex,
thanks for the comment. Make sure you have a ‘loading’ class on the
bodytag and that there no javascript errors in the browser console. Cheershi 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
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
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
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?
Hi. Did you ever manage to get this sorted? Im having the same problem.
Thanks,
Neil
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
Hi Neil, not sure what could be your issue. Are you having the same issue on my demo page? It seems to be working fine for me.
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
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.
Use source code of demo, this tutorial is just to provoke questions.
I think you forget to describe some necessary features used in demo.
For example imagesloaded.js
Hi Andrew, thanks for your feedback. I might cover imagesloaded in my other posts and hope you still got something out of the tutorial. Cheers
Looks like what I’m looking for. Many thx.
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.
Hi, you can modify the files, do whatever you like with them and don’t have to link back to me. How does that sound?
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.
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
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
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?
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
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.
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!
Fabbryzz, thanks for the comment. You can make elements visible only when you need them using Skrollr.
Simply use
display: noneanddisplay: blockin 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
CSSand Skrollrdata-attributesunder control.Hope that helps and good luck with the project.
Thank you so much Petr! U rock! 😉
Thanks Fabbryzz, you rock even more!
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.
Hi Daniel, sorry that you having troubles with the tutorial. Try to download the final files and include the
_main.jsfile in your project. That should resize your slides to fullscreen. Hope that helps. CheersThat 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.
Your
.hsContainerhasopacity: 0set in the stylesheet, that’s why it’s not showing up.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.
Hi Dan, thanks for the heads up. Could you send me an email with a screenshot of the code snippet that should be updated?
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!
The text isn’t showing up. Any suggestions?
Hey Terry, this could be a lot of things. Have you gone through the other comments? Is the same issue happening on my demo page?
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
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
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.
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?
Thanks Bobby, you can use Skrollr Menu for this. Cheers
Can I use this for commercial websites?
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.
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 🙂
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
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
Hi Jenni, I recommend turning scrolling animations off for mobile devices. Check out my How to make parallax scrolling website responsive tutorial.
Hi Petr!!
Great tutorial indeed. For a site I am working on
thnxx for sharing with us …:P
Thanks Murtuza, I am glad it was useful. Cheers
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?
Hey Ruth, this could be a lot of things. Check the order of
jsfiles and make sure jQuery is loaded first, then your plugins andmain.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.
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 );
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?
Hey Mitchell, maybe try first my Simple parallax scrolling tutorial to get familiar how Skrollr works. Adjusting the code of this tutorial should then become easier. Cheers
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.
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!
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
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
Hey Vimal, it looks like you need to change the
forceHeight: falseoption.I can’t get the words to fade in and out in slide 2.
Have you checked the browser console for any js errors?
Just a quick update for the Parallax Scrolling Master Class owners.
Until Monday the 13th April you can upgrade to Skrollr Combo for a discounted price and get access to the popular Skrollr Workshop.
Don’t miss out.
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
Hi Mathan, LIFE OF PI is quite a big ask for a first parallax project. You can use Skrollr to animate any CSS property.
The most performant are CSS transforms.
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!
Yes, it is possible to disable it on mobile. Follow How to make parallax scrolling website responsive tutorial.
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
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 ..
thx u for the help
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!
Hi Javier, check the Skrollr documentation (render section), there is a code snippet that lets you render the current scroll position in the console. Hope that helps. Cheers
Really liked it……
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?
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.
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.
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
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!
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
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
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.
This doesn’t seem to work on mobile/tablet, well not on iOS anyway?
Any thoughts?
Doesn’t work on Android either. It’s junk. If it did it’d be amazing.
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/
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
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.
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!
Thanks Mike, I hope you’ve learned something new and will apply the knowledge on you own project. Also here’s a tutorial on how to make it responsive. Hope that helps. Cheers
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!
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?
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!
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.tagsFix the js errors first and then you’ll see what else you need to adjust.
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.
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.
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!
Hi Petr,
Is there a way to turn the animation off on small devices ?
Thanks
Hi Federica, you can use Enquire.js to disable skrollr for mobile devices. Follow this How to make parallax scrolling website responsive tutorial.
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/
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.
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
cssand_main.jsin 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
$slidevariable 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!.
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
Hi Petr, animation of “background-position” causes huge lagging in Chrome. Any workaround for this?
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.
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!
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.
// No jQuery. Just plain JavaScript. //
Then why JQuery js reference on the first line?
Hi Venkatesh, I am using jQuery in the second part of the tutorial, that is why it is included.
Thanks
Petr
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.
No probs Kazi, hope you’ll find it useful. Cheers
Many thanks. Sooo useful!:)
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
Hey Joe, doesn’t the download files button work for you? It’s at the bottom of the tutorial.
Love it… very easy to setup and modify.
Thank you:)
Thanks Louella!
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!
Hi Marco, can you clarify what the issue is? Do you see any errors in the browser console? Thanks Petr
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 😀
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
Hi Carlos,
nice effect you are trying to create, something like this should work:
Here’s a related Stackoverflow question and answer – How to stop a div scrolling when reaching top of a window.
Hope that helps.
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)?
Hi Dan, Skrollr only supports the interpolation of CSS values. ScrollMagic can trigger CSS animations at a specific point. Hope that helps.
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.
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.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!
Hi Sani, which video are you referring to? And have you checked the browser console for any javascript errors?
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
Make sure that the url to the skrollr plugin is correct and that the main.js is below the skrollr reference in your html.
Thank you. I fixed the issue. You’re providing Great helping material.
Stay blessed 🙂
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
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)
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
Check out my other tutorial on how to turn the animations off for mobile.
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
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
Thanks Tanishq. The most common options are Skrollr and ScrollMagic. If you need something more simpler, then check out some of these CSS animation libraries.
Doesn’t work on mobile phone?
I cannot see working on my Android Chrome.
No it doesn’t, try this tutorial to learn how to make it responsive:
How to make parallax scrolling website responsive
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!
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.
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
How should i use this if i am using react ?