We Keep Coding

js parallax effect overlapping images when scrolling

What I would like to do is an animation where there is the sky and mountains of different colors with some text in the middle and when I scroll they come overlapping one at a time (as if they cover each other).
I've tried looking for different tutorials or documentation and I can not do it
what should happen:
The result should be that when scrolling the images of the mountains with the text overlap each other and when you get to the last image the site can be scrolled normally.
i don't have any preference for the js library that will be used
below some codepen links with examples of things i tried to do:
here is the html that i should use with the image links:
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div class="parallax">
<div id="group" class="parallax__group">
<div class="parallax__layer parallax__layer--base1">
<img src='https://tacweb-test.azurewebsites.net/img/mountain-dark-green.svg'>
</div>
<div class="parallax__layer parallax__layer--base">
<!-- <div class="title">Base Layer</div> --><img src='https://tacweb-test.azurewebsites.net/img/mountain-white.svg'>
</div>
<div class="parallax__layer parallax__layer--back">
<!-- <div class="title">Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/mountain-green.svg'>
</div>
<div class="parallax__layer parallax__layer--deep">
<!-- <div class="title">Deep Background Layer</div> -->
<img src='https://tacweb-test.azurewebsites.net/img/clouds.svg' id='clouds'>
</div>
</div>
https://codepen.io/habby1337/pen/xxrZMEa (the one that works a bit better)
https://codepen.io/habby1337/pen/xxrOOqN

How to make a condition to download a file using JS in a Flask app on Heroku?

I want to have a condition where when a user clicks a link to download a file it will ask for a password after which the file can be downloaded(if it is right). I am pretty basic in JS and I want to try this for my Flask app deployed at Heroku. I just don't know how to implement it.
So this is what I have come up with so far:
<main class="page projects-page">
<section class="portfolio-block projects-cards">
<div class="container">
<div class="heading">
<h2>Test download</h2>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card border-0"></div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0">
<div class="card-body">
<h6>To download the file enter the SECRET_KEY</h6><input type="password"></div>
</div><button class="btn btn-primary d-block float-none" type="submit" style="width: 349.984px;">DOWNLOAD </button></div>
<div class="col-md-6 col-lg-4">
<div class="card border-0"></div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0">
<div class="card-body"></div>
</div>
</div>
</div>
</div>
</section>
</main>
This is the part of the code where the user types the password and if correct the file should be downloaded. Can this be done with a simple JS function where the password field and button are enclosed in a form element and compared or should I use another method?

So, when a link is clicked you can generate a modal asking for the password, when the password is entered and submitted, you send both the password and which link is being requested to the API and it initiates the download if the link is correct.
Here's a simple modal:
<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close"></button>
<div class="modal-header">
<h3>Password needed to access file </h3>
<div class="modal-content">
<form class="modal-form">
<div>
<label for="password">Password</label>
<input
type="password"
id="password"
placeholder="Enter Password"
class="form-input"
/>
</div>
<input type="submit" value="Submit" class="submit-btn" />
</form>
</div>
</div>
</div>
</div>
now you can add an event listener on the link items so that when the link is clicked, this modal appears and the user is prompted to enter a password.
I handle the modal appearing and disappearing in css, you can see my css at
https://github.com/Daniel-Wh/BurgerAndModal
I'm assuming that you already have experience with event listeners and making API calls since it sounds like someone can click a link and download something from your app.
Without seeing your code, there's not much else I can say. Good luck out there

How to fixed right hand side div with jquery?

Inside row two individual div how can one right hand side dive fixed when scrolling page then fixed and when come footer area then up this fixed div.
This is my code example below:
I want col-md-4 class fixed when come footer content then up.
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>

Demo- http://jsfiddle.net/3RkM3/41/
Layout-
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed col-xs-4">
Something
</div>
</div>
</div>

Targeting section classes with jQuery

I'm using a one page scrolling plugin (http://www.thepetedesign.com/demos/onepage_scroll_demo.html) to be more precise.
I've noticed that many one page scrolling tutorials & plugins use sections. I'm having some issues targeting the sections. What I'm trying to do is add simple navigation to the plugin so that users know what page they are on.
I thought the code would be rather simple just using
if ($(".page1").hasClass("active")) {
console.log("page one active");
}
But this doesn't seem to work. Is there something I'm missing regarding targeting sections with jQuery? All I need to figure out is how to correctly target the section then I can add classes to my navigation tab.
EDIT
<div class="main">
<section class="page1" id="pageone">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>FIRST<br>PAGE<br></h1>
</div>
</div>
</section>
<section class="page2">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>SECOND <br> PAGE <br> YO!</h1>
</div>
</div>
</section>
</div>

JQuery Mobile canvas field(signature) style issue

In my cordova application i used Jquery mobile(v 1.3.2) and thomas jbradly Sign plugin.In my application i have one signature field(canvas to draw sign) and some fields.
Like below code:
<div data-role="page" id="page1">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<button>Button1</button>
</div>
<div class="ui-block-b" style='margin-top: 2%;'>
<b><label>Label 1</label></b>
</div>
</div>
<div data-role="fieldcontain"></div>
<div id="signaturePart">
<div class="sigPad">
<b><label>Put Your Sign Here</label></b>
<ul type="none">
<li class="clearButton">Clear</li>
</ul>
<div class="sig">
<canvas class="pad" width="550" height="200" id="mKundusskirt"></canvas>
<input type="hidden" name="output" class="output">
</div>
</div>
</div>
</div>
</div>
When put signature in canvas filed the duplicate of canvas field is displayed above the original field.
Before Signing the canvas:
After Signing the canvas:(Create duplicate of original canvas)
NOTE*:
When remove the Jquery mobile the signature field working fine.
For reference: Signature Css
Signature Js
Please help me to solve the problem..

try to apply the CSS overflow:hidden on the div which contains the class="sig".