Parallax Scrolling

Developer
François Chazal
Size
6,472 Kb
Views
20,240
  1. Parallax Scrolling Previews
  2. Parallax Scrolling HTML Codes
  3. Parallax Scrolling CSS Codes
  4. Parallax Scrolling JS Codes

How do I make an parallax scrolling?

Scroll to test / Firefox only by now. What is a parallax scrolling? How do you make a parallax scrolling? This script and codes were developed by François Chazal on 21 September 2022, Wednesday.

Parallax Scrolling Previews
IQ Test

Parallax Scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Scrolling</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
/* © 2011, Copyright Incipio, all rights reserved */
/* CSS ORDER RULES
***********************************************************	display	position	visibility	opacity	size/position	margin	border	padding	background	font/text	CSS3
**********************************************************/
/* GENERAL STYLES
**********************************************************/
body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; background: #fff;
}
/* WRAPPER SECTION - HTML5
**********************************************************/
.text { position: relative; left: 25%; width: 50%; font-size: 14px; font-family: sans-serif;
}
.container.hidden { visibility: hidden;
}
.wrapper.effect { position: fixed; top: 0; left: 0; right: 0; bottom: 0; perspective: 1000px; perspective-origin: 50% 50%; transform-style: preserve-3d;
}
.container.effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: rotateX(30deg); transition: 200ms all linear;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="text">	<p>Lorem ipsum dolor sit amet, probo hendrerit at quo. Wisi ubique iriure eos ea, malis dicat praesent nec ea. Mel te solet nostro sententiae, no quo liber facilisi invenire. Nihil dolorum voluptatum eos ex, ex unum vero minimum quo, sed vidisse insolens at. In autem persius albucius duo, nam ut summo fastidii. Vel an dicunt tincidunt persequeris. </p> <p>	Cetero iracundia no vis, illum ancillae vituperata pri no. Eu sit causae elaboraret. Per eu munere omittam maluisset. Cu per habeo probatus, per et molestie suavitate. Ad dicat exerci usu, eu novum quando eum, volutpat salutandi qualisque te pri. </p> <p>	Pri soleat dicunt posidonium te, et mucius inermis quo, no decore detracto evertitur has. Duo natum appareat volutpat in, usu at facete animal. Ut denique oporteat mei, te liber reprimique sadipscing has. Sed probatus phaedrum iudicabit ad, ludus recusabo dissentiet cu vim, per at odio dicit reprehendunt. Ex simul munere pri, vivendo menandri at pro. </p> <p>	Ne vix nihil accusata dissentiet, vix in assum consul percipitur, in vel veniam eripuit repudiandae. Facer error suscipit vix no, augue timeam copiosae cum in. Erat nemore te usu, per homero vituperata ea. Ad per lorem legimus, id duo nisl vide, ex ius liber paulo moderatius. Hinc corpora pri et, mea ut soleat aliquip. </p> <p>	Graeco qualisque urbanitas usu ex, fierent fabellas vix te, duo nostro aeterno incorrupte et. Te eleifend pertinacia elaboraret ius, probo conceptam ius ea. Nullam iudicabit ex vis, vix ei vidit populo. Ne partem legimus voluptaria mea. In facer complectitur vim. Dicit meliore luptatum in eam. Ius officiis appellantur cu. </p> <p>	Reque delectus comprehensam eu est, an esse accusamus mei. Unum menandri an eam. Per timeam fuisset an, mel quis habemus et. Suas latine dissentias eu vix. Dolorum singulis quo an, nonumy utroque luptatum vix te. Quodsi feugait menandri id sit, quis partem ex mea. Eu dolor homero has. </p> <p>	Quo id aliquid elaboraret. Vero augue comprehensam ei eum, nam no quod mazim aperiam. Dolorum appetere vel no, sint duis voluptua et pro, ius an graeci aperiam. Et natum vocibus aliquando mea, per mazim cetero at. Exerci eloquentiam an his, persecuti neglegentur at his, mel veritus singulis ocurreret ea. </p> <p>	Audiam vocibus convenire ei vix, mei ea admodum necessitatibus, in idque oblique pro. Ei vim oratio tempor, sed cu timeam scaevola tractatos. Torquatos complectitur ut per, dolorem prodesset reprehendunt vix at, ut augue feugiat qui. Fabulas dissentias ne vis, pri audiam mentitum ad. Quem oportere adolescens nam id, te sumo possit interpretaris vel. </p> <p>	Denique efficiendi eos at, usu quas torquatos ne. Delenit minimum antiopam et mei. Fuisset conclusionemque te est, eam vivendo recusabo definitiones ad, an has alia vidit ullamcorper. Usu id saperet deleniti, id vel paulo consul. Mei autem mundi id, pri eu suas primis voluptatibus, ad veri periculis imperdiet pro. Ut vel dolorem honestatis, ne per wisi atqui percipit. Vel ea facete aperiri utroque, et pro noluisse voluptatibus. </p> <p>	Elit tincidunt sententiae vis te, usu ridens consequat consetetur cu, ius id viderer mediocrem. Nobis iuvaret pericula sea et, no mea euismod ornatus. Ad consulatu eloquentiam concludaturque sed, has ex laboramus intellegat scriptorem. Feugait quaestio ea qui, velit delectus hendrerit his ex. Labitur epicurei ius ne. Brute omittam appetere est cu, has percipitur vituperatoribus et. </p> <p>	No pro nihil laoreet, eum tritani lobortis voluptatum te, no prompta efficiantur usu. Qui an solum noster eleifend, nec ad quodsi bonorum maluisset, cum te ferri postea maluisset. Ad autem insolens eum, no diam nibh vis, eu eum eros accusamus. Ut mea dicam vulputate, cum in albucius gloriatur persecuti, ad has expetendis disputationi. Sea te aliquip regione temporibus. </p> <p>	Perpetua forensibus assueverit et vis. In vix ullum putant admodum. Affert soluta an sit, mundi oporteat recusabo te eam, fabulas definiebas per at. Et mea quot cibo nominati, nam gubergren adipiscing ut. Sed error complectitur at. </p> <p>	Dicit referrentur duo cu, ea cum virtute consulatu. Vix ei viderer saperet minimum, ad tollit dicunt appetere qui, ut mel nonumy constituto. Quas scribentur id nam, vel at postea doming. Id vis dicta vulputate voluptaria, tation iudicabit pertinacia mei et. Mel ei assum lucilius, iriure labores ei mei. </p> <p>	Enim nemore et sea. Mel tantas imperdiet et, no senserit interesset pri. His facer inani ex, utroque moderatius te sed, sit et animal ocurreret incorrupte. Duo affert dissentiunt ut, pri et suas tempor. Congue partem mei no, ei utroque principes mei, ei est liber delenit. </p> <p>	Eam tincidunt rationibus concludaturque te. Duo sumo assum liberavisse cu, ex meis exerci cum. Aliquid dolorum luptatum has eu, labitur eleifend theophrastus no vis. Eu sit malis prompta. Simul minimum vis no, at per vero vivendo complectitur. Et homero numquam corrumpit mei, sed ei nobis debitis petentium, cu reque argumentum cotidieque vim. </p> <p>	His nobis vocent suscipit ei. Est ei dictas fuisset, elit veritus definitiones sit an. Cu quo solum iisque, sale dicat argumentum in pri, ea eius melius per. No sit inani errem, movet impedit in ius. Vel mutat officiis ei, ea eum nusquam vulputate. </p> <p>	Nam oblique vituperata deterruisset ex. Sit scaevola dignissim ei. Id laoreet definiebas interpretaris his. Mel impetus elaboraret an, ad alterum dolores comprehensam cum, at dolor labitur has. </p> <p>	Ius ornatus meliore mnesarchum ea, eam viris possim id. Modo accommodare in per. Dicta ancillae an has, putant appetere petentium pro te. Tacimates prodesset nam at, mel illum maluisset hendrerit ei, eius impetus honestatis et vim. Eum semper denique an, eam alii nominati cotidieque ad. Ex eos brute exerci comprehensam. </p> <p>	In quo nemore dissentiet, vivendum pertinax id nec. Nihil accusata maluisset duo at. Quo te mandamus expetenda explicari, ad quidam facilis offendit eum. Has ea erat dolore adversarium, summo omnes no est. Eos laboramus vituperata in, nihil euismod voluptua nec no. An duo dolorem antiopam percipitur, eos eu rebum praesent, cu cum sadipscing accommodare. </p> <p>	An nam soluta appareat vulputate, suas omittam ad mei. Te nam pertinax sensibus. Ad eum vero diceret consequuntur, vim facete phaedrum an. Eu lucilius inciderint dissentiet cum. Vix ad probo inciderint, in falli senserit usu. Ex nam suavitate qualisque, erroribus appellantur vim cu.	</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Parallax Scrolling - Script Codes CSS Codes

@charset "UTF-8";
/* © 2011, Copyright Incipio, all rights reserved */
/* CSS ORDER RULES
***********************************************************	display	position	visibility	opacity	size/position	margin	border	padding	background	font/text	CSS3
**********************************************************/
/* GENERAL STYLES
**********************************************************/
body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; background: #fff;
}
/* WRAPPER SECTION - HTML5
**********************************************************/
.text { position: relative; left: 25%; width: 50%; font-size: 14px; font-family: sans-serif;
}
.container.hidden { visibility: hidden;
}
.wrapper.effect { position: fixed; top: 0; left: 0; right: 0; bottom: 0; perspective: 1000px; perspective-origin: 50% 50%; transform-style: preserve-3d;
}
.container.effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: rotateX(30deg); transition: 200ms all linear;
}

Parallax Scrolling - Script Codes JS Codes

// ON LOAD EVENT HANDLER
var wrapper = null;
var node = null;
var text = null;
window.addEventListener('load', function() {	text = document.querySelector('#text');	text.parentNode.removeChild(text);	text.removeAttribute('id');	text.setAttribute('class', 'text');	node = document.createElement('div');	node.setAttribute('class', 'container hidden');	node.appendChild(text.cloneNode(true));	document.body.appendChild(node);	wrapper = document.createElement('div');	wrapper.setAttribute('class', 'wrapper effect');	node = document.createElement('div');	node.setAttribute('class', 'container effect');	node.appendChild(text);	wrapper.appendChild(node);	document.body.appendChild(wrapper);
});
var lastScroll = 0;
window.addEventListener('scroll', function(ev) {	var speed = Math.min(1, 10*(document.documentElement.scrollTop - lastScroll) / window.innerHeight);	var value = document.documentElement.scrollTop / window.innerHeight;	text.style.marginTop = '-'+document.documentElement.scrollTop+'px';	node.style.transform = 'rotateX('+45*speed+'deg)';	lastScroll = document.documentElement.scrollTop;
});
Parallax Scrolling - Script Codes
Parallax Scrolling - Script Codes
Home Page Home
Developer François Chazal
Username fchazal
Uploaded September 21, 2022
Rating 3
Size 6,472 Kb
Views 20,240
Do you need developer help for Parallax Scrolling?

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!

François Chazal (fchazal) Script Codes
Name
Penrose Triangle CSS
Ribbon Animated Effect
World
Logo
The Cube
HExa
Folding Panel
Obama
WebTechs Animated Logo
Hexagona
Create amazing art & images 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!