Smooth Parallax Scrolling

programming
1

by kirupa | 1 July 2013

For many practical reasons, our UIs are designed to be two dimensional. Once you throw in meaningful content, some navigation, and other doo-dads to make your application usable, adding any more dimensions simply gets in the way and becomes a distraction. Despite the stranglehold two dimensions have on what we create, there are subtle and effective ways of sneaking an extra dimension in here and there.

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
2

Kirupa,

I’m a little new to javascript and parallax. You’re currently making the elements move by id. How would I go about applying the effect to an id’s property? Specifically the background-image?

#viewport {background-image: }

3

Hi Shane!
While you can use JavaScript to change the values of background-image property on your viewport element, it’s not very performant. The better approach would be to create another div element that will host the background image. You can then animate this element around using the same tips outlined in the tutorial. It would be similar to how the bigYellowSquare element is behind everything and moves.

Cheers,
Kirupa

4

Hey Kirupa,

I was wondering if it would be possible for me to hire you to get parallax working on my site? I’ve tried several times but it just isn’t working right.

I tried doing it on my own, but this is just giving me a headache… It’s a 7 layer silhouette of a city just above the footer and I need it to move only when it is inside the viewport. Any chance you could help me out?

I can paypal you and email you admin login credentials…

Thanks in advance

Shane

5

Такой код для новичка не понять не когда,все в кучу собирают одни вопросы появляются,на которые ответ получать сложно)))

6

Can you please post your questions and responses in English? This is a primarily English-oriented forum, so please use https://translate.google.com to translate between Russian and English.

Having a lot of non-English content makes the forum more difficult to navigate.

Cheers,
Kirupa

Не могли бы вы опубликовать свои вопросы и ответы на английском языке? Этот форум в основном ориентирован на английский язык, поэтому для перевода с русского на английский используйте https://translate.google.com.

Наличие большого количества неанглоязычного контента затрудняет навигацию по форуму.

Ваше здоровье,
Кирупа

7

I always have questions
For example, no book teaches how to write code correctly,
this is the biggest mistake of all authors. This bug already covers everything.
but this is a common mistake, apparently no one wants to work on it, but since we are learning a little, then how and where you need to know and understand how to write such code as an example.
When you click on the button, should the circle element explode or something else?
how to write this in javascript? I personally can’t understand this.

8

That is the challenge with learning something new, especially with web development. The quantity of fundamentals you need to build something simple is large, and you are running into that challenge right now.

My suggestion is to go through the basics and understand why something is being presented and explained the way it is. It may not solve your problem directly, but it will build a foundation that will eventually lead to helping you solve what you are looking for.

This is a long game :slight_smile: