Parallax tests

Developer
Ex HTML
Size
2,238 Kb
Views
32,384
  1. Parallax tests Previews
  2. Parallax tests HTML Codes
  3. Parallax tests CSS Codes
  4. Parallax tests JS Codes

How do I make an parallax tests?

What is a parallax tests? How do you make a parallax tests? This script and codes were developed by Ex HTML on 15 September 2022, Thursday.

Parallax tests Previews
IQ Test

Parallax tests - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax tests</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> fru1<br><br>fru2<br><div class="prlx-box-inline">Inline</div><br>fru3<br><br>fru4<br><br>fru5<br><br>fru6<br><br>fru7<br><br>fru8<br><br>frucor<br><br>fru9<br><br> fru10<br><br>fru11<br><br>fru12<br><br>fru<br><br>fru<br><br>fru<br><br>fru<br><br>fru<br><br>frucor<br><br>fru<br><br> fru<br><br>fru<br><br>fru<br><br>fru<br><br>fru<br><br>fru<br><br>fru<br><br>fru<br><br>frucor<br><br>fru<br><br>
</div>
<div class="prlx-box prlx-lev0">Level 0</div>
<div class="prlx-box prlx-lev1">Level 1</div>
<div class="prlx-box prlx-lev2">Level 2</div>
<div class="prlx-box prlx-lev3">Level 3</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax tests - Script Codes CSS Codes

.main {width:900px; background:#ccc; margin:0 auto}
.prlx-box,
.prlx-box-inline {width:300px; height:100px;}
.prlx-box {position:absolute;}
.prlx-box-inline {position:relative; background:#0f0}
.prlx-lev0 {background:#0ff; top:100px; left:100px; z-index:1; transition: all 0.3s ease-in-out }
.prlx-lev1 {background:#f0f; top:300px; right:300px; z-index:2; /*transition: all 0.3s ease-in-out 0.1s*/}
.prlx-lev2 {background:#ff0; top:150px; left:300px; z-index:3; transition: all 0.3s ease-in-out 0.2s}
.prlx-lev3 {background:#f00; top:200px; right:10px; z-index:4; transition: all 0.3s ease-in-out}

Parallax tests - Script Codes JS Codes

var didScroll = false, wScrTop, $body = $('body'), $document = $(document), $window = $(window), $prlx_i = $('.prlx-box-inline'), $prlx_0 = $('.prlx-lev0'), $prlx_1 = $('.prlx-lev1'), $prlx_2 = $('.prlx-lev2'), $prlx_3 = $('.prlx-lev3');
$document.ready(function(){ $window.scroll(function(e) {	wScrTop = $window.scrollTop();	if( !didScroll ) {	didScroll = true;
// - - -
/* sintaxis 1 para crossbrowsing */
$prlx_i.css({ "-webkit-transform":"translate(0px,"+wScrTop*0.8+"px)"
});
/* sintaxis 2 mas sencilla pero creo que en FF no va */
$prlx_0.css('transform', 'translateY('+wScrTop*0.6+'px)');
$prlx_1.css('transform', 'translateY('+wScrTop*0.4+'px)');
$prlx_2.css('transform', 'translateY('+wScrTop*0.2+'px)');
/* nums por encima de 0 hay que pasarlos a negativo */
$prlx_3.css('transform', 'translateY(-'+wScrTop*1.1+'px)');
// - - - didScroll = false;	}	});
});
Parallax tests - Script Codes
Parallax tests - Script Codes
Home Page Home
Developer Ex HTML
Username exhtml
Uploaded September 15, 2022
Rating 3
Size 2,238 Kb
Views 32,384
Do you need developer help for Parallax tests?

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!

Ex HTML (exhtml) Script Codes
Name
Pure css tabs
Intramurs Typo
Typography test 2
Slides-05-1 BOX-MODEL
Fluid layout
Test animation rotate concentric
Slides-09-2 MENU
Slides-10-1 BACKGROUND
What The Flexbox
Slides-07-1 POSITION
Create amazing love letters 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!