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

Help with Parallax Scrolling?

  • March 30, 2018
  • 3 replies
  • 8728 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
New 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
Nancy OShea
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 & Moderator
B i r n o u
B i r n o u
Community Expert
March 31, 2018

I know that on this forum, some users have not sassed, or do not want to admit that it can be useful to use sass ... and some says that it takes away from real control of css ...

here is an example which allows us to glimpse some flexibility in the writing of the code ... and especially to be able to return there very easily and to make it evolve so simply ...

I take into account in this example neither the aspect responsive, nor the aspect object, nor the optimal appearance ... just I'm slamming the door.


By the way, I want to make it clear that this does not compromise the quality of code produced by Nancy ... that is not the point...

so open https://www.sassmeister.com/​ and in the left part of the window paste the below code

@for $i from 0 through 8 {

   #keyart-#{$i} {

     background-image: url('../images/parallax/parallax#{$i}.png');

   }

}

    B i r n o u
    B i r n o u
    Community Expert
    March 31, 2018

    This is accomplished easily using a javascript or jquery loop and whats more the actual <divs> are automatically appended to the html code. This is a perfect example where inline css styles can be used to good effect.

    Sass on the other hand has no such solution.

    If youre using php such as l am it gets even more of a simple task - no extra files needed  or to manage for either a javascript or php workflow. And of course as l keep saying  the code is completely portable, regardless of what might happen in the future.


    so perhaps I miss understood what you said (as usually)... but where everyone àon earth try to adopt a full separation in between structure, rendering and engine... (in other word having HTML, CSS and JS) fully separated... ... what you try to explain is to merge everything (HTML, CSS and JS) in the midddle of JavaScript...

    well... that makes sense... I will have to think about it... you are probably right...

    BenPleysier
    BenPleysier
    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
    New 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