Skip to main content
J
Jocelyn_5639
Participant
March 30, 2018
Answered

Help with Parallax Scrolling?

  • March 30, 2018
  • 3 replies
  • 8855 views

Hello!

So I'm working on a project in my Web design Class. I am not super experienced with Dreamweaver yet (more specifically Javascript) but I'm willing to learn and adapt. I want to create this parallax scrolling effect: Campo Santo - Firewatch  and I found a really excellent tutorial that provided the code for me: https://medium.com/@hamstu/recreating-the-firewatch-parallax-effect-213694d42f4e

My issue is, I would like to have this effect on more than just the top of my screen, that is, when you scroll down there is another scene below the first one that has the same parallax effect. But I'm not sure how to go about this. I've tried copy-pasting the code and renaming everything, but I cannot seem to lower the image or it remains static. For now, I would just like help to figure out the code, as I plan on using my own images later on. Any help is appreciated! Thank you!

This topic has been closed for replies.
Correct answer josephb82955978

I found this just after I saw this post and thought i'd share, it helped me. How To Create a Cool Parallax Scrolling Effect For Your Websites - YouTube

3 replies

josephb82955978
josephb82955978Correct answer
Participant
October 2, 2018

I found this just after I saw this post and thought i'd share, it helped me. How To Create a Cool Parallax Scrolling Effect For Your Websites - YouTube

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 30, 2018

The top of the screen is a clever overlapping of 9 transparent background PNGs.

HTML

<div class="keyart" id="parallax">

<div class="keyart_layer parallax" id="keyart-0" data-speed="2"></div> <!-- 00.0 -->

<div class="keyart_layer parallax" id="keyart-1" data-speed="5"></div> <!-- 12.5 -->

<div class="keyart_layer parallax" id="keyart-2" data-speed="11"></div> <!-- 25.0 -->

<div class="keyart_layer parallax" id="keyart-3" data-speed="16"></div> <!-- 37.5 -->

<div class="keyart_layer parallax" id="keyart-4" data-speed="26"></div> <!-- 50.0 -->

<div class="keyart_layer parallax" id="keyart-5" data-speed="36"></div> <!-- 62.5 -->

<div class="keyart_layer parallax" id="keyart-6" data-speed="49"></div> <!-- 75.0 -->

<div class="keyart_layer" id="keyart-scrim"></div>

<div class="keyart_layer parallax" id="keyart-7" data-speed="69"></div> <!-- 87.5 -->

<div class="keyart_layer" id="keyart-8" data-speed="100"></div> <!-- 100. -->

</div>

CSS

/* PARALLAX */

.keyart, .keyart_layer {

    height: 1000px;

}

#parallax {

    display: none;

}

#nonparallax {

    display: block;

}

#nonparallax {

    background-image: url('../images/keyart-mobile.jpg');

    background-position: center;

    background-repeat: no-repeat;

    background-size: auto 100%;

}

.keyart {

    position: relative;

    z-index: 10;

}

.keyart_layer {

    background-position: bottom center;

    background-size: auto 1038px;

    background-repeat: repeat-x;

    width: 100%;

    position: absolute;

}

.keyart_layer.parallax {

    position: fixed;

}

    #keyart-0 {

        background-image: url('../images/parallax/parallax0.png');

        background-color: #ffaf1b;

    }

    #keyart-1 {

        background-image: url('../images/parallax/parallax1.png');

    }

    #keyart-2 {

        background-image: url('../images/parallax/parallax2.png');

    }

    #keyart-3 {

        background-image: url('../images/parallax/parallax3.png');

    }

    #keyart-4 {

        background-image: url('../images/parallax/parallax4.png');

    }

    #keyart-5 {

        background-image: url('../images/parallax/parallax5.png');

    }

    #keyart-6 {

        background-image: url('../images/parallax/parallax6.png');

    }

    #keyart-7 {

        background-image: url('../images/parallax/parallax7.png');

    }

    #keyart-8 {

        background-image: url('../images/parallax/parallax8.png');

    }

    #keyart-scrim {

        background-color: #ffaf00;

        opacity: 0;

    }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){

       #keyart-0 {

        background-image: url('../images/parallax/parallax0@2x.png');

        background-color: #ffaf1b;

    }

    #keyart-1 {

        background-image: url('../images/parallax/parallax1@2x.png');

    }

    #keyart-2 {

        background-image: url('../images/parallax/parallax2@2x.png');

    }

    #keyart-3 {

        background-image: url('../images/parallax/parallax3@2x.png');

    }

    #keyart-4 {

        background-image: url('../images/parallax/parallax4@2x.png');

    }

    #keyart-5 {

        background-image: url('../images/parallax/parallax5@2x.png');

    }

    #keyart-6 {

        background-image: url('../images/parallax/parallax6@2x.png');

    }

    #keyart-7 {

        background-image: url('../images/parallax/parallax7@2x.png');

    }

    #keyart-8 {

        background-image: url('../images/parallax/parallax8@2x.png');

    }

}

IDs are unique identifiers and can be used only 1x per page.  To duplicate this effect on same page will require new code with new images, IDs and CSS.

Nancy O'Shea— Product User & Community Expert
W
W_J_T
Inspiring
March 31, 2018

Your post commenced a rather lively discussion.

    pziecina
    pziecina
    Legend
    March 31, 2018

    W_J_T  wrote

    Your post commenced a rather lively discussion.

    LOL

    Just my 2 pence.

    I always found that KISS, was the best method of managment, workflow, and coding. The more complicated I made it, the more I had to add/use something else as well, just because of those added workflows/so-called-helpers.

    Now I always advise students/clients to have a good look at what they do and how they do it, then ask one simple question -

    "why am I doing it that way, and is it really required"?

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      March 30, 2018

      See How To Create a Parallax Scrolling Effect

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      J
      Jocelyn_5639Author
      Participant
      March 30, 2018

      That's for basic Parallax scrolling, which I already know and understand. The type of scrolling that I am looking for help in is a bit different.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices