Parallax - Webkit hardware acceleration with will change and transform hack

Developer
Vahid
Size
5,071 Kb
Views
40,480
  1. Parallax - Webkit hardware acceleration with will change and transform hack Previews
  2. Parallax - Webkit hardware acceleration with will change and transform hack HTML Codes
  3. Parallax - Webkit hardware acceleration with will change and transform hack CSS Codes
  4. Parallax - Webkit hardware acceleration with will change and transform hack JS Codes

How do I make an parallax - webkit hardware acceleration with will change and transform hack?

Parallax - Webkit hardware acceleration with will change and transform hack. What is a parallax - webkit hardware acceleration with will change and transform hack? How do you make a parallax - webkit hardware acceleration with will change and transform hack? This script and codes were developed by Vahid on 16 September 2022, Friday.

Parallax - Webkit hardware acceleration with will change and transform hack Previews
IQ Test

Parallax - Webkit hardware acceleration with will change and transform hack - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax - Webkit hardware acceleration with will change and transform hack</title> <link rel='stylesheet prefetch' href='https://googledrive.com/host/0B-0uZjFdGZ8KckR4Rno5MW15Q2s/vgrid-v1.0-min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<head>	<title>Parallax</title>	<!--meta-->	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />	<!--fonts-->	<link href='https://fonts.googleapis.com/css?family=Telex' rel='stylesheet' type='text/css'>	<!--scripts-->	<!--[if lt IE 9]>	<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	<![endif]-->	</head>	<body>	<nav class="top">	<ul>	<li><span>one</span></li>	<li><span>two</span></li>	<li><span>three</span></li>	<li><span>four</span></li>	<li><span>five</span></li>	<li><span>six</span></li>	<li><span>seven</span></li>	<li id="ha"><span>HA:</span></li>	</ul>	</nav>	<main>	<section class="slide slide1">	<div class="content">	<div class="row">	<div class="col-2">	<h1 class="title">My Parallax Website</h1>	<div class="description">	<p>Welcome to my Parallax Website. You can toggle hardware acceleration from the navigation bar. When hardware acceleration is activated, the GPU is forced to render your element. Scroll down to see the contents. There are different slides on this page. You can see them all.</p>	</div>	</div>	<div class="col-2">	<div class="slideshow">	<div>	<img class="img-slide active" src="https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/c1.jpg" alt="city" />	<img class="img-slide" src="https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/c2.jpg" alt="city" />	<img class="img-slide" src="https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/c3.jpg" alt="city" />	</div>	</div>	</div>	</div>	<div>	<div class="btn-next"></div>	</section>	<section class="slide slide2">	<div class="btn-next"></div>	</section>	<section class="slide slide3">	<div class="content">	<div id="c">	<div id="c1">&nbsp;</div>	<div id="c2">&nbsp;</div>	<div id="c3">&nbsp;</div>	</div>	</div>	<div class="btn-next"></div>	</section>	<section class="slide slide4">	<div class="btn-next"></div>	</section>	<section class="slide slide5">	<div class="btn-next"></div>	</section>	<section class="slide slide6">	<div class="content">	<div class="row">	<div class="col-2 column">	<p>Here we have some content</p>	<p>Here's more...</p>	<p>And more...</p>	</div>	<div class="col-2 col-right">	<div class="column">	<p>Here is line number 1.</p>	<p>Here is line number 2.</p>	<p>Here is line number 3.</p>	<p>Here is line number 4.</p>	<p>Here is line number 5.</p>	<p>Here is line number 6.</p>	<p>Here is line number 7.</p>	<p>Here is line number 8.</p>	<p>Here is line number 9.</p>	<p>Here is line number 10.</p>	</div>	</div>	</div>	<div>	<div class="btn-next"></div>	</section>	<section class="slide slide7">	<div class="copyright">	<div>	<div>Copyright &copy; 2014</div>	<div>VahidSEO</div>	<div>	<a href="#">LINK</a>	<a href="#">LINK</a>	<a href="#">LINK</a>	</div>	</div>	</div>	</section>	</main>	</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://googledrive.com/host/0B-0uZjFdGZ8KV1VHenlTQkdzWVE/jquery.nicescroll.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax - Webkit hardware acceleration with will change and transform hack - Script Codes CSS Codes

@charset "UTF-8";
*, *:after, *:before {	margin: 0;	padding: 0;	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;
}
body, html {	width: 100%;	height: 100%;	margin: 0;	padding: 0;
}
body {	background: #5a9e60;	font-family: 'Telex';	font-size: 14px;
}
p {	font-size: 1.2em;
}
nav.top {	background: rgba(33,33,33,0.8);	height: 2.5em;	width: 100%;	text-align: center;	font-size: 1.2em;	position: fixed;	top: 0;	margin: 0;	padding: 0;	z-index: 1000;	-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	-moz-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	overflow: auto;
}
nav.top > ul {	display: table;	height: 100%;	margin: 0 auto;
}
nav.top > ul > li {	display: inline-block;	display: table-cell;	vertical-align: middle;
}
nav.top > ul > li:hover {	background: #440000;
}
nav.top > ul > li.current {	background: rgba(20,0,0,0.5);	-webkit-transition: all 0.3s linear;	-moz-transition: all 0.3s linear;	-o-transition: all 0.3s linear;	transition: all 0.3s linear;
}
nav.top > ul > li {	border-left: 1px solid rgba(255,255,255,0.5);	cursor: pointer;
}
nav.top > ul > li:last-of-type {	border-right: 1px solid rgba(255,255,255,0.5);
}
nav.top > ul > li > span {	color: #ffffff;	margin: 0 15px;
}
main {	height: 100%;
}
.ha {	will-change: transform;	-webkit-transform: translateZ(0);
}
.description {	background: rgba(0,0,0,0.5);	border: 1px transition;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;	width: 100%;	font-size: 1.5em;	padding: 1em;	color: #ffffff;	-webkit-box-shadow: 2px 1px 10px 1px #dddddd;	-moz-box-shadow: 2px 1px 10px 1px #dddddd;	box-shadow: 2px 1px 10px 1px #dddddd;
}
#ha:after {	content: 'off';	color: #ff0000;	font-size: 1.5ex;	margin: 0 1ex 0 -1ex;
}
.ha-on:after {	content: 'on' !important;	color: #00ff00 !important;
}
.slide {	background-attachment: fixed;	width: 100%;	height: 100%;	position: relative;	padding: 1em;	display: block;	-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	-moz-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.75);	-webkit-background-size: cover;	-moz-background-size: cover;	-o-background-size: cover;	background-size: cover;	overflow: hidden;
}
.content {	overflow: auto;	width: 100%;	height: 100%;	padding: 1.5em 1.2em 0 1.2em;
}
.btn-next {	display: block;	width: 4em;	height: 4em;	position: absolute;	bottom: 1.5em;	background: #000000;	border: 3px solid #ffffff;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	border-radius: 50%;	left: 50%;	margin-left: -2em;	opacity: 0.3;	-webkit-transition: all 0.2s ease;	-moz-transition: all 0.2s ease;	transition: all 0.2s ease;	z-index: 100;
}
.btn-next:hover {	opacity: 0.5;	border: 5px solid rgba(255,255,255,0.7);	-webkit-transition: all 0.2s ease;	-moz-transition: all 0.2s ease;	transition: all 0.2s ease;
}
.btn-next:after {	width: 0;	height: 0;	content: "";	border-top: 1em solid #ffffff;	border-left: 1em solid transparent;	border-right: 1em solid transparent;	position: absolute;	top: 50%;	left: 50%;	margin-left: -1em;
}
.slide1 {	padding-top: 3em;
}
.slide2 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/1.jpg);
}
.slide3 {	background: #ffffff;
}
.slide4 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/2.jpg);
}
.slide5 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/3.jpg);
}
.slide6 {	background: #ccccff;
}
.slide7 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/4.jpg);
}
h1.title {	color: #ffffff;	font-size: 2.5em;	text-shadow: 2px 2px 5px #555555;	margin-bottom: 1em;
}
div.slideshow {	width: 350px;	height: 350px;	border: 1em solid #44200d;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	border-radius: 50%;	-moz-box-shadow: inset 0 0 10px 3px #000000;	-webkit-box-shadow: inset 0 0 10px 3px #000000;	box-shadow: inset 0 0 10px 3px #000000;	margin: 2em auto;	overflow: hidden;
}
div.slideshow > div {	position: relative;	width: 350px;	height: 350px;	overflow: hidden;
}
img.img-slide {	position: absolute;	z-index: 0;	top: 0;	left: 0;	width: 350px;	height: 350px;
}
img.previous {	z-index: 1;
}
img.active {	z-index: 2;
}
#c {	width: 100%;	height: 200%;
}
#c1 {	background: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/1.png) no-repeat;	width: 300px;	height: 300px;	opacity: 0.8;	position: absolute;	top: 1000px;	left: 50%;	margin-left: -150px;
}
#c2 {	background: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/2.png) no-repeat;	width: 150px;	height: 150px;	opacity: 0.5;	position: absolute;	top: 900px;	left: 50%;	margin-left: -150px;
}
#c3 {	background: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/3.png) no-repeat;	width: 350px;	height: 350px;	opacity: 0.7;	position: absolute;	top: 700px;	left: 50%;	margin-left: -250px;
}
.column {	background: #ffffff;	border: 1px transparent;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;	border-radius: 5px;	padding: 1em;	margin-top: 1em;	-webkit-box-shadow: 1px 1px 8px 2px #888888;	-moz-box-shadow: 1px 1px 8px 2px #888888;	box-shadow: 1px 1px 8px 2px #888888;
}
.copyright {	width: 90%;	height: 80%;	position: absolute;	background: rgba(0,0,0,0.8);	top: 10%;	left: 5%;	padding: 3em;	display: table;	text-align: center;	color: #ffffff;	border: 1px transparent;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;
}
.copyright > div {	display: table-cell;	vertical-align: middle;
}
.copyright > div > div {	margin: 2em auto;	font-size: 1.5em;
}
.copyright > div > div > a {	color: #ffffff;	text-decoration: none;	font-size: 1.2ex;	border-right: 1px solid #ffffff;	margin: 0;	padding-right: 1ex;
}
.copyright > div > div > a:hover {	color: #ffaa99;
}
.copyright > div > div > a:last-of-type {	border-right: none;
}
@media(min-width:581px)and(max-width:800px){	h1.title {	font-size: 2em;	}	.perspective {	padding-left: 1em;	}	div.slideshow {	width: 300px;	height: 300px;	}	div.slideshow > div {	width: 300px;	height: 300px;	}	img.img-slide {	width: 300px;	height: 300px;	}	.slide2 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/1-medium.jpg);	}	.slide4 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/2-medium.jpg);	}	.slide5 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/3-medium.jpg);	}	.slide7 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/4-medium.jpg);	}
}
@media(max-width:580px){	h1.title {	font-size: 2em;	}	.perspective {	padding-left: 1em;	}	div.slideshow {	width: 300px;	height: 300px;	}	div.slideshow > div {	width: 300px;	height: 300px;	}	img.img-slide {	width: 300px;	height: 300px;	}	.slide2 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/1-small.jpg);	}	.slide4 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/2-small.jpg);	}	.slide5 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/3-small.jpg);	}	.slide7 {	background-image: url(https://googledrive.com/host/0B-0uZjFdGZ8KaW9kTkZtRmMtU2c/4-small.jpg);	}
}

Parallax - Webkit hardware acceleration with will change and transform hack - Script Codes JS Codes

$( document ).ready (	function () {	$( 'html, body' ).scrollTop ( 0 );	highlightMenu ();	//parallax	var t1 = parseInt( $('#c1').css( "top" ) ),	t2 = parseInt( $('#c2').css( "top" ) ),	t3 = parseInt( $('#c3').css( "top" ) );	$('#c1').css ( { 'top' : ( t1 - $( '.slide3 > .content' ).scrollTop() ) * 0.1 + 'px' } );	$('#c2').css ( { 'top' : ( t2 - $( '.slide3 > .content' ).scrollTop() ) * 0.1 + 'px' } );	$('#c3').css ( { 'top' : ( t3 - $( '.slide3 > .content' ).scrollTop() ) * 0.5 + 'px' } );	$('.slide3 > .content').scroll ( function () {	$('#c1').css ( { 'top' : ( t1 - $( '.slide3 > .content' ).scrollTop() ) * 0.1 + 'px' } );	$('#c2').css ( { 'top' : ( t2 - $( '.slide3 > .content' ).scrollTop() ) * 0.1 + 'px' } );	$('#c3').css ( { 'top' : ( t3 - $( '.slide3 > .content' ).scrollTop() ) * 0.5 + 'px' } );	} );	//nice scroll	$( "html" ).niceScroll ( { cursorcolor : "#00F" } );	$( ".content" ).niceScroll ( { cursorcolor : "transparent" } );	$( "nav.top" ).niceScroll ( { cursorcolor : "transparent" } );	//smooth scroll	var lastScrollTop = 0;	$( window ).scroll (	function ( event ) {	highlightMenu ();	}	);	//next slide	$( '.slide1 .btn-next' ).click (	function () {	$( 'html, body' ).stop ( 0, 0 ).animate ( {	scrollTop : $( '.slide2' ).offset ().top	}, 200 , 'linear' );	}	);	$( '.slide2 .btn-next' ).click (	function () {	$( 'html, body' ).stop ( 0, 0 ).animate ( {	scrollTop : $( '.slide3' ).offset ().top	}, 200 , 'linear' );	}	);	$( '.slide3 .btn-next' ).click (	function () {	$( 'html, body' ).stop ( 0, 0 ).animate ( {	scrollTop : $( '.slide4' ).offset ().top	}, 200 , 'linear' );	}	);	$( '.slide4 .btn-next' ).click (	function () {	$( 'html, body' ).stop ( 0, 0 ).animate ( {	scrollTop : $( '.slide5' ).offset ().top	}, 200 , 'linear' );	}	);	$( '.slide5 .btn-next' ).click (	function () {	$( 'html, body' ).stop ( 0, 0 ).animate ( {	scrollTop : $( '.slide6' ).offset ().top	}, 200 , 'linear' );	}	);	$( '.slide6 .btn-next' ).click (	function () {	$( 'html, body' ).stop ( 0, 0 ).animate ( {	scrollTop : $( '.slide7' ).offset ().top	}, 200 , 'linear' );	}	);	//nav	$( 'nav.top > ul > li:nth-of-type(1)' ).click (	function () {	$( 'html, body' ).animate ( {	scrollTop : $( '.slide1' ).offset ().top	}, 200 , 'linear' );	}	);	$( 'nav.top > ul > li:nth-of-type(2)' ).click (	function () {	$( 'html, body' ).animate ( {	scrollTop : $( '.slide2' ).offset ().top	}, 200 , 'linear' );	}	);	$( 'nav.top > ul > li:nth-of-type(3)' ).click (	function () {	$( 'html, body' ).animate ( {	scrollTop : $( '.slide3' ).offset ().top	}, 200 , 'linear' );	}	);	$( 'nav.top > ul > li:nth-of-type(4)' ).click (	function () {	$( 'html, body' ).animate ( {	scrollTop : $( '.slide4' ).offset ().top	}, 200 , 'linear' );	}	);	$( 'nav.top > ul > li:nth-of-type(5)' ).click (	function () {	$( 'html, body' ).animate ( {	scrollTop : $( '.slide5' ).offset ().top	}, 200 , 'linear' );	}	);	$( 'nav.top > ul > li:nth-of-type(6)' ).click (	function () {	$( 'html, body' ).animate ( {	scrollTop : $( '.slide6' ).offset ().top	}, 200 , 'linear' );	}	);	$( 'nav.top > ul > li:nth-of-type(7)' ).click (	function () {	$( 'html, body' ).animate ( {	scrollTop : $( '.slide7' ).offset ().top	}, 200 , 'linear' );	}	);	//slide-show	setInterval( "slideshow ()", 2000 );	var ha = false;	$( 'nav.top > ul > li#ha' ).click (	function () {	if ( !ha ) {	$( '.slideshow' ).addClass( 'ha' );	$( 'nav.top > ul > li#ha' ).addClass( 'ha-on' );	} else {	$( '.slideshow' ).removeClass( 'ha' );	$( 'nav.top > ul > li#ha' ).removeClass( 'ha-on' );	}	ha = !ha;	}	);	}
);
function slideshow () {	var active = $( 'img.active' );	var nextImg = active.next();	if ( nextImg.length == 0 ) {	nextImg = active.siblings ().eq ( 0 );	}	active.removeClass ( 'active' ).addClass ( 'previous' );	nextImg.css ( { opacity : 0.0 } ).addClass ('active') .animate ( { opacity : 1.0 }, 1000,	function() {	active.removeClass( 'previous' );	}	);
}
function highlightMenu () {	//highlight menu	if ( $( window ).scrollTop () == $( '.slide1' ).offset ().top ) {	$( 'nav.top > ul > li:nth-of-type(1)' ).addClass ( 'current' );	} else {	$( 'nav.top > ul > li:nth-of-type(1)' ).removeClass ( 'current' );	}	if ( $( window ).scrollTop () == $( '.slide2' ).offset ().top ) {	$( 'nav.top > ul > li:nth-of-type(2)' ).addClass ( 'current' );	} else {	$( 'nav.top > ul > li:nth-of-type(2)' ).removeClass ( 'current' );	}	if ( $( window ).scrollTop () == $( '.slide3' ).offset ().top ) {	$( 'nav.top > ul > li:nth-of-type(3)' ).addClass ( 'current' );	} else {	$( 'nav.top > ul > li:nth-of-type(3)' ).removeClass ( 'current' );	}	if ( $( window ).scrollTop () == $( '.slide4' ).offset ().top ) {	$( 'nav.top > ul > li:nth-of-type(4)' ).addClass ( 'current' );	} else {	$( 'nav.top > ul > li:nth-of-type(4)' ).removeClass ( 'current' );	}	if ( $( window ).scrollTop () == $( '.slide5' ).offset ().top ) {	$( 'nav.top > ul > li:nth-of-type(5)' ).addClass ( 'current' );	} else {	$( 'nav.top > ul > li:nth-of-type(5)' ).removeClass ( 'current' );	}	if ( $( window ).scrollTop () == $( '.slide6' ).offset ().top ) {	$( 'nav.top > ul > li:nth-of-type(6)' ).addClass ( 'current' );	} else {	$( 'nav.top > ul > li:nth-of-type(6)' ).removeClass ( 'current' );	}	if ( $( window ).scrollTop () == $( '.slide7' ).offset ().top ) {	$( 'nav.top > ul > li:nth-of-type(7)' ).addClass ( 'current' );	} else {	$( 'nav.top > ul > li:nth-of-type(7)' ).removeClass ( 'current' );	}
}
Parallax - Webkit hardware acceleration with will change and transform hack - Script Codes
Parallax - Webkit hardware acceleration with will change and transform hack - Script Codes
Home Page Home
Developer Vahid
Username vahidseo
Uploaded September 16, 2022
Rating 3
Size 5,071 Kb
Views 40,480
Do you need developer help for Parallax - Webkit hardware acceleration with will change and transform hack?

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!

Vahid (vahidseo) Script Codes
Name
Iranian Pahlavi Coins
Parallax Image Layers - Star Wars
Website Loading Screen
HTML5 Canvas Heart Monitor
Mouse movement parallax effect
HeartBeat
3D rotating dice
Parallax with 3D transform - Taxi Driver
Pure CSS3 cocktail and Martini logo
Simple Extensible Marquee Bar
Create amazing blog posts 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!