js

parallax js scroll testing

Posted in js
10
6:20 am, August 31, 2018

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 -
Posted in js
10
6:20 am, August 31, 2018

View Statistics
This Week
16
This Month
188
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in js
fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty enable tinymce on a target textarea by id Generate Random Whole Numbers with JavaScript Function Generate Random Fractions with JavaScript jquery document ready make clickable element with clickable class using getElementById and innerHTML to change the html of content no jquery preserve tabs in textarea when tab key is pressed jqueryui includes css and js using vue and json data jqueryui date selector jquery accordion fancybox youtube showing video links in a lightbox jquery jqueryui vue script includes get select option form value with jquery show the year with js jquery clone and append elements stacktable jQuery plugin for stacking tables on small screens load content with jquery find all elements add class jquery digital clock with jquery using regex with replace to replace all instances of something in a string random string generator guid set and check a cookie using js cookie validate email address from string check length of element jquery access hacker news json firebase api via jquery testing chartjs clipboard copy js tiny mce editor tinymce do something later with settimeout or loop with setinterval validate form data using javascript to check required html elements mithril testing parallax js scroll testing change the water colour in google maps for an already initialised map scrollbar replacement simplebar load google sheet data into json string with jquery change favicon with jquery add this Slick Slider Carousel change the window title flems embed in url detect window scroll position jquery truncate string using jquery round number with js google map with overlay data
Related Search Terms
js have 7
js the 1
js Scroll 16
js Using 8
js make 22
js date 17
js Working 24
js working 29
js test 21
js view 16
js Images 23
js target 22
js here 18
js that 12
js image 29
js testing 50
js access 32
js scroll 47
js reason 33
js code 17
js git 54
js Access 34
js disc 35
js this 16
js work 32
js library 45
js from 29
js mage 37
js using 19
js kruxor 29
js images 58
js Image 40
js some 18
js href 21
js Testing 75
js php 35
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress
Code Articles Forster Links Tools
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.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
If you work on something a little bit every day, you end up with something that is massive.
Kenneth Goldsmith