I have received many messages and a positive feedback regarding my recent parallax website tutorial. Based on your feedback I have decided to create another tutorial, this time aimed more towards a junior and mid developers.
I will try to explain everything in more detail and you can also download the starting files to follow the tutorial step by step.
First have a look at what we will be creating and download the starting files.
Quick overview
In this tutorial you will learn:
- how to setup your html for a parallax website
- how to animate background image at a different speed then page scrolling
- how to precisely control the timing and duration of your animations.
Instructions
Open the index.html, /css/main.css and /js/_main.js files in your favorite code editor. That’s where we will be doing all our updates. Before we dive in, lets quickly explain what we have for start.
Step 1 – Setup
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<h2>Simple parallax scrolling is...</h2>
</div>
</div>
</div>
</section>
<!-- Section 2 -->
<!-- Section 3 -->
<!-- Section 4 -->
</main>
</body>
HTML
The code in index.html is pretty simple, we have 4 sections with a background image .bcg and a content container .hsContainer (home slide container) which is by default horizontally and vertically centered.
CSS
Each section has a custom background and the content is repositioned to the desired position. The style of the text is also slightly different on each of the sections, that’s purely to make it nicely readable.
JS
In the _main.js we have a simple script which preloads our background images (thanks to ImagesLoaded) and resizes each of the sections to be 100% of the browser viewport.
If you view the index file in a browser now, you will see 4 sections scrolling as they would normally and the background image fixed as defined in our stylesheet. Next we’ll initiate the Skrollr.js and start creating our parallax scrolling effect.
Step 2 – Skrollr.js
Add the following lines to your main.js to enable Skrollr.js and to refresh it after our sections are resized to 100% of the height of the viewport.
// Init Skrollr
var s = skrollr.init();
// Refresh Skrollr after resizing our sections
s.refresh($('.homeSlide'));
Section 1
Now we have to add some data attributes to our sections to see Skrollr in action and to see our background image and content to move at a different speed. Copy and paste the following lines into your index.html.
<section id="slide-1" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
>
<div class="hsContainer">
<div class="hsContent"
data-center="bottom: 200px; opacity: 1"
data-top="bottom: 1200px; opacity: 0"
data-anchor-target="#slide-1 h2"
>
<h2>Simple parallax scrolling is...</h2>
</div>
</div>
</div>
</section>
What we are telling the browser is to change the background image position from 50% 0 to 50% -100px, which means that the image is moved up by 100px from the start of the scrolling until the bottom of the #slide-1 hits the top of the browser viewport.
If this is your first project using Skrollr, you might find the data attributes a bit confusing. If that’s the case, download my Skrollr Cheatsheet or:
Get my free Skrollr tips and save heaps of time!
The data-attribute tip, will save you hours if not days or weeks of figuring out. PLUS you'll get the first 2 videos from the popular Parallax Scrolling Master Class!
Enter your email below and I’ll send it right to your inbox!
The text is scrolling with the page until the #slide-1 h2 hits the centre of our browser and then animates quickly of the screen and fades out, which we have defined in data-top="bottom: 1200px; opacity: 0".
The data-anchor-target is a very powerful attribute, which enables you to define exactly when should your animation start and finish in relation the defined target element. Using this attribute correctly enables you to have a precise control over the timing of your scrolling animations.
Section 2
Copy and paste the following lines of code to enable animations on the second slide.
<section id="slide-2" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
>
<div class="hsContainer">
<div class="hsContent"
data-center="opacity: 1"
data-center-top="opacity: 0"
data--100-bottom="opacity: 0;"
data-anchor-target="#slide-2"
>
<h2>great for story telling websites.</h2>
</div>
</div>
</div>
</section>
Here we are animating the background image at the same speed to keep things consistent. The difference between #slide-1 and #slide-2 is that the second slide is scrolling through the whole viewport, but the first one loads already visible.
That’s why we are defining both data-top-bottom and data-bottom-top. data-center is actually not doing anything as it’s value is exactly half way between top and bottom, but experiment with different values and see how the data-center affects the whole animation.
Think about it as another keyframe.
We are going to slightly tweak our css for the .hsContent and h2 of this slide, because we want this heading to be fixed to the bottom of the viewport. Update your css for Slide 2 with the following styles.
/* Slide 2 */
#slide-2 .bcg {background-image:url('../img/bcg_slide-2.jpg')}
#slide-2 .hsContent {
margin-left: -450px;
top: auto;
}
#slide-2 h2 {
position: fixed;
top: 70%;
}
Now the heading is fixed 70% from the top and doesn’t scroll with the page. This enables us to make this heading visible much earlier than before when it wasn’t fixed. We are also fading it out when the #slide-2 is 100px from the bottom of the browser.
Section 3
You should know by now what to do…copy and paste the following lines of code into your index.html.
Even better than copy and paste is to type in the data attributes manually, thats what we do in the parallax masterclass.
<section id="slide-3" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-3"
>
<div class="hsContainer">
<div class="hsContent"
data--50-bottom="opacity: 0;"
data--200-bottom="opacity: 1;"
data-center="opacity: 1"
data-200-top="opacity: 0"
data-anchor-target="#slide-3 h2"
>
<h2>Now go and create your own story</h2>
</div>
</div>
</div>
</section>
Again our background is animating at the same speed as the rest of the page, which makes things nicely consistent. You can tweak the settings to whatever you like, just keep in mind that subtle parallax scrolling effects usually work much better and are easier on eyes than quick animations.
Section 4
Hey you, still following? Lets copy and paste settings for our last slide.
<section id="slide-4" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-4"
>
<div class="hsContainer">
<div class="hsContent"
data-bottom-top="opacity: 0"
data-25p-top="opacity: 0"
data-top="opacity: 1"
data-anchor-target="#slide-4"
>
<h2>and share mine.</h2>
</div>
</div>
</div>
</section>
For the final slide we are also going to slightly tweak our css. We want the text to be fixed to the top of the browser and we will remove the background color and padding. Update your stylesheet with the following highlighted lines of code.
/* Slide 4 */
#slide-4 .bcg {background-image:url('../img/bcg_slide-4.jpg')}
#slide-4 .hsContent {
margin-left: -450px;
position: fixed;
top: 250px;
}
#slide-4 h2 {
background: none;
padding-left: 0;
padding-right: 0;
}
This makes the heading on the last slide fixed to 250px from the top. The skrollr attributes for .hsContent are making the heading invisible until the top of #slide-4 is 25% from the top of the browser window.
Step 3 – Force Height
If you have followed the tutorial and got to this point, you will see everything working fine in the browser and all our parallax scrolling animations working nicely. There is only one issue. When you scroll past the last slide, you will see a big black slide coming from nowhere.
Skrollr is by default manipulating the height of the document to make sure all animations fit inside and the black color is our background color.
But what we want is the page to finish at the end of the last slide. To do that we will need to turn off the forceHeight option for Skrollr.
Update your main.js with the following code.
// Init Skrollr
var s = skrollr.init({
forceHeight: false
});
Now everything should be working exactly how we wanted.
Conclusion
There you have it, a simple parallax scrolling tutorial with a subtle animations. Let me know what do you think about parallax scrolling animations. Are they being overused or used on wrong projects?
The true is, if they are done correctly they can create a visually stunning effects and increase the user engagement. If you have enjoyed this tutorial you will love reading “How to create a parallax scrolling website“.
Get my free Skrollr tips and save heaps of time!
The data-attribute tip, will save you hours if not days or weeks of figuring out. PLUS you'll get the first 2 videos from the popular Parallax Scrolling Master Class!
Enter your email below and I’ll send it right to your inbox!
Excellent tutorial! As was the last one. I was having zero luck, though, with the previous tutorial in adapting a menu structure that didn’t jump right to target – though the end animation **at** the target plays. I attempted it also with the skrollr.menu.min.js without joy.
How about focusing the next tutorial on adding navigation that scrolls from the navigation up or down to the targeted section. 🙂
Hi Debbie, thanks for the nice feedback. So you just want the page to scroll smoothly to a certain section when you click on your navigation link?
I haven’t tried skrollr.menu.js but I did similar effect with SkrollTo jQuery plugin.
Hi Debbie, thanks for the nice feedback. So you just want the page to scroll smoothly to a certain section when you click on your navigation link?
Have a look at the second part of the tutorial Debbie. Enjoy.
Hi,
Thanks for your tutorial. It’s really nice.
I have one question and it’s due to my lack of knowledge. I was hoping to make the text box relative so you could view the text on a mobile device.
Do you have any suggestions?
Mary
Hi Mary,
to make it mobile optimised you will need to include media queries and implement Skrollr mobile support.
Another way would be to implement Enquire.js and turn the parallax off on smaller screens.
Hope that helps, thanks for the comment and good luck with your project.
Thanks for the excellent tutorial Petr!
I am having a hellish time trying to get this to work on mobile and tablet devices. Is there any way you can elaborate on implementing the Skrollr mobile support?
Hi Rob, thanks for the feedback. You’re not alone who is trying to make Skrollr work on mobile, unfortunatelly it’s not one line of code which would make it work.
Easier approach would be to turn parallax off on mobile using enquire.js.
I might create a tutorial on that when I have time.
Hi Petr,
I am very new to web. Is Codepen an editor that I can use for this? I notice some inline styling and scripting in the HTML page and Codepen doesn’t seem to like that. Sorry for the amateur question.
Thanks!
Hi Tucker, CodePen is an online editor, that is used by front-end developer to quickly create demos and experiment with code and new plugins.
I have a few pens with Skrollr and they all work fine.
Cheers
Petr
Hi,
Thanks for your tutorial. I’m a beginner in parralax scrolling techniques and I’m trying to get this to work on my own website. Unfortunately I’m not having any luck, I’ve included all the script files and the necessary HTML and CSS but the text doesn’t fade out, and for the 2nd 3rd and 4th slides the text doesn’t even show. The background images also do not move (slower than the content within that section). It’s as if the functions aren’t being called or running.
Can you help?
Hi Jack, thanks for stopping by. Try to look in the developer tools in the console if there are any JavaScript errors. Check that the path to all js files is correct.
Have you used the starting files I have provided?
I seemed to have diagnosed the problem.
html, body, #wrapper, .scroller { height: 100%; }I had this set in another style sheet used to get a multi-level off canvas navigation menu working that I got from another tutorial which was breaking/disabling all the parralax scrolling effects from the subtle slow movement of the background images to the fading in and out of text.
I hope this helps other people that may also be struggling with getting this to work. I don’t understand why height: 100% on the outer wrapper(s) would cause a problem however. I wonder if there is a workaround for this.
Good work Petr.
Thanks for your tutorial.
Cheers
Stefano
You’re welcome Stefano. Enjoy and thanks for the feedback.
Thanks so much for this tutorial, it was extremely useful, I’ve been blundering through ‘tutorials’ from around the internet over the last few days to understand websites and yours seriously stands out =)
I’m just curious however, I managed to complete the project and I could alter the text, how do i change the images in this particular template? I’ve changed the image src to the images that i want in the source code, however it’s not translating into the displayed version. Any ideas on why this is? Thanks so much
Hi Daniel, thanks for your great feedback.
Regarding your images issue, make sure that the path to your images is correct, or alternatively you can just replace my images (
img/bcg_slide-1.jpg, img/bcg_slide-2.jpg, etc.) with yours.Good luck and let me know if you are still having any issues with it.
Hi, good work!
You know how can I add pause in 1st slide? I mean:
slide 1 (one background image)
fade-in – fade-out “some text 1”
fade-in – fade out “some text 2”
and scroll to next slide
P.
Hey Piotr, thanks for stopping by and for the great question.
To create a pause effect, you would need to make a few adjustments:
Have a look at my other tutorial, the 4th section with “Curtain effect” is taller then other slides, which means it will be in the viewport for longer. That’s where you would put and animate your two containers.
If you don’t want the background to animate on that slide, simply remove the Skrollr
data attributesfrom the background container.Hope that helps.
thanks for help,
I add to js “.height(winH*3);” an what should I use?
data-0=”opacity:1″ data-500=”opacity:0″ for ‘some text 1’ etc.
is it a good way?
Yes, that would work, but because the slide height will change based on the browser viewport, I would suggest you use
percentageinstead ofpixeloffset.data-top="opacity: 1" data--20p-top="opacity: 0"also make sure you have your anchor set to the right container eg. slide ID.data-anchor-target="#slide-X"thank you thank you thank you, this is the best example of parallax tutorial I have come across, I look forward to seeing more of your work.
Haha, thanks for the feedback Aycee3. Always nice to hear that someone found it useful. Welcome to my blog.
Bummer that it doesn’t also work on iOS devices…
Hi KCJ, you’re right it wasn’t optimized for iOS. You would need tweak the code to make it work on iOS. Just refer to the Skrollr documentation, specifically the mobile support section.
Hi, just want to thank you. I’m just giving the first steps with parallax scrolling and skrollr and this post has been very very useful. Thanks
Thanks Tiago, good luck with your project and let me know if you have any questions. Cheers
Employers are asking for parallax scrolling on job boards and none of my html5/css3 books have anything about it. Thanks for putting this together.
Thanks Mary. Great to see people finding it useful. Cheers
Hi Petr,
Awesome tutorial! Thank you.
I’ve been looking for a simple parallax like this to build into a shopify theme however I cannot get the code to work properly within the liquid framework. Do you have any suggestions?
Hi Matt, thanks for the feedback. You need to refer to the liquid documentation and make sure that the final output stays the same. It should still work fine. Cheers
Hi Petr, thanks for the great tutorials and fast replies 🙂
A tutorial about background full-screen video could be nice, i.e creating a simple website that has a video loop running in the background. Moreover, is it possible to create a parallax scroll website where some of the sections you scroll to are video rather than an image?
Thanks!
Hey Yonatan, thanks for your feedback, I try to answer quickly because no one likes waiting;)
I am receiving the full-screen
videoquestions and suggestions quite often, it’s time for a tutorial on this topic.I don’t see a reason why some of the sections couldn’t have a video in the background. I will try to set it up in my future tutorials.
Take care and thanks again for stopping by. There are millions of other blogs our there, sometime I wonder why you guys keep coming back to Ihatetomatoes?
Hi Petr,
Thanks for great tutorial.
As for the video, I’ve been trying to implement this full background video: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video
The video is playing as a background but it doesn’t work smoothly with the scroll effect, any ideas what might be the issue?
Hi,
Thanks for sharing a nice tutorials. It’s work well for desktop but it giving problem on mobile.
Is there any solution for that.
Thanks
Hi Petr,
Thanks for the tutorial and i having the same problem as Rakesh.
I tried adding in to wrap up the whole thing but still no luck..
and the images on mobile doesn’t support background-size: cover as well as background-position: fixed..
Please advice how to fix this issue..
Thank you very much
Hi Petr, thank you for creating such a wonderful tutorial. I’ve been sifting through tutorials for days with no real understanding until now. I do have a question though- if I wanted to add more background images than just 4 how would I go about doing that? I would still like for each to wipe over the previous as they do in your tutorial. Thank you so much for sharing your knowledge!
Hi Anna, thanks for you kind words.
To add another background image you would need to duplicate one of the slides and change the
idto eg.id="slide-5". You would also need to update the reference from slide-4 to slide-5 in the skrollr data-attributes and obviously you would need to update your stylesheet with the new additional slide.Hope that helps.
I’ve duplicated the required html and css but can’t seem to update the skrollr data-attributes? Can I simply find it in the .js code in Dreamweaver? If so, where is it located?
Never mind, simply making the adjustments to the html and css was sufficient.
Cheers!
Nice David, great to know you’ve made it behave.
Thank you vor your tutorial, it helped me greatly starting with the parallax script, but I have noticed one problem – I cannot downscale the demo page on my mobile devices (both Android and Windows Phone), and because of it the text are not fully visible for instance “Now go and c..” instead of “Now go and create your own story” can it be resolved somehow?
Hi Piotr, thanks for your nice feedback. You can make the site responsive by including
media queriesand using enquire.js to disable parallax effect on mobile. I will be covering this in my future tutorials. Stay tuned and thanks again for your comment.thanks for your quick answer – I will stay tuned
It’s very good tutorial..
Thanks Parth, glad you’ve enjoyed it.
been waiting on something like this that has a reasonable explanation into parallaxing for ages. thanks again 🙂
Thanks David. Let me know if there is anything else you would like to be covered in my future tutorials. Cheers
hi,is there a way to pause or make the slides last longer in order to add effects?
Hi Edward, sure there is a way. You would need to modify the slide height and skrollr data attributes.
Thanks for your response I’m kinda new to this.How do I increase the height of the sections? I can’t find in neither of the tutorials how to do it. I guess its with homeslide but I don’t really know where it is.
Thanks.
Needed this for a job. TYVM!
Super, toto som hladal !!! dakujem
Great, im looking that !!! THX .
Thanks for discovering the blog. Cheers
Hey man, great tutorial! Very helpful. For some reason even when I add the data attributes I can’t see the animations in my browser (Chrome).
I made sure that Skollr was added into the main.js but the text is still static. Any help?
Hi, check your browser console for any js errors. Looks like the JavaScript is not being executed. Cheers
Doesn’t work on any apple mobile device. I found this out after investing 3 days in developing a whole website with it. What a waste of time.
Hi Peter, sorry that you feel that way. The aim of the tutorial was more to show how the Skrollr data-attrubutes work. There is a way to make Skrollr work on mobile, but I would suggest you turn off the parallax effect for mobile using enquire.js. I will have a tutorial on that coming soon.
Wow. What an ingrate.
Amazing! That looks nice.
Hi Petr, great tutorial thanks a lot for taking the time, these are by far the clearest tutorials I’ve found.
I was wondering though, for some reason my final slide won’t show up when I scroll down to it.
Any clues as to why this might be? I’d imagine it’s some tiny error somewhere my tired brain can’t find but if you can think why, I’d be super grateful!
Look forward to learning more from you!
Cheers.
Hi,
That’s a good tutorial to begin with. Thanks for your work.
Best regards,
Tiki
Halo! love the tutorial!
Just had a quick question, I am finding it hard to make my content be responsive, any tips?
Best
Mirsa
Stay tuned, responsive update is on it’s way. What have you tried to make it responsive?
Hi Petr,
Thanks for your tutorial, I’ve been working with it to make my own website. I need your help! I’ve been following all the steps, I’ve linked to all the .css and .js files but I have a big problem: When I open the index file in a browser initially doesn’t work! (the backgrounds doesn’t move and the content doesn’t show) but when I “resize” the window, everything start working!
You know why this may be happening? 🙁
Thanks!
I found the problem! Solved! :p
Hi Sara, thanks for reading and great to know that you’ve found why it’s not working for you.
Could you please share what your fix was? Someone else is having the same issue.
Actually, it was rookie mistake, I put the skrollr.js code at the beginning of the main.js. I just moved the code to the right lines and everything was fixed!
😉
Yep, that helped.
Thanks to Sara and to you!
What line does it go on Sara?
Thank you, thank you, thank you! my first website ever! and with a great parallax effect thanks to this tutorial!
You’re welcome Sara. Would you share your url with us? Great to know that it was helpful. Thanks
Hi Petr,
This is my website www.saraosorio.com
Unfortunately, as is been said before, doesn’t work on mobile devices! I’d be great if you let me know how to make the site responsive by including media queries and using enquire.js to disable parallax effect on mobile…
Is the only thing I’m missing!
Thanks again for your help.
Hi Sara, thanks for sharing the link and congrats on your new website, it really looks nice.
How to make it responsive tutorial is coming very soon. Stay tuned.
Hi Petr,
Well done Petr!
I have followed your steps you have described here and I do have a strange behavior. For parallax to kick in I have to resize the browser first. Otherwise I just see h2 fixed and I can scroll with effect. Once I resize everything works just fine. 😀
Cheers
Please see Sara’s comment, she seemed to have a similar issues. Cheers
Hi Petr, I am trying to incorporate this content into a WordPress theme, so that all the content is editable through WordPress, so i can add pages and photos as well as blog posts all through WordPress. is there any way to do this?
Hi Mathew, incorporating this into a WordPress theme would be a similar process then incorporating any other static html template. You just need to make sure that your php generated markup is the same. Follow steps in any of the “how to build a wordpress theme” tuturials. Thanks for reading. Cheers
Hi petr … First of all thank a lot for publishing this tutorial . I have a rather off-topic question . I saw ClickFork , it was really great .. idea is top notch too . Actually I have a painter in my relation , So .. is their any sort of website like ClickFork which enables him to show his collection to clients ? PLEASE REPLY !!!!
Hi Tarun, thanks for the nice words about ClickFork.
I don’t really know any service which would be specifically for painters.
If you have a restaurant in your network, feel free to send the to ClickFork, we’ll look after them.
Thanks so much for the tutorial, I am a complete beginner with web design, it’s like a foreign language to me!
I am wanting to put a fixed menu bar either at the top or down the left hand side, amongst many other things, but I have no idea how to!
Also I signed up to get your final files but nothing has come through, what are they?
Thanks again!
Great tutorial…. But how can i make this all visible on Internet Explorer?
Hi Petr,
great tutorial – makes it so simple! Love it.
I just have two problems that I couldn’t figure out on my own – I hope you can help me.
The first thing sounds so easy but I wasn’t able to manage it: I added a 70px header and wanted the pictures to start at top:70px of course. Where I have to add this? I tried it in .main (I placed the header above the main div) and some others but the pictures wouldn’t move.
And the other thing is, that I used anchor text links in the header to jump to the sections. Works great, but I want the header to be fixed and if I add position:fixed the anchor links are no longer able to click.
I think the secound thing is tricky, but if you just could solve my first problem I would be very grateful! 🙂
Greetings,
Laura
Hi Laura, thanks to the feedback.
To answer your question #1, you will need to play with
background-positionproperty in the stylesheet and the skrollr data attributes. The question #2 shouldn’t be as tricky as you think. Try adding az-index: 1or higher to yourfixedheader.Hope that helps.
Thank you very much for the super fast reply!
z-index works great – I should have thought of that myself!
And I think for the background-position I’ll have to try a bit more, but thanks for the hint!
Hello,
Firstly thanks for the tutorial about parallax effects, but I got a problem which is after I put data attributes to control the speed, it’s doesn’t work, but after I use another main.js ( from another tutorial which is http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/) to replace the original main.js, it’s work! So, is the tutorial’s main.js files got some problem?
Regards,
Thank you.
Hi Chi, I am not sure what data attributes you are trying to put in. The demo works as it should. Please check your data-attributes or refer to skrollr.js documentation. Cheers
Simple, easy, gets the base work done fast to get you up and going to work on your own creative content rather than coding woes.
The commenting on the CSS is also very useful.
Hey, awesome site and tutorials you’ve got here! Bookmarked it for future reference. 🙂
I was wondering however in this tutorial, it takes a little time to load and I wanted to add some text to be able to skip this page if it takes too long, how might I do this, creating the text is easy i’m just not sure where to put it to only display as it’s loading?
Thanks again and keep up the awesome tutorials!
Thanks for the comment Fluidic. There isn’t a way how to “skip” the preloading, unless you remove it. You will need to tweak both css and js. Cheers
Oh no, i’ve got it set up that the parallax is the “hd index” page and i wanted to skip that page to the regular index if their internet is slow.
You would need to create the skip link and position it wherever you want. Currently there is only a loading indicator which is a
background-imageon thebodywhile it has a classloading.You can then hide the link once the body gets a class
loaded.Hope that helps.
Hello Petr, i would like to know how can i expand the time of the text on each section, i guess i have to low the fade out timer or so, could you give me one little help? thanks!
ps. awesome tutorial!
Thanks Airton, the quickest way to increase the time the text stays in the view would be to increase the size of the sections.
You can do that by doubling the height in the
_main.js.Hope that helps.
Hi Petr, I responded earlier but I think something went wrong with sending the message. The solution you explained to Airton was already usefull to me but I’d like to know how to extend the the height of one single slide? I don’t understand enough of the functions to sort this out myself. Could u please help me?
Regards,
Emile
Hi Emile, you can give your slide a class and then have another variable in the js file to resize just that slide.
$yourSlide = $('.yourSlideClass'); // Resize our slide $yourSlide.height(winH*X); //change X to whateverHope that helps.
Hey, this looks really nice. I signed up to get the files, but unfortunately I din’t got any mail for confirmation till now.
Sorry Rakesh, it sometimes takes a while, I will check with the email provider if there is anything they can do about it. Cheers
very nice tutorial but what have i to do if i want to add some pictures?
Hi Nico, thanks for the feedback. To add pictures you would need to duplicate the
section, change theidand update the CSS with a newbackground-image. Hope that helps.First, love what you are doing here. Thanks for this.
On the Skrollr documentation it states that it works on tablets and mobiles. I have see numerous examples that work on my ipad but your example doesn’t work. Your responsive example is about disabling it, but i have to have it on the tablet.
I am in the position where I have a parallax like yours (works fine on desktop) but it doesn’t work on iOS (I have added an element with id=skrollr-body). I also have an issue with background images on the iPad scaling to be a lot bigger that the ipad itself.
Any ideas?
Hi Ewan, thanks for your feedback. I don’t have a good experience with implementing Skrollr on mobile. Even it it worked for me, the user experience what as smooth as on desktop. That’s why my preferred method it to turn it off on mobile and touch devices.
If you need to support iOS devices, please refer to Skrollr documentation for the best approach.
Can you share your url to see what’s wrong with your background images?
Hey Petr,
Do you have any insights on how to control the speed of the scrolling feature? My main issue with Parallax is it scrolls down the page so quickly that users miss out on a lot of content and become frustrated. While it is really cool and nice to look at, the usability seems difficult.
Is there a setting to slow down the speed?
Your thoughts and work are much appreciated.
Hi Aaron. You can control the speed of the scrolling by changing the sections height, or by ‘pausing’ the content for a while.
From what I know there isn’t a speed setting in Skrollr, but you can control it by setting the right data attributes. I will be going into more details about this in my upcoming Parallax Scrolling Master Class.
Hope that helps.
Thank you for the great tutorial. Are there any other frameworks that you would recommend for creating parallax scrolling effect?
Hey Pali, I would always recommend Skrollr, Superscrollorama or Scrollmagic.
Hi Petr,
Thanks for the tutorial. I’m trying to download the starting files but for some reason what I end up with is the complete working files. Is there anything wrong or am I doing something not right?
Hi Napo, are you sure that you are downloading the files at the top of the page “DOWNLOAD STARTING FILES ↓”? Just checked that link and getting the right files.
I got it. Thanks. The tutorial is great.
Great, thanks Napo.
Hi Peter,
Thank you for this tutorial! Great job!
All the best!
This was a great help for me to do my first steps in the Parallax World!
Tnx!
Well done Dave, first one is always the hardest.
Hi, I don’t really get what data-top-bottom does… what is the difference with simply data-bottom?
Many thanks
Hey Alessandro, I know the data attributes are quite confusing, but there is a difference between these two.
data-top-bottomis defining the styles of an element whenbottomof it is at thetopof the viewport anddata-bottomis defining the styles when thebottomof the element is at thebottomof the viewport.Hope that helps. I will be going into more details with the data-attributes in my upcoming Parallax Scrolling Master Class.
Wow, this is great! Thanks so much for posting this. I’m trying to redesign my company website in Dreamweaver CS 5.5 and wanted to create an updated site with either Responsive, Parallax or both. This should get me started for sure!
Thanks Sean and good luck with your project. Cheers
Wow that’s awesome and useful ! Thanks for the tutorial. Btw mobile version pain in the neck…
Also i have a question. I don’t wanna use css background code. I think img tag better than css background code. For example im building wordpress theme. I want , users(theme owners) can edit parallax background images. So i dont know how people can do that with wordpress admin panel. My idea ; json data. Print with jquery .css() function. I see data-0 parameters now. But is there any other way ?
Sorry for my grammer 🙂
Tnx!
Thanks Jim, you can still use background images, but you would need to write inline styles for the images coming from WordPress.
You grammar is perfect!
Thanks for stopping by.
Hi Petr,
Will you be doing any upcoming classes/tutorials on how to create a parallax scrolling WordPress theme?
Thanks,
Heath
Hi Heath, I might do something WordPress related, quite a few others also asked for the same thing. I am at the moment super excited for the Parallax Scrolling Master Class. Check it out.
Nice work Petr
I am beginner in Parallax design, but your tutorial was very basic and helped me very much.
Thanks a lot buddy.
Thanks Kumar, glad it was helpful.
Hi Peter,
Thanks a lot for this wonderful tutorial. It has been really really helpful in my projects !!!
I do have one problem though. Have been trying to insert forms in the individual sections being scrolled, but they (the inputs/buttons) are not responding 🙁
Anything I need to take care of inside the CSS or the HTML files in order to make the form components responsive within a section?
Thanks a lot !!!
Hi Divas, this looks like a similar issue that Laura, you will need to debug the positioning of the slides, they are overlapping at the moment. Cheers
Hi Petr,
me again 😀
I’m still very happy with my parallax project.
But now a new problem turns out:
I added a link in the hsContainer (and a few new div’s but I don’t think thats the problem because they work fine). I have 5 sliders and in every slider a link. If you try to click on the first sliders link, you can’t. But if you move the mouse around a little, you’ll find a link connection to the very last link form the last slider. I think they’re overlapping or something like this. Do you have a quick idea how to fix this?
Hi Laura, the css will need some adjusting. You’re right that the sections are overlapping and that’s why you can’t click on any of the links.
There is not a quick fix for this, you only need to dive in to the web developer tools and debug it.
Good luck.
I had the same question today. I just found a solution–don’t know if it’s the best solution–but it’s a solution.
For slides that I want a link on, I use skrollr to raise the z-index as the slide comes into view, and lower z-index out of view. It means assigning a position to the slides ID (relative, absolute, fixed).
Seems to work.
Great Ken, yep you can use Skrollr to change z-index of an element when it comes to a view. That’s the solution I would implement. Cheers
Hi Petr,
Thanks for a wonderful documentation on parallax scrolling. It has helped a lot.
There is a issue I am facing. The parallax effects are visible only after I resize my browser once. Can you please help me out with this.
Hi Abhishek, I am not sure what you mean. Is the issue happening on my demo files or your own project?
Hi, Yea. I am facing the issue with your code as well as my code. The problem is,
As mentioned by you to add the following lines in _main.js
// Init Skrollr
var s = skrollr.init();
// Refresh Skrollr after resizing our sections
s.refresh($(‘.homeSlide’));
I have done that.
Now obviously if i remove the first line “var s=skrollr.init();” the parallax scrolling will not work.
And the second line is for refreshing of the page is any resizing happens.
Now when i simply open the index.html file, the parallax effect cannot be witnessed. I have to reduce the size of my browser window and resize it back to full scale to make the parallax scrolling work.
I hope I have stated my problem up to your understanding.
Thanks in advance. 🙂
Hi Abhishek, not sure if I understand your issue. Can you make sure you are loading the files through your
localhostinstead just afile://.Hi Abhishek.
I had the same problem. Very easy to resolve. What you (and I) did wrong was place the init and refresh for skrollr in the wrong place in main.js. Take a look at main.js again. You will see a comment indicating where the init and refresh should go (in the adjust window function).
Hey Max, thanks for helping out! Cheers
Are these tutorials suppose to be done on a localhost? When I download the files and make the additions from this tutorial, I get a black screen with the two of the h2 tags separated evenly on the page. Is there something that I’m missing?
Found my error. Disregard.
Thanks Robert. Just curious what was your issue? Someone else might learn from it. Cheers
Thanks this is really great — much more useful than just having the examples on skrollr.
Question — how can the content on the “slides” have links in them? I get decorated text (underlined), but it is not clickable. Except when I put an anchor tag in the bcg3 of slide-5. But that one creates a clickable area that is always fixed in the browser no matter the scroll position.
I’m sure all the scrolling plus relative positioning means the clickable areas aren’t where one wants them! Is there a workaround for this that you know of?
Ooops I submitted a question here, but I was using another one of your examples–Demo – How to create a parallax scrolling website.
Hello Petr,
I have made this but unable to put hyperlink. Please have a view of www.pandeypriya.com I am unable to put hyperlink to inner pages on images. Please guide me.
Thanks,
Deepansh
See Ken’s suggestion. Cheers
Is it possible to add a link in the text (eg. Next slide) that will (animate) scroll to the next slide? What would the code be for that?
Hi Dan, thanks for reading. You would need to modify a few things, but it’s definitely possible. I might create a new tutorial on that in the future. Cheers
Thanks for the reply. Nice to know it can be done but I don’t have the coding skills to do it.
As I said, I might create a tutorial on this in the future. Cheers
Hi Peter,
Thanks for this great tut. However I’d like to ask you for a help. I’d like to add more content inside #slide2 container than there is space available on the screen. Whenever I reach the bottom of the screen scrolling #slide 2 container #slide 3 section starts sliding in leaving #slide2 content hidden. Is there any way how to adjust only #slide 2 container height to be able to fully scroll through its content and only after that to slide #slide3 container please? (my #slide2 would not contain any bg img, only white bg with couple of and ) Thanks.
Hi, thanks for stopping by and for going through the tutorial. I would really like to help but your question requires more than a single line of adjustments. You will need to use the files as they are or learn jQuery and Skrollr in more detail to be able to do your code update. Thanks
Yes! Petr, thank you for the awesome tutorial! I am using skrollr for my portfolio website and would like to build my resume into a slide 4 rather than using a link. Any help for making adjustments to the height of the slide?
Does this demo work on the iOS platform? Seems it gets stuck on the first image when you try to look at it on there.
Hi Amit, please see my comment above regarding the mobile support. Cheers
it works fine. thank you for your perfect tutorial.
i just want to know is it only suitable for chrome? what should i do if i want to see my work on firefox?
Hey Petr, i didnt found a solution in the comments, and im beginner in all of this 🙂
What do i need to adjust so the Slides will adjust when i resize the viewport from my 1920×1080 to my 1680×1024?
props to you, keep up the good work! 🙂
Just to make clear, it should happen from your code, but its not. ;(
Hi Beejayjayn, this tutorial might answer your question. Thanks for the comment and going through the tutorial. Cheers.
I needed to slow down the speed at which the text appeared and disappeared. In your current demo the text only appears with an opacity of 1 when the image is exactly aligned with the viewport. By changing the opacity to greater than 1 the text stays visible longer. NEAT!
Great work with this Peter!
Hi Petr!
I have a problem and am looking for quick help.
I made a website which uses this tutorial for parralax scrolling. But the problem is that on my 24″ screen the images get “too big”. So there is some text cut off that is at the very bottom of the pictures (I don’t let text “fly” into the pages. The text is in the pictures). If I make the window smaller everything is displayed correclty. Do you know how to solve this issue?
Thanks for an answer 🙂
Cheers
Hi Max, the best way and the most flexible is to make the text html element and position it using CSS. Cheers
The problem is that I only have the images with the text on them. Isn’t there a way to fix this another way? What happens if a have a picture with something important on the bottom (not text). It will get cut off too.
Thanks for that quick reply.
cheers
You shouldn’t have any important information on the image itself. If it is important it should be in the html.
Alternatively, if you really need to keep it in the image you can place the text in the centre of it.
The demo is using
background-size: cover, which always stretches the image to fill the whole container.Another option is to code everything from scratch based on the content/images you have.
Hi!
Awesome tutorial, but I just have one problem. When I try to add an image inside the hsContent div, it doesn’t show up. I’m just using the regular img src tag. Instead of a header, I wanted to add an image. How can I go about doing this?
Excellent helpful online tutorial to understand this parallax feature in a very easy and professional way :).
Thanks for your comment and for reading Adnan. Cheers
Hey,
fortune.beejayjayn.de
on mac this whole thing is just laggin’ … and i can’t find the problem!
On windows its working fine!
(im using windows.js – is that one messing with skrollr.js?)
Hi, it works fine on my mac. I am not familiar with windows.js, try disabling it and see if that fixes your issue. Cheers
never got a reply email *hmpf*
so u dont have problems to scroll down smooth? the sections snap easy and smooth after u stopped scrolling?
It scrolls down smoothly, without anything lagging. Not sure what you mean by snapping though. The page wasn’t build with a snapping functionality.
Hi Petr! Thanks for the tutorial!
I’m having a bit of trouble making the first slide 50% of the page height instead of covering the whole screen height. When I change the line $slide.height(winH); to either $slide.height(winH*0.5); or $slide.height(winH/2);, the background just turns black. What do I need to counteract this?
Thanks in advance!
Hi Patrick, thanks for the comment. Your idea to update the code to
$slide.height(winH*0.5)is a correct approach and works fine for me. Check your CSS or other javascript updates. CheersHello Petr,
Thank you for such a great tutorial!
This is the first time I’m using parallax and having these files as a reference to build a test website I’m struggling to add more slides. I tried adding div/sections for new home slides, but it doesn’t seem to work.
Can you help me out?
Thank you
António
Hi Petr, beautiful work. Any chance of doing a Parallax WordPress Theme version tutorial?
Hi Sabrina, thanks for the feedback. You mean how would you turn the page above into a WordPress Theme?
Shoot me an email with what would you like to learn in the tutorial and I will consider it.
Cheers
Petr
Hi Petr,
thanks for the tutorial, however it doesnt seem to work right with me. It seems that the parallax effect only works after I resize my browser, not on the the window loading. Also I have a big black space at the bottom of the screen until I resize the browser. Any ideas what I’m doing wrong?
Thanks
Hi Ryan, thanks for reading and can you check the browser console for any JavaScript errors?
This post might help you with debugging in the console.
Is the issue happening also with my demo files?
Hi, I found this so helpful I cant thank you enough. I’ve actually gone on to build a small website using this template. But, I’m having trouble loading it in Google Chrome. So far I think its something to do with the audio files. The site stays on the ‘loading’ page and wont move past it. It works fine on Firefox and Safari. Any ideas where I’m going wrong? http://woodmill.org/mgoe/
Thank you for all!!!!
Im having trouble getting any of my other scripts to work. imagesloaded.js and main.js run and the parallax scrolling works. but I cant get a js slide show to work. cant get a js facebook like button to work. none of the other js are running.
Thanks a bunch for the tutorial! Im using nicescroll http://areaaperta.com/nicescroll/ to customize my scroll bar but when I use it with this site I get no scroll bar and cannot scroll the site. Any tips on integrating this scrollbar script? Otherwise this works great and is an excellent learning tool for getting into parallax scrolling.
Hi! The tutorial is great but both the demo and the scrolling I installed on my site disable the page scroll on my iPhone. The demos from Prinzhorn work.
Is this a known bug?
Thanks!
Hi, thanks for the tutorial 🙂 I have the same issue Ryan posted earlier. I have to resize my browser to get the script working properly.
you can see the issue here http://laaticco.atwebpages.com , it’s a wordpress theme demo, but your download package has the same problem. I’ve compared the source codes of your online demo and my local demo, and they are the same.
On window resize, console gives reflow -events like this:
reflow: 0.15ms
reflow: 0.47ms
reflow: 0.36ms function Skrollr/<, skrollr.js line 294
reflow: 0.89ms function handleEvent, tabbrowser.xml line 3805
and everything works fine.
Okay, found the solution. Had my Skrollr refresh too early in the code, silly me 🙂 That’s because I just copied the code from the tutorial.
Ryan,
s.refresh($(‘.homeSlide’));
has to be on the bottom of the adjustWindow function in _main.js.
There’s actually a comment line for it 🙂
Hi, Petr.
Great tutorial! Works as advertised.
That said, I’d like to change the movements from 100-pixel jumps to 50-pixel jumps. I made changes in these lines:
data-top-bottom=”background-position: 50% -50px;” (for slide 1)
and
data-top-bottom=”background-position: 50% -50px;”
data-bottom-top=”background-position: 50% 50px;” (for slides 2 thru 4)
I see no change. What have I forgotten? Thanx.
-Michael
Hi Michael, thanks for your feedback and comment. Inspect the slides in web developer tools or Firebug and see if the
background-positionis animating to your-50px. It’s a small change so it might be harder to see it. Good luck.Hi, Petr.
I’m afraid I am pretty new at this. The only changes I see are in the “div.bcg.skrollable.skrollable-before” element. It indicates the position is changing by only 4 or 5 pixels, but it’s much more than that.
If you’d like to have a look, see www.fpsci.com
Thanks,
-Michael
Hey Michael. It animates the background position by 50px as you set in your data-attributes. Can you clarify what you trying to achieve?
Dear, Petr.
I’m working on a site and trying to use your great tutorial. But I fail till now 🙁
could you please help me why it doesn’t work?
http://4shost.info/bakka/
Hey Petr, really really nice Tutorial! For the next year, I will definitely buy your Tutorial and get started! But a question beforehand: Is it possible to build an effect like on this homepage of someone with your tutorial? Link: http://www.anthonydupont.be/
I am really new at this, but willing to learn a lot to get started as soon as possible and build my own first website with your help! 🙂
Kind regards,
Chris
Petr.. I love you dude, you don’t know how much this tutorial helped me fix one little problem I was having with skrollr.js. You’re a boss!
Haha, you are welcome David., good to know that it was useful. Cheers
Thank You so much for this tutorial. It really helped me in my HTML projects in school. I do have a question, I’m kinda new to HTML, how can I change the text into paragraph style? I want to fit some article on it but when I modify the default text to h3 the black highlight disappears. When I add a new paragraph there is no black highlight on the text. Can I also change the blackhighkigt to a blurred one? Thank You and keep up the good work!!!
Thank you very much for the tutorial. This was helping me a lot!!! Great work!
I have one question: how can I put individuell height for the background-picture? Or change the given height: 960px?
It’s been a while since I wrote the tutorial, but glad to hear that it is still useful.
You can comment out
//$slide.height(winH);from the_main.jsfile and set your own height in the stylesheet..homeSlide {height: 960px}Hope that helps and good luck.
Great! Success! Thanks a lot for your reply.
Thank you, Petr, for this tutorial.
I believe I am close to success, however I am encountering an issue, one it seems a lot of other people have had – the parallax effect is only observable after the browser window is resized:
lovemason.com
It sounds like most, if not all, of those issues were solved by correcting the order of the initialize and refresh Skrollr code on _main.js, and I have repeatedly checked that my code is in the identical order: https://github.com/heidimason/love_mason/blob/parallax/js/parallax/parallax.js
I think there is something fundamental I am not understanding – perhaps you can enlighten me? I have read through all of the comments.
Thanks again,
Heidi
P.S. On my site (lovemason.com), a nav link must be clicked before scrolling is activated.
Great tutorial – Just what I’ve been looking for! I’ve had so much trouble getting parallax images to work until now.
Do you know if there’s a way of making this work in wordpress so that the background image can be set using the ‘featured image’ of each post or page?
Thanks Caroline. There is definitely a way to make the images load the “featured image” from WordPress.
You will need to render it in the inline styles on the container with the background image.
Thanks! I figured it out.
I’ve come across an issue with Safari. The images disappear and show a white area instead of loading the image. Works perfectly in other browsers, so I’m not sure how to fix that.
Any suggestions?
Hey Caroline, great to hear the the WP featured image implementation is working for you.
Is the Safari issue also happening with my demo page?
It can be a lot of things if you are referring to your own files with WP implementation. Can you clarify?
Yes, it is happening with the HTML demo page too. I’ve been doing some research and apparently it’s a common issue with Safari, but there’s no explanation for it.
awesome tutorial peter very nice am including it in my site..
and waiting for your tutorial for responsive site……
Thanks
Hi Petr,
On some slide I have more text content than the height of the window.
I noticed on the main js file I can set the minimum height but is it possible to make the slide height to adjust if I have more content than the window size?
Hi there, before I commit myself to starting on this tutorial can you answer a basic question please (sorry, very new to paralax scrolling), does this work on iPads?
Hi, it should work on the latest iPads, but would require additional work on the older ones.
I recommend to turn scrolling effects on mobile and touch devices.
You can follow this tutorial to achieve that.
Hi,
Thanks for your awesome tutorial .
Hey, I was trying to replicate, what you did in this tutorial. But in the very first slide (#slide-1) the style-attribute is still empty, even though I am using the same coding as you. The background-positions in “data-center” and “data-top-bottom” doesn’t seem to do anything.
Any idea?
Great tutorial. Say what is the css for Slide 1 and 3? You mentioned 2 and 4. This kind of stuff I need to know step by step because that is how I learn. I notice with tutorials in general people skip the little steps that are essential. Thanks.
How can I add an image to the slides which has a height 4022 px, and width, 2560 px? I tried changing the js as well as the css and it increases the size of the slide but I am not able to see the full image. Please help. Urgent.
Your parallax code does not take into account, that the images move when you resize the window.
Thanks Atilla, feel free to modify the code to suit your needs. Cheers
Hi Petr, sorry for my incomplete and rushy comment. Your code is nice and I implemented it for my website. But do you have any suggestion(s) how to fix the deterioration of the images when screen is resized? This problem occurs, to my best knowledge, when I use the ‘background-attachment: fixed’ line and resize the screen on a OS X machine. Greets, Atilla Aydogdu, Netherlands.
Hi Atilla, can you setup a quick Codepen demo with your issue? That would help. Cheers
Thanks Petr,
I am implementing this with a new WordPress site. When I initiate Skrollr.js the images disappear. Can you give me any thoughts on where to look for the issue?
Hi Herold, this can be a lot of things. Start in the web developer console and look for any js errors.
Hi Petr
I have a unusual problem with this tutorial. For some reason I can’t make the text appear when I apply the data effects to the divs for the first and second div. I reload the page and nothing happens, but if I open the developer tool or resize the browser window, they pop up, and work the way they are suppose to. What should I do to fix this problem?
Hi Marina, have you read some of the comments above? Looks like Sara had the same issue.
Hope that helps.
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.
A great tutorial, I was looking at implementing more slides just by copying code from a previous slide layout yet the text from slide 4 is unfortunately not fading out. If you could please let me know how I can fix this it would be great.
Again awesome tutorial.
Regards, Damon
Hi Damon, thanks for checking out the tutorial.
There is a lot of things that could go wrong, I would suggest you build your page from scratch based on what you’ve learned here.
You’ll be more in control of what’s happening with the layout.
Hi Petr, great tutorial, just a suggestion: I see many people are having the “have to resize window to activate the scrolling” issue, this is because they (we) are putting the code you told us to copy paste anywhere in the _main.js file. because you are not mentioning that you left two commented sections that match that code which is where it should be. it is confusing at first especially because we are newbies and don’t understand the flow of the program.
Thanks!
Thanks Antonio, I didn’t realise that it would confuse people. I hope it now makes sense for everyone. Cheers
There is a discrepancy between the ._main.js provided in the starting files and the ._main.js provided in the final files. I could not get the parallax to work during the tutorial then compared the two sets of files to figure out why. If I replace the ._main.js starting file with ._main.js final file – it works fine. The only difference I’m seeing is the difference in placement of the refresh homeslide (step 2).
Thanks
great tutorial. I enjoy reading it and applying it.
I have a question though. Do we have a way to scroll the content instead of background image at an offset speed of mouse scroll?
Thanks.
Hi Truyenle, thanks for the feedback. Yes you can animate your content at a different speed than the mouse scroll.
You can fix the background image and then use Skrollr to animate data-attributes (CSS3 transforms for best performance) on the content.
Hope that helps, keep it simple and always animate responsibly;)
Cheers
Thank for the fast response. I am able to scroll the content.
Just another might be newbie question, can we achieve something like this http://www.infusemed.com/ top banner. When you scroll it is scroll and there another layer on top of it scroll with a faster speech.
Thanks
You would need to write more js code to make the background moving. Skrollr can achieve a similar result but without the moving background.
Great tutorials.. really help me to understand clearly about parallax website.. Thanks
Hi Peter
I’m getting Object doesn’t support property or method ‘imagesLoaded’ in the _main.js when loading my homepage with this tutorial implemented.
I think it is due to the function not being loaded yet at the time of calling.
I’m trying this in a wordpress site. I’m developing the theme locally, so it is not available online but I can publish the theme so you can see for yourself if necessary.
Tx in advance
Hi Harold, make sure the
imagesLoadedplugin is loaded before your_main.js.this tutorial is really amazing…nice work really helpful thank you very much….
Not sure if it’s possible for this tutorial to be out of date, but every time I start going through the steps in tutorial the page breaks every single time at steps 1 and 2. No errors in firebug. :S
wow great tutorial
Thanks Hariprasad, glad to hear that you’ve found it useful. Cheers
Hi Petr,
it seems fine when i try this in native using source code you provided.
But when i implement parallax in code igniter 3.0 the page wents black nothing happens. Some suggestion maybe?
btw great tutorial Petr! very helpful!
Excellent tutorial! Thanks a lot! In fact I think I should buy a beer for you
Haha, thanks a lot for the virtual beer, but have a real one on me next time you are out!
Hello! Thank you very much for this tutorial, it helped me a lot!
I got 1 question and cant google the answer for it: how do i reverse this? I want user to see the basement of web page on open and then move up instead of down like in this tutorial. Is there some way to do it?
Hi, I am using google web designer and I have been following the tutorial on this page as well as using inspect elements on the index html file with chrome for more info. The software does not recognise bcg as a class. Any suggestions?
Hi Kevin, I am not very familiar with Google web designer. What do you meant by “the software does not recognise bcg as a class”?
Thank you for the fast answer! And sorry if my vocabulary is not correct. I am referring to the following line:
.
“bgc” is considered as an “error” and wrong “object” by google web designer. Also, if I check my work on google chrome or safari, only the text is showing, not the background. I hope that this line might be the only problem…
Really not sure what’s happening Kevin, check the way you are referencing Skrollr.js, it might not be loading.
Hello, this is awesome…I am about a 95% novice and have found this very easy to get on with so thank you for sharing however, after a few frustrating hours I thought i’d get in touch…
How can I make it so that I scroll through multiple pieces of content before the image changes?
Much like this – http://mailchimp.com/2015/?utm_source=MailChimp+System+Alerts&utm_campaign=9ef1972d79-Annual_Report_2015&utm_medium=email&utm_term=0_21eda42079-9ef1972d79-93846974#visit-from-a-mariachi-band
They have quite a few items per image which is what I am after…I tried to write a class to replace the H2 one but couldnt get to grips with it…any help would be great.
Superb Sir,I have learnt now whole basic of Parallax scrolling, as I browsed many sites for learning parallax but it’s been difficult to get me perfect tutorial with deep explanation. Now I got the whole basic of Parallax Scrolling.
Currently I’m studying Bsc in Bioinformatics So I’ve also knowledge of IT. And I’m also Front-End-Developer but on intermediate level. So,can I get your mail id or can contact detail because I want to learn many things for becoming professional Front-End-Developer.
Thanks
ChintanRaval 🙂
Hi Chintan, great to hear that it help. Please leave any question in the comments. I’ll try to help if I can. Thanks Petr
How to create simple pre-loading effect in html5 ?
Hi Chintan, have a look at How To Create A CSS3 Spinning Preloader and How To Create A Custom Preloading Screen, these two tutorials might help.
I just wanted to give you a huge thank for this awesome tutorial. I needed a website done overnight, and if I hadn’t found this tutorial, I never would’ve made it in time.
You are a life saver.
Great to hear that it was useful, thanks Arthur! You have my respect, I wouldn’t be able to do a website in one day, keep it up.
Thanks for the tutorial but I didn’t have much success. I followed it twice but all I get as a finished product are the 4 scrolling backgrounds and the words “and share mine” static on the screen throughout. Can’t figure out what is wrong.
Hi Ferrarem, are the original demo files working as they should? Double check your css and browser console for any errors. Cheers
Great Tutorial, thanks petr. I was wondering if it is possible to get the parallax effect on a single div that has overflow on the y dimension. This is the question I posted on stack overflow. http://stackoverflow.com/questions/36505199/how-to-use-scrollr-jquery-plugin-on-specific-div-to-make-a-parallax-effect-hap .Thank you.
I have been looking for professional subtle movement and this is perfect. I have no issues except for one little thing, I’m trying to add a sticky nav to the top of the viewport so its always in view and it works on the first slide but then slide2-4 run on top of it.. .any suggestions? Thank you
Very, very helpful. Thank you for taking the time to make this. Helped me with my project for sure.
No probs Mike, great to hear that it was useful. Thanks for the nice feedback. Cheers
How would I move the text boxes near the top of each slide and have smaller text inside them as well?
This is a really awesome tutorial and thanks a lot for posting! I learned a lot about image parallax effects form this, I was wondering how i could add a static image into a div instead of the H2 copy, Ive done a bit of trial and error but i keep breaking it. Thanks!
if i load the page at a smaller window size, then full screen it, each slide’s height is = the the window size of when it is loaded. is there a way to make the slides bigger as you make the window bigger?
i assume it is related to this part of the js .
//Triggers parsing of elements and a first reflow.
_instance.refresh();
_addEvent(window, ‘resize orientationchange’, function() {
var width = documentElement.clientWidth;
var height = documentElement.clientHeight;
//Only reflow if the size actually changed (#271).
if(height !== _lastViewportHeight || width !== _lastViewportWidth) {
_lastViewportHeight = height;
_lastViewportWidth = width;
_requestReflow = true;
Excellent tutorial, but i’m face one problem , these effect is not working in I phone and I pad. Please Help me
Hi. Help me.
I know parallax-scrolling-tutorial but i would it: daugaoneptune.com.vn. when scroll up, down….
Can this be done on mobile yet? I just tried viewing the site in Android Chrome and it doesn’t work. I’ve seen parallax work on other sites in my Android Chrome browser.
Thanks.
is it possible to apply parallax scrolling at google blogger’ website?
I am not familiar with google blogger hendri, sorry.
EXcellent tutorial you helped me a lot for making my new website
good tutorial…hats off
Hi Petr,
Great tutorial! I was able to create a desktop version using your codes but when I switch to mobile, somehow I’m stuck and couldn’t get the thing to scroll. I also get this error in the console: Unable to preventDefault inside passive event listener due to target being treated as passive.
Did I miss something? Thanks!
Hi Petr-
I’ve posted this twice already and it disappears. I’ve created an account now so hopefully that was my mistake.
Your tutorials are great. I am building something very cool now.
However… even with your cheat sheet, there is something I cannot figure out… how to get a full screen panel to rise up and away with scroll, with no parallaxing. In other words… the whole image moves up… no different speed that begins to cover up the image.
As an example, check this out…
http://www.espn.com/espn/eticket/story?page=dock-ellis
scroll down a bit until you see the big full screen red and yellow image of a ticket… it moves up on scroll, with NO parallax effect… it just raises like a curtain. Then the image it receals underneath as well… rises up on scroll with no speed difference between the rising and revealing.
I’ve have messed with the controls a LOT and cannot get it to do that, and I have a feeling it is something simple. Can you help please?
Thanks! and thanks for getting me started with Skrollr.js!
Hi Brian, thanks for getting in touch. As you can understand I am not able to help everyone with their own project. I hope my tutorials will help you to master the API of Skrollr.
Thanks Petr. This is just one question though… is there a way to lift a panel with no difference in speed? So it’s just one solid panel lifting up on scroll…
I kindof got there with …
data-top-bottom=”background-position: 50% -1000px;
but the bottom edge fluctuates as it moves up. Is there a way to do this, or am I expecting too much?
Thanks
How to change it into a parallax slider with autoplay?
wow it’s awesome tutorial. but why when i download starting files, index.html file can’t be extract. it says the file is corrupt
The demo seems ‘jumpy’ when scrolling in the Edge browser. It seems to work fine in Chrome and FF. Any ideas why?
Sorry it has been a while since I have created this tutorial, not sure what could be the issue.