Help with Parallax Scrolling?

[Jocelyn_5639]

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!

[BenPleysier]

See How To Create a Parallax Scrolling Effect

[Jocelyn_5639]

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.

[Nancy OShea]

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.

[B i r n o u]

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');

   }

}

[osgood_]

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.

[B i r n o u]

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...

[osgood_]

Everyone, sadly youre incorrect or just reading bullcrap again or not totally understanding , which may be the case.

For eons everyone has been bullcraping about what you should and shouldnt do. If you apply the same thoughts to your own workflow you wouldnt be using Wordpress or Bootstrap which create larger amounts of redundant and garbage coding than most, which in a past time would have not been acceptable to those that preach about what you should do and what you shouldnt do. Stop listening to the preachers (brain washers) and start listening to yourself.

[B i r n o u]

yep, precisely, listening to me, I like having HTML structures on the one hand, with a wide range of semantics provided by JSON-LD (also apart).

on the side of the display and the visual, here too I like having all the CSS totally independent and dissociated from the structure.

as far as the functional, dynamic and interactive aspects are concerned, again, I like Javscript to be completely autonomous and independent. AJAX requests can wish to draw in Mongo as well as in SQL. And this according to the heritage of datas provided.

the complexity lies in the implementation of markers within HTML (useful for CSS, metadata as well as for JS pointers) which must be evolutionary, not absolute and rely on an oriented object notion ( Bem, OOCSS, respecting a nature Atomic Design).

I took a few years to get rid of my old habits of spaghetti code in which I tried to mix everything, believing to do well.

years passed, and languages ​​like Sass ... supported by Susy, and all the big family of cores and gems (ruby) was here ... under hands...

... and then came Node ... ah ... node who came to join the panoply with all its distillery packages ... and inevitably task automators could only result ...

and that's when ... realizing this vastness of possibilities ... I said to myself ... how lucky I was to have been able to listen to myself and not to have mixed apples and pears, and have learned over time to separate HTML, CSS and JavaScript and keep them independent, interchangeable and modular ... in short ... be well oriented objects ...

I've met so many people around the world that work that way... that I almost forgot that at start I had listen my feeling on how to handle web development... in an agile method

ah yes ... wordpress ... I forgot this old miser... and his friend themeforest (envato) ... what is it worth to be able to mount a project in a working day. .. with these two wonderful tools, and so, just charge customers a small contribution, half day or even a day of work ...., while their purse is not necessarily garnished ... and hop ... a beautiful responsive web site ...

so keep the development of craftsman for the big projects applications

with this toolbox under the keyboard and preserving to listen to me ... everyone is happy ... and work is a pleasure that is renewed every morning when the alarm clock sounds ....

thank you...

[B i r n o u]

woaw ... by posting I just realized how I was talkative ... yop... it is now to go join my family around a good pot-au-feu that has simmered for a few hours ... a good red Côte du Rhône  who has chambered ... and a leavened bread all crispy ...

tomorrow there is the egg hunt and chocolate bells ...

[osgood_]

If it works for you thats fine but dont sell forum users short by keep bleating on about a work flow, SASS, which is essentially unneccessary and has huge flaws associated with it.

You are definitely in the camp of l will use a workflow and conceal the real truth behind it if that workflow suits your poor practices.

Happy Wordpressing and Bootstrapping. QUICK  DOESNT ALWAYS EQUATE TO GOOD.

Tomorrow, next week, next year when a new trend emerges which says you have been doing it all wrong and this is the correct way to be doing it you will jump on that band wagon....

[W_J_T]

@osgood_

Do you have a site or work that can be reviewed? I have been wondering for a while now when seeing your posts and comments, it must be beyond impressive given your discussions. ** I am serious not being sarcastic here. ** I would love to see something to put examples in conjunction with your comments.

[osgood_]

My work is NOT beyond impressive, just clean and simple. Only clients get to view it because lm not interested in critisim from anyone else but clients and l get quite enough of that - whether others like it or hate is immaterial to me and design is hugely subjective.

Lets put it this way ld be embarrased to show off what most post in this forum but  l have been an admirer of one or two posters work in the past, but they cant code. I guess you cant have everything.

[W_J_T]

Your post commenced a rather lively discussion.

[pziecina]

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"?

[W_J_T]

100% agree

Edit: well maybe 98.78326491 %

[osgood_]

Uses Wordpress, probably poorly coded Wordpress widgets and Bootstrap and says hes got rid of old habits of producing spaghetti code, blokes in denial.

[B i r n o u]

it happens quite regularly that an association, a very small company that starts, a village needs a website ... but the problem is that the budget is not necessarily there ...

so, yes, to meet the needs of this type of structures, namely to have a content that is not very expensive (1/2, even 1 day of work man) and especially not to leave them with a site that is old, with a rendering dating from another era ... yes at that moment I leave the wordpress box, and themeforest (envato) ...

of course my main activity is the HTML / CS / JS coding with SASS (ruby) and Node (console) ... for large internal applications ...

[B i r n o u]

the pot-au-feu... was delicious... now it's time to go to bed and go tell a story to the kids ... as I say tomorrow morning ... eggs and chocolate bunny in the meadow ...

[pziecina]

osgood_  wrote

Uses Wordpress, probably poorly coded Wordpress widgets and Bootstrap and says hes got rid of old habits of producing spaghetti code, blokes in denial.

You are all in denial, the way I do things is the one and only proper way to do anything . (May not come through on email but have inserted 'devil').

The problem with any workflow is that it is a very personal thing, and even though I think Birnou is probably over complicating what he is doing. He is the one who must justify it to clients, and not to us.

It's the same as rwd, I would say desktop first, clean code and use the latest html, css features even if that must include the use of pollyfills. Develop for now, not the past, fallback code is never hard to include, updating the site just because a developer could not be bothered to keep-up originally should never be required.

[osgood_]

The problem l have with posters who use stuff like Bootstrap, Wordpress, Sass is that they never accept that there are any flaws in the worflow any never address them.

Obviously in the case of Wordpress it uses excessive class names, can call as many as 15 css files or 15 js files. l wont go into security risks or widgets that could stop working or not kept uptodate by the developer and at some stage when Wordpress is updated. stop working.

Bootstrap is not exactly renowned for its  streamline output, almost always using a lot of refundant divs that if you write the same construction manually could be dispatched. Most users, even ptofessionals, will be linked to a bloated css file.

Then we come to Sass, l dont know where that fits in, not with my workflow which might only be 20 pages and of course the one big problem l have with it is its a build file, which is not an integral part of the final files. Its not portable as l would say. This could render it useless further down the line depending on what happens, who is involved with the upkeep of the website after its been released.

[pziecina]

I agree with you Os, but as I say, it is not my (or your) problem.

The excuses I read for using solutions just because they are easy and/or cheap, are now being felt by Muse users. It is the implied 'you should use these' that I disagree with, and using acronyms that are for management then adding 'sass' to the end is never justified, and will always cause disagreements.

[BenPleysier]

The problem with any workflow is that it is a very personal thing, and even though I think Birnou is probably over complicating what he is doing. He is the one who must justify it to clients, and not to us.

There is no way that customers want to know about workflows or technology, they are only interested in a good looking and functional website that shows as number one in a Google search. Then, when you tell them about security, they will add that as their third preference.

Workflows are personal. I like the way that I work, Birnou likes the way he works. Incidentally, I have been looking at Birnou's workflow which is followed by many web-developers that are much smarter than I. The problem is that I do not have enough time to set it up, time I would have had if I had adopted the workflow.

Bootstrap has also been mentioned, Some thickheads cannot understand that Bootstrap is a library of ready made widgets and style rules. As in any library, you can take out all of the books, which is an overkill, or you can take out those books that you need.

Like Birnou's workflow, Bootstrap is a time-saver and that is what our game is about if we want to beat the likes of WIX, Webflow et al.

@osgood_  Why should we accept a workflow that you aspire to when you will not even listen to our workflow? Just stop being a bigot.

Edit: Forgot to say that Sass is my mate when selecting my books.

[B i r n o u]

reading you I finally understood why I continued to share on forums ... it's called listening, opening, sharing the exchange and acceptance of the other as other. thank you

[mbk28]

Birnou, you're good in dev and we thank you for your help