Custom Properties based Parallax

Developer
Hornebom
Size
6,449 Kb
Views
26,312
  1. Custom Properties based Parallax Previews
  2. Custom Properties based Parallax HTML Codes
  3. Custom Properties based Parallax CSS Codes
  4. Custom Properties based Parallax JS Codes

How do I make an custom properties based parallax?

While researching about CSS custom properties I had the idea of building a parallax site based mostly on CSS. A first test can be found here ( http://codepen.io/Hornebom/pen/bWrXoW ). What is a custom properties based parallax? How do you make a custom properties based parallax? This script and codes were developed by Hornebom on 23 August 2022, Tuesday.

Custom Properties based Parallax Previews
IQ Test

Custom Properties based Parallax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Properties based Parallax</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Inknut+Antiqua:600|Roboto|Roboto+Condensed:700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main class="content js-content"> <section class="block section-landing"> <figure class="item-parallax-media"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/luca-bravo-189272.jpg" alt="" /> </figure> <div class="item-parallax-content flex-container"> <div class="landing-content centered-content"> <h1 class="head-large">We love Things</h1> </div> </div> </section> <section class="block section-intro"> <div class="item-parallax-content flex-container"> <div class="centered-content"> <h2 class="head-small head-centered">Visibility</h2> <p class="copy copy-white"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. </p> <p class="copy copy-white"> The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. </p> </div> </div> </section> <section class="block section-part"> <figure class="item-parallax-media"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/roberta-sorge-138285.jpg" alt="" /> </figure> <div class="item-parallax-content flex-container"> <div class="centered-content"> <h1 class="head-large head-centered">Garden <br/>of Eden</h1> <p class="copy copy-white"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </p> </div> </div> </section> <section class="block"> <div class="item-parallax-content flex-container img-grid"> <figure class="img-gridItem type-right"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/andrew-branch-139678.jpg" alt="" /> <figcaption class="img-caption"> <h2 class="head-small">Free Soul</h2> <p class="copy copy-white"> Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. </p> </figcaption> </figure> <figure class="img-gridItem type-left"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/peter-hershey-112799.jpg" alt="" /> <figcaption class="img-caption"> <h2 class="head-small">Free Mind</h2> <p class="copy copy-white"> A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. </p> </figcaption> </figure> </div> </section> <section class="block section-end"> <figure class="item-parallax-media"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" /> </figure> <div class="item-parallax-content flex-container"> <div class="landing-content centered-content"> <h1 class="head-large">Back to Basic</h1> </div> </div> </section> <section class="custom-properties-ftw"> <h3 class="head-small head-centered">Yeah Custom Properties</h3> </section>
</main> <script src="js/index.js"></script>
</body>
</html>

Custom Properties based Parallax - Script Codes CSS Codes

*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box;
}
html, body { width: 100%; height: 100%; overflow: hidden;
}
.content { height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-clip-path: border-box; clip-path: border-box; -webkit-transform: translateZ(0); transform: translateZ(0);
}
.block { position: relative; height: 100vh;
}
[class*='item-parallax'] { position: absolute; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; will-change: transform;
}
.item-parallax-media { z-index: 1;
}
.item-parallax-media img { will-change: transform;
}
.item-parallax-content { z-index: 2;
}
.block:nth-child(1) .item-parallax-content { -webkit-transform: translateY(calc( var(--yBlock-1) * 0.5px )); transform: translateY(calc( var(--yBlock-1) * 0.5px ));
}
.block:nth-child(1) .item-parallax-media img { -webkit-transform: translateY(calc( var(--yBlock-1) * 0.1px )); transform: translateY(calc( var(--yBlock-1) * 0.1px ));
}
.block:nth-child(2) .item-parallax-content { -webkit-transform: translateY(calc( var(--yBlock-2) * 0.5px )); transform: translateY(calc( var(--yBlock-2) * 0.5px ));
}
.block:nth-child(2) .item-parallax-media img { -webkit-transform: translateY(calc( var(--yBlock-2) * 0.1px )); transform: translateY(calc( var(--yBlock-2) * 0.1px ));
}
.block:nth-child(3) .item-parallax-content { -webkit-transform: translateY(calc( var(--yBlock-3) * 0.5px )); transform: translateY(calc( var(--yBlock-3) * 0.5px ));
}
.block:nth-child(3) .item-parallax-media img { -webkit-transform: translateY(calc( var(--yBlock-3) * 0.1px )); transform: translateY(calc( var(--yBlock-3) * 0.1px ));
}
.block:nth-child(4) .item-parallax-content { -webkit-transform: translateY(calc( var(--yBlock-4) * 0.5px )); transform: translateY(calc( var(--yBlock-4) * 0.5px ));
}
.block:nth-child(4) .item-parallax-media img { -webkit-transform: translateY(calc( var(--yBlock-4) * 0.1px )); transform: translateY(calc( var(--yBlock-4) * 0.1px ));
}
.block:nth-child(5) .item-parallax-content { -webkit-transform: translateY(calc( var(--yBlock-5) * 0.5px )); transform: translateY(calc( var(--yBlock-5) * 0.5px ));
}
.block:nth-child(5) .item-parallax-media img { -webkit-transform: translateY(calc( var(--yBlock-5) * 0.1px )); transform: translateY(calc( var(--yBlock-5) * 0.1px ));
}
html { background-color: #00171f;
}
.flex-container { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.centered-content { margin: auto;
}
.head-large { margin-bottom: 5vw; font-size: 10vw; line-height: 1.2em; font-family: 'Inknut Antiqua', serif; color: white;
}
.head-small { margin-bottom: 1.5rem; font-size: 1.2rem; line-height: 1.2em; font-family: 'Roboto Condensed', sans-serif; color: white; text-transform: uppercase; letter-spacing: 0.5em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.head-centered { text-align: center;
}
.copy { display: block; max-width: 500px; margin-right: auto; margin-bottom: 1.5rem; margin-left: auto; padding-right: 1.5rem; padding-left: 1.5rem; font-family: 'Roboto', sans-serif; font-size: 1rem; line-height: 1.8em; text-align: center;
}
.copy-white { color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.item-parallax-media { overflow: hidden;
}
.item-parallax-media img { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; -o-object-fit: cover; object-fit: cover;
}
.section-landing:before { content: ''; position: absolute; top: 50%; left: 24%; width: 10px; height: 80%; background-color: white; z-index: 3; -webkit-transform: translateY(-13vw); transform: translateY(-13vw);
}
.section-landing .item-parallax-media { opacity: calc( 1 - (var(--y) * 0.0009) );
}
.landing-content { padding-left: 30%;
}
.section-intro:before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 80%; background-color: #0d232a; -webkit-transform: translateX(-50%) translateY(-50%) rotate(calc( (var(--y) * 0.1deg) )); transform: translateX(-50%) translateY(-50%) rotate(calc( (var(--y) * 0.1deg) )); will-change: transform; -webkit-backface-visibility: visible; backface-visibility: visible;
}
.img-grid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around;
}
.img-gridItem { position: relative; width: 100%; max-width: 800px; margin-right: auto; margin-left: auto;
}
.img-gridItem img { display: block; width: 50%; height: 40vh; -o-object-fit: cover; object-fit: cover; will-change: transform; -webkit-backface-visibility: visible; backface-visibility: visible;
}
.img-gridItem.type-left img { margin-right: auto;
}
.img-gridItem.type-right img { margin-left: auto;
}
.img-gridItem:nth-child(1) img { -webkit-transform: translateX(calc( var(--yBlock-4) * -0.03% )); transform: translateX(calc( var(--yBlock-4) * -0.03% ));
}
.img-gridItem:nth-child(2) img { -webkit-transform: translateX(calc( var(--yBlock-4) * 0.03% )); transform: translateX(calc( var(--yBlock-4) * 0.03% ));
}
.img-caption { position: absolute; top: 50%; width: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.img-caption * { text-align: left; padding-right: 1.5rem; padding-left: 1.5rem;
}
.type-left .img-caption { right: 0;
}
.type-right .img-caption { left: 0;
}
.section-end:before { content: ''; position: absolute; bottom: 50%; left: 24%; width: 10px; height: 80%; background-color: white; z-index: 3; -webkit-transform: translateY(8vw); transform: translateY(8vw);
}
.custom-properties-ftw { padding: 2.5rem 1.5rem;
}
.custom-properties-ftw .head-small { margin-bottom: 0;
}

Custom Properties based Parallax - Script Codes JS Codes

'use strict';
var body = document.body;
var content = document.querySelector('.js-content');
var blocks = document.querySelectorAll('.block');
var updateOffset = function updateOffset() { requestAnimationFrame(updateOffset); body.style.setProperty('--y', content.scrollTop); updateProps();
};
var updateProps = function updateProps() { var i = -1; for (var _iterator = blocks, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var block = _ref; i += 1; var top = blocks[i].getBoundingClientRect().top; if (top < window.innerHeight * 1.3 && top > window.innerHeight * -1.3) { body.style.setProperty('--yBlock-' + (i + 1), top); } else { body.style.setProperty('--yBlock-' + (i + 1), 0); } }
};
updateProps();
updateOffset();
Custom Properties based Parallax - Script Codes
Custom Properties based Parallax - Script Codes
Home Page Home
Developer Hornebom
Username Hornebom
Uploaded August 23, 2022
Rating 4.5
Size 6,449 Kb
Views 26,312
Do you need developer help for Custom Properties based Parallax?

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!

Hornebom (Hornebom) Script Codes
Name
Pew
D I S C O B T N
Dancing Joseph Butler
Rocker Switch
Timeline Dummy
Trippy
Folding Button
Bouncing Btn
PPDC Button
Wanderer
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!