Fiddling with css-only parallax

Developer
Matt Gross
Size
2,996 Kb
Views
34,408
  1. Fiddling with css-only parallax Previews
  2. Fiddling with css-only parallax HTML Codes
  3. Fiddling with css-only parallax CSS Codes

How do I make an fiddling with css-only parallax?

Built on a demo by Kieth Clark http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/. What is a fiddling with css-only parallax? How do you make a fiddling with css-only parallax? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.

Fiddling with css-only parallax Previews
IQ Test

Fiddling with css-only parallax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fiddling with css-only parallax</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="group"> <div class="layer front"> <h1 class="title">This is a title.</h1> </div> <div class="layer back"></div> </div> <div class="real-content"> <h2>Scroll Down</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat laoreet ligula, a cursus lectus varius sit amet. Nunc lectus ante, dictum sed varius non, consectetur eget augue. Proin molestie, orci vitae tempor malesuada, magna leo porttitor turpis, a convallis lorem sapien sed mi. Sed gravida consectetur cursus. Cras sodales ligula in lacus feugiat consectetur. Integer dolor dolor, cursus ut augue at, vehicula rutrum nisl. Proin ac convallis purus, sit amet condimentum velit. Etiam a neque interdum, mollis libero vel, semper lorem. Nam aliquam ante turpis, nec egestas nisl aliquam id. Nulla viverra, neque sit amet iaculis tempus, diam mi pellentesque nibh, in imperdiet nibh enim vitae sem. Phasellus cursus tempor lectus eget volutpat.
In vel ipsum diam. Phasellus laoreet erat in urna rutrum, eu molestie ipsum viverra. Fusce auctor metus quis elit tincidunt, sit amet cursus ipsum rutrum. Aliquam rhoncus in odio id hendrerit. In condimentum dignissim tellus. Mauris scelerisque ultrices nisl a pellentesque. Donec suscipit eu mi quis luctus. Phasellus porta pretium diam a pharetra. Nunc pellentesque suscipit erat, eu fermentum diam tempus a. Duis hendrerit vulputate neque. Vivamus non dui sapien. Donec quis magna lacinia, mollis velit eu, fringilla mi.
Fusce ultrices nisi in magna sagittis tempus. Morbi non lobortis nisl. Sed non finibus dolor. Nunc eu augue congue, aliquam metus vel, tincidunt ipsum. Ut ex mi, lobortis in laoreet vel, eleifend bibendum eros. Nullam faucibus quam vitae odio fringilla, nec posuere erat mattis. Sed bibendum urna nec augue venenatis vulputate. Etiam bibendum rhoncus massa non vulputate. Morbi sit amet sem nunc. Fusce sit amet nisi non quam aliquam sollicitudin nec sed arcu. In hac habitasse platea dictumst. Nam pellentesque elit velit, ac luctus felis tristique eget.
Quisque eget nulla aliquam, varius tortor vel, faucibus nulla. Sed lectus est, interdum at orci blandit, tincidunt porttitor felis. Fusce pharetra arcu efficitur diam egestas congue. Aliquam id dignissim est. Praesent eget diam suscipit, tempor nibh egestas, vestibulum dolor. Maecenas malesuada libero et nibh dapibus dapibus. In libero lorem, blandit non tincidunt accumsan, tincidunt in diam. Phasellus tempus ultrices mi. Nunc placerat augue sed est tempus imperdiet. Proin non lectus sodales, bibendum arcu a, maximus mauris. Nam in pretium odio. Donec vel aliquam metus. In varius volutpat nunc eu mattis.</p> </div>
</div>
</body>
</html>

Fiddling with css-only parallax - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.container { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 10px;
}
.group { height: 100vh; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.layer { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.back { background: url(https://unsplash.imgix.net/uploads/1412825195419af52b492/8bc72ed7?q=75&fm=jpg&s=4f35827a6dc766d393fc51fce493d85d); background-size: cover; transform: translateZ(-10px) scale(2);
}
.front { height: 300px; margin: 20vh auto; padding: 30px; background: rgba(0,0,0,0.4); transform: translateZ(0px);
}
.front h1 { color: #fff; text-transform: uppercase; letter-spacing: 2px; position: absolute; bottom: 30px; left: 0; right: 45%; text-align: right;
}
.real-content h2 { position: absolute; top: -2em; color: #fff; font-weight: normal;
}
.real-content { position: relative; background: #fff; padding: 100px;
}
Fiddling with css-only parallax - Script Codes
Fiddling with css-only parallax - Script Codes
Home Page Home
Developer Matt Gross
Username mattgrosswork
Uploaded August 28, 2022
Rating 3
Size 2,996 Kb
Views 34,408
Do you need developer help for Fiddling with css-only 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!

Matt Gross (mattgrosswork) Script Codes
Name
CSS-Only Fly Menu
JS Input Selector
Basic Fullscreen Video Background
Simple Skewed Image Container
WIP Old Stag logo-flip
Basic Flexbox Layout
Stacking Shadows
Playing with transition timing
A Better underline
Fullscreen Video Background
Create amazing marketing copy 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!