parallax js scroll testing

Update: the demo on this one seems a bit broken, i have to fix it! :) you can view a working demo here: https://codepen.io/kruxor/pen/PpGLRG

This is one that i had a demo of on codepen, and then codepen disconnected my account from my git account for some reason and now i can access it, so anyway. Moving on...

Here is a working example using the Parallax.js library to make images Parallax. Mmm.. iframy 😋

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

Parallax.js Scroll Testing

Almost The Top

Some Space
Even Less Space
A Failed Attempt at Paralax Video
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.




- The ❤ End -

Other Items in js
Page Views

This page has been viewed 16438 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
The happiest People don't have the best of everything, they just make the best of everything.
Unknown