Askew - A Subtle Parallax Banner Plugin

Developer
Kyle Foster
Size
5,081 Kb
Views
24,288
  1. Askew - A Subtle Parallax Banner Plugin Previews
  2. Askew - A Subtle Parallax Banner Plugin HTML Codes
  3. Askew - A Subtle Parallax Banner Plugin CSS Codes
  4. Askew - A Subtle Parallax Banner Plugin JS Codes

How do I make an askew - a subtle parallax banner plugin?

A subtle parallax banner that leverages native JavaScript and CSS3 transforms. Mmmm mmmm good.. What is a askew - a subtle parallax banner plugin? How do you make a askew - a subtle parallax banner plugin? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

Askew - A Subtle Parallax Banner Plugin Previews
IQ Test

Askew - A Subtle Parallax Banner Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Askew - A Subtle Parallax Banner Plugin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="askew"> <span class="meta">May 16th, 2014</span> <h1>A Rather Askew Banner</h1> <img class="background" src="https://dl.dropboxusercontent.com/u/150679257/thankyou-color.jpg">
</header>
<article> <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p> <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p> <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p> <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p> <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p> <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p> <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p> <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p> <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p> <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
</article> <script src="js/index.js"></script>
</body>
</html>

Askew - A Subtle Parallax Banner Plugin - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
*, *:before, *:after { box-sizing: border-box;
}
body { font: 200 19px/1.5 'Avenir', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
}
.askew { position: relative; width: 100%; padding: 180px 40px; overflow: hidden; background: rgba(0, 0, 0, 0.25);
}
.askew .meta, .askew h1 { display: block; max-width: 640px; margin: 0 auto;
}
.askew .meta { color: white; font-size: .684em; text-transform: uppercase;
}
.askew h1 { color: white; font-size: 2em; font-weight: 200;
}
.askew .background { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: center;
}
article { max-width: 640px; margin: 0 auto;
}
article p { margin: 1.5em 0;
}

Askew - A Subtle Parallax Banner Plugin - Script Codes JS Codes

/** * requestAnimationFrame polyfill - https://github.com/darius/requestAnimationFrame * Adapted from https://gist.github.com/paulirish/1579671 * @license MIT */
if ( !Date.now ) Date.now = function() { return new Date().getTime(); };
( function() { var vendors = [ 'webkit', 'moz' ]; for ( var i = 0; i < vendors.length && !window.requestAnimationFrame; i++ ) { var vp = vendors[ i ]; window.requestAnimationFrame = window[ vp + 'RequestAnimationFrame' ]; window.cancelAnimationFrame = ( window[ vp + 'CancelAnimationFrame' ] || window[ vp + 'CancelRequestAnimationFrame' ] ); } if ( /iP(ad|hone|od).*OS 6/.test( window.navigator.userAgent ) || !window.requestAnimationFrame || !window.cancelAnimationFrame ) { var lastTime = 0; window.requestAnimationFrame = function( callback ) { var now = Date.now(); var nextTime = Math.max( lastTime + 16, now ); return setTimeout( function() { callback( lastTime = nextTime ); }, nextTime - now ); }; window.cancelAnimationFrame = clearTimeout; }
}() );
/** * Classie 1.0.1 * Class helper functions * https://github.com/ded/bonzo * MIT license */
( function( window ) { 'use strict'; function classReg( className ) { return new RegExp( '(^|\\s+)' + className + '(\\s+|$)' ); } var has, add, remove; if ( 'classList' in document.documentElement ) { has = function( elem, c ) { return elem.classList.contains( c ); }; add = function( elem, c ) { elem.classList.add( c ); }; remove = function( elem, c ) { elem.classList.remove( c ); }; } else { has = function( elem, c ) { return classReg( c ).test( elem.className ); }; add = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; remove = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggle( elem, c ) { var fn = has( elem, c ) ? remove : add; fn( elem, c ); } var classie = { has: has, add: add, remove: remove, toggle: toggle }; if ( typeof define === 'function' && define.amd ) { define( classie ); } else if ( typeof exports === 'object' ) { module.exports = classie; } else { window.classie = classie; }
})( window );
/** * Askew 0.3.1 * By Kyle Foster (@hkfoster) * @license MIT */
var askew = ( function() { // Find all select elements var header = document.querySelector( '.askew' ); if ( header ) { var init = function() { // Assignment var image = header.querySelector( '.background' ), background = make( 'span', 'background'), lastPosition = -1, transform = prefix( [ 'transform', 'msTransform', 'WebkitTransform' ] ); // Set background src to original background.style.backgroundImage = 'url( ' + image.src + ' )'; // And insert faux image after original image insertAfter( image, background ); // Hide reference image image.style.display = 'none'; // Set header background to reference image header.style.backgroundImage = image.src; // Scroll handler function function scrollHandler() { // Calculate real & parallax scroll position var realPosition = window.pageYOffset, askewPosition = Math.round( realPosition * 0.5 ); // Where the magic happens background.style[ transform ] = 'translateY( ' + askewPosition + 'px )'; } // Prefixer function function prefix( properties ) { for ( var i = 0; i < properties.length; i++ ) { if ( properties[ i ] in document.documentElement.style ) { return properties[ i ]; } } } // Element maker function function make( elemType, newClass ) { var newElem = document.createElement( elemType ); classie.add( newElem, newClass ); return newElem; } // Insert after function function insertAfter( refElem, newElem ) { refElem.parentNode.insertBefore( newElem, refElem.nextSibling ); } // Instantiation function loop() { if ( lastPosition == window.pageYOffset ) { window.requestAnimationFrame( loop ); return false; } else { lastPosition = window.pageYOffset; scrollHandler(); } window.requestAnimationFrame( loop ); } // Call the loop for the first time loop(); }; init(); }
})();
Askew - A Subtle Parallax Banner Plugin - Script Codes
Askew - A Subtle Parallax Banner Plugin - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 3.5
Size 5,081 Kb
Views 24,288
Do you need developer help for Askew - A Subtle Parallax Banner Plugin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Foster (hkfoster) Script Codes
Name
Colored Single-Element Sections
Smart Fixed Header
Gradual.js
A Pen by Kyle Foster
Vanilla Flavored Unorphanize
JQuery vs. Native JS Selectors
Rift.js
Super Simple Fader
Cattywompus - A Subtle Parallax Banner Plugin
Vanilla FlowType.js
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!