parallax js scroll testing

CSS

/*

Still to add:
x- simple menu / bars
- menu is still a WIP, not sure the best way of getting this done or if its needed?
- inline top menu
- button styles
- input field formatting
x- link themed color
x- add 0 padding and margin class - e.g : ml0 pl0
x- padding
x- margins
x- link default color's

*/

/* Pick your font - from here https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

/* Very Basic Reset */
* {
	box-sizing: border-box;
	transition: 0.3s;
	font-family: 'Nunito', sans-serif;
}

body,html {
	margin:0;
	padding:0;
	font-family: 'Nunito', sans-serif;
}
body {
	background:#FFF;
	color:#444;
	font-size:18px;
}

/* Link Colour */
a,a:link,a:visited {
	color:#6485e5;
	text-decoration: none;
}
a:hover,a:active {
	text-decoration: underline;
	color:#829ff1;
}

.wrap {
    max-width:1200px;
    width:100%;
    padding:0px 10px;
    margin:0 auto;
}

/* Themes you can add to the body tag or sections of the page */
.theme-dark,.dark-theme {
	background:#222;
	color:#EEE;
}

/* Rounded Box */
.rb,.rounded-box,.box {
	border-radius: 3px;
}

/* Easy Formatting */
.hide,.hidden {
	display:none;
}
.center,.center-text,.text-align-center {
	text-align: center;
}
.float-right {
  float:right;
}
.float-left {
  float:left;
}

/* Menu */
a.menu-bars:hover {
  text-decoration:none;
  background:rgba(0,0,0,0.2);
}
a.menu-bars {
  display:inline-block;
  color:#EFEFEF;
  background:rgba(0,0,0,0.1);
  padding:0 6px;
  text-align:center;
  padding-top:4px;
  margin-top:-3px;
  border-radius:3px;
}
.menu-bars:before {
  content:'�0';
  font-size:30px;
  line-height:30px;
}
.menu-wrap {
  width:280px;
  position:absolute;
  background:rgba(100,100,100,0.9);
}
.menu-link {
  padding:20px;
}
.menu-link:hover {
  background:rgba(100,100,100,0.9);
  padding:20px;
}


/* Basic Color's */
a.button {
  color:#FEFEFE;
}
a.button:hover {
  text-decoration:none;
}

/* Foreground Color - fc or color- */
.fcw,.fc-w,.color-white { color:#FFF; } /* White*/
.fclg,.fc-lg,.color-light-gray { color:#999; } /* Light Gray */
.fcdg,.fc-dg,.color-dark-gray { color:#444; } /* Dark Gray */
.fcbl,.fc-bl,.color-blue { color:#3273dc; } /* Blue */
.fcb,.fc-b,.color-black { color:#111; } /* Note: Not actually black :P */
.fcy,.fc-y,.color-yellow { color:#ffdd57; } /* Yellow */
.fcpi,.fc-pi,.color-pink { color:#ff3860; } /* Pink */
.fcpu,.fc-pu,.color-purple { color:#8446a5; } /* Purple */


/* Background Color - bc or background- */
.bgw,.bg-w,.background-white { background:#FFF; background-color:#FFF; }
.bglg,.bg-lg,.background-light-gray { background:#999; background-color:#999; }
.bgdg,.bg-dg,.background-dark-gray { background:#444; background-color:#444; }
.bgbl,.bg-bl,.background-blue { background:#3273dc; background-color:#3273dc; }
.bgb,.bg-b,.background-black { background:#111; background-color:#111; } /* Note: Not actually black */
.bgy,.bg-y,.background-yellow { background:#ffdd57; background-color:#ffdd57; }
.bgpi,.bg-pi,.background-pink { background:#ff3860; background-color:#ff3860; }
.bgpu,.bg-pu,.background-purple { background:#8446a5; background-color:#8446a5; } /* Purple */

/* Global Margins - margin-# or m# increments of five until 50px then jumps to 50px */
.m0,.margin-0 { margin: 0px; }
.m5,.margin-5 { margin: 5px; }
.m10,.margin-10 { margin: 10px; }
.m15,.margin-15 { margin: 15px; }
.m20,.margin-20 { margin: 20px; }
.m25,.margin-25 { margin: 25px; }
.m30,.margin-30 { margin: 30px; }
.m35,.margin-35 { margin: 35px; }
.m40,.margin-40 { margin: 40px; }
.m45,.margin-45 { margin: 45px; }
.m50,.margin-50 { margin: 50px; }
.m100,.margin-100 { margin: 100px; }
.m150,.margin-150 { margin: 150px; }
.m200,.margin-200 { margin: 200px; }
.m250,.margin-250 { margin: 250px; }

/* Global Padding */
.p0,.padding-0 { padding: 0px; }
.p5,.padding-5 { padding: 5px; }
.p10,.padding-10 { padding: 10px; }
.p15,.padding-15 { padding: 15px; }
.p20,.padding-20 { padding: 20px; }
.p25,.padding-25 { padding: 25px; }
.p30,.padding-30 { padding: 30px; }
.p35,.padding-35 { padding: 35px; }
.p40,.padding-40 { padding: 40px; }
.p45,.padding-45 { padding: 45px; }
.p50,.padding-50 { padding: 50px; }
.p100,.padding-100 { padding: 100px; }
.p150,.padding-150 { padding: 150px; }
.p200,.padding-200 { padding: 200px; }
.p250,.padding-250 { padding: 250px; }

/* Specific Margins */

/* Margin Top - mt# or margin-top-# */
/* These should override the global margins so you can use m50 mt5 or margin-50 margin-top-5, yeah i got bored and just went up in 10s */
.mt0,.margin-top-0 { margin-top:0px; }
.mt5,.margin-top-5 { margin-top:5px; }
.mt10,.margin-top-10 { margin-top:10px; }
.mt20,.margin-top-20 { margin-top:20px; }
.mt30,.margin-top-30 { margin-top:30px; }
.mt40,.margin-top-40 { margin-top:40px; }
.mt50,.margin-top-50 { margin-top:50px; }
.mt100,.margin-top-100 { margin-top:100px; }
.mt150,.margin-top-150 { margin-top:150px; }
.mt200,.margin-top-200 { margin-top:200px; }
.mt250,.margin-top-250 { margin-top:250px; }

/* Margin Bottom - mb# or margin-bottom-# */
.mb0,.margin-bottom-0 { margin-bottom:0px; }
.mb5,.margin-bottom-5 { margin-bottom:5px; }
.mb10,.margin-bottom-10 { margin-bottom:10px; }
.mb20,.margin-bottom-20 { margin-bottom:20px; }
.mb30,.margin-bottom-30 { margin-bottom:30px; }
.mb40,.margin-bottom-40 { margin-bottom:40px; }
.mb50,.margin-bottom-50 { margin-bottom:50px; }
.mb100,.margin-bottom-100 { margin-bottom:100px; }
.mb150,.margin-bottom-150 { margin-bottom:150px; }
.mb200,.margin-bottom-200 { margin-bottom:200px; }
.mb250,.margin-bottom-250 { margin-bottom:250px; }

/* Margin Left - ml# or margin-left-# */
.ml0,.margin-left-0 { margin-left:0px; }
.ml5,.margin-left-5 { margin-left:5px; }
.ml10,.margin-left-10 { margin-left:10px; }
.ml20,.margin-left-20 { margin-left:20px; }
.ml30,.margin-left-30 { margin-left:30px; }
.ml40,.margin-left-40 { margin-left:40px; }
.ml50,.margin-left-50 { margin-left:50px; }
.ml100,.margin-left-100 { margin-left:100px; }
.ml150,.margin-left-150 { margin-left:150px; }
.ml200,.margin-left-200 { margin-left:200px; }
.ml250,.margin-left-250 { margin-left:250px; }

/* Margin Right - mr# or margin-right-# */
.mr0,.margin-right-0 { margin-right:0px; }
.mr5,.margin-right-5 { margin-right:5px; }
.mr10,.margin-right-10 { margin-right:10px; }
.mr20,.margin-right-20 { margin-right:20px; }
.mr30,.margin-right-30 { margin-right:30px; }
.mr40,.margin-right-40 { margin-right:40px; }
.mr50,.margin-right-50 { margin-right:50px; }
.mr100,.margin-right-100 { margin-right:100px; }
.mr150,.margin-right-150 { margin-right:150px; }
.mr200,.margin-right-200 { margin-right:200px; }
.mr250,.margin-right-250 { margin-right:250px; }

/* Specific Padding */
/* Top Padding - pt# or padding-top-# */
.pt0,.padding-top-0 { padding-top:0px; }
.pt5,.padding-top-5 { padding-top:5px; }
.pt10,.padding-top-10 { padding-top:10px; }
.pt20,.padding-top-20 { padding-top:20px; }
.pt30,.padding-top-30 { padding-top:30px; }
.pt40,.padding-top-40 { padding-top:40px; }
.pt50,.padding-top-50 { padding-top:50px; }
.pt100,.padding-top-100 { padding-top:100px; }
.pt150,.padding-top-150 { padding-top:150px; }
.pt200,.padding-top-200 { padding-top:200px; }
.pt250,.padding-top-250 { padding-top:250px; }

.pb0,.padding-bottom-0 { padding-bottom:0px; }
.pb5,.padding-bottom-5 { padding-bottom:5px; }
.pb10,.padding-bottom-10 { padding-bottom:10px; }
.pb20,.padding-bottom-20 { padding-bottom:20px; }
.pb30,.padding-bottom-30 { padding-bottom:30px; }
.pb40,.padding-bottom-40 { padding-bottom:40px; }
.pb50,.padding-bottom-50 { padding-bottom:50px; }
.pb100,.padding-bottom-100 { padding-bottom:100px; }
.pb150,.padding-bottom-150 { padding-bottom:150px; }
.pb200,.padding-bottom-200 { padding-bottom:200px; }
.pb250,.padding-bottom-250 { padding-bottom:250px; }

.pr0,.padding-right-0 { padding-right:0px; }
.pr5,.padding-right-5 { padding-right:5px; }
.pr10,.padding-right-10 { padding-right:10px; }
.pr20,.padding-right-20 { padding-right:20px; }
.pr30,.padding-right-30 { padding-right:30px; }
.pr40,.padding-right-40 { padding-right:40px; }
.pr50,.padding-right-50 { padding-right:50px; }
.pr100,.padding-right-100 { padding-right:100px; }
.pr150,.padding-right-150 { padding-right:150px; }
.pr200,.padding-right-200 { padding-right:200px; }
.pr250,.padding-right-250 { padding-right:250px; }

.pl0,.padding-left-0 { padding-left:0px; }
.pl5,.padding-left-5 { padding-left:5px; }
.pl10,.padding-left-10 { padding-left:10px; }
.pl20,.padding-left-20 { padding-left:20px; }
.pl30,.padding-left-30 { padding-left:30px; }
.pl40,.padding-left-40 { padding-left:40px; }
.pl50,.padding-left-50 { padding-left:50px; }
.pl100,.padding-left-100 { padding-left:100px; }
.pl150,.padding-left-150 { padding-left:150px; }
.pl200,.padding-left-200 { padding-left:200px; }
.pl250,.padding-left-250 { padding-left:250px; }



* { transition: none; }

/* Paralax Stuff */
.parallax-window,
.parallax-window-two,
.parallax-window-three,
.parallax-window-four
{
    min-height: 600px;
    background: transparent;
}
.parallax-window-video {
    background: transparent;
    min-height: 380px;
    margin-bottom:-10px;
}

JS

$(document).ready(function() {
  $('.parallax-window').parallax({imageSrc: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/B6HO7KQH2O.jpg'});
  $('.parallax-window-two').parallax({imageSrc: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/WLSFZJ3W9M.jpg'});
  $('.parallax-window-three').parallax({imageSrc: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/U3W2SHOLWQ.jpg'});
  $('.parallax-window-four').parallax({imageSrc: 'https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/26E6OTLJ7L.jpg'});
});

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js'></script>

<div class='m40 fcpi' style='text-align:center;'>
  <p><b>Parallax.js Scroll Testing</b></p>
</div>

<div class='p20 bgdg fcw' style='text-align:center;'>
<p>Almost The Top</p>
</div>

<div class='parallax-window' data-parallax='scroll' data-speed='0.5' data-image-src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/B6HO7KQH2O.jpg'></div>

<div class='parallax-window-four' data-parallax='scroll' data-speed='0.5' data-image-src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/26E6OTLJ7L.jpg'></div>

<div class='m50 p50 fcbl' style='text-align:center;'>Some Space</div>

<div class='parallax-window-two' data-parallax='scroll' data-image-src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/WLSFZJ3W9M.jpg'></div>

<div class='p50 bgpi fcw' style='text-align:center;'>Even Less Space</div>

<div class='parallax-window-three' data-parallax='scroll' data-image-src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/U3W2SHOLWQ.jpg'></div>

<div class='p20 bgb fcw' style='text-align:center;'>A Failed Attempt at Paralax Video</div>

<div class='parallax-window-video' data-parallax='scroll' data-speed='0.5' data-image-src='https://www.youtube.com/embed/BN7sLcDUdYk?rel=0&amp;controls=0&amp;showinfo=0'>
<iframe width='100%' height='400' src='https://www.youtube.com/embed/BN7sLcDUdYk?rel=0&amp;controls=0&amp;showinfo=0' frameborder='0' allowfullscreen></iframe>
</div>

<div class='p50 bcdg fcpi' style='text-align:center;'>
<pre>
Margin / Padding CSS from here (Still a Work in Progress)
https://codepen.io/kruxor/pen/ZepYXE

Parallax.js from here:
https://pixelcog.github.io/parallax.js/

Images from here:
https://stocksnap.io/

This one does not seem to work with iframe/youtube videos.




</pre>
</div>

<div class='bgbl fcw p150 center-text'>- The ❤ End -</div>

Working Result

Test Result Below

Margin / Padding CSS from here (Still a Work in Progress)
https://codepen.io/kruxor/pen/ZepYXE

Parallax.js from here:
https://pixelcog.github.io/parallax.js/

Images from here:
https://stocksnap.io/

This one does not seem to work with iframe/youtube videos.