# Smooth Parallax Scrolling

**URL:** <https://forum.kirupa.com/t/smooth-parallax-scrolling/352136>\
**Category:** programming\
**Created:** [November 23, 2014, 12:47am UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136 "2014-11-23T00:47:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 23, 2014, 12:47am UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/1 "2014-11-23T00:47:18Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 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](http://www.kirupa.com/html5/smooth_parallax_scrolling.htm)

---

<div class="post-metadata">

**Author:** ![Shane\_Taylor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shane_taylor/32/8999_2.png) [@Shane\_Taylor](https://forum.kirupa.com/u/Shane_Taylor)\
**Post date:** [February 21, 2018, 2:02am UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/2 "2018-02-21T02:02:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 21, 2018, 3:18am UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/3 "2018-02-21T03:18:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shane\_Taylor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shane_taylor/32/8999_2.png) [@Shane\_Taylor](https://forum.kirupa.com/u/Shane_Taylor)\
**Post date:** [March 25, 2018, 5:36am UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/4 "2018-03-25T05:36:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![forumf](https://avatars.discourse-cdn.com/v4/letter/f/a6a055/32.png) [@forumf](https://forum.kirupa.com/u/forumf)\
**Post date:** [April 8, 2022, 8:02pm UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/5 "2022-04-08T20:02:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 8, 2022, 8:06pm UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/6 "2022-04-08T20:06:56Z")

</div>

> [@forumf](#):
>
> Такой код для новичка не понять не когда,все в кучу собирают одни вопросы появляются,на которые ответ получать сложно)))

Can you please post your questions and responses in English? This is a primarily English-oriented forum, so please use [https://translate.google.com](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](https://translate.google.com).

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

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

---

<div class="post-metadata">

**Author:** ![forumf](https://avatars.discourse-cdn.com/v4/letter/f/a6a055/32.png) [@forumf](https://forum.kirupa.com/u/forumf)\
**Post date:** [April 10, 2022, 9:51am UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/7 "2022-04-10T09:51:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 11, 2022, 2:48am UTC](https://forum.kirupa.com/t/smooth-parallax-scrolling/352136/8 "2022-04-11T02:48:52Z")

</div>

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 🙂