A Pen by Daniel Gooß
How do I make an a pen by daniel gooß?
What is a a pen by daniel gooß? How do you make a a pen by daniel gooß? This script and codes were developed by Daniel Gooß on 10 November 2022, Thursday.
A Pen by Daniel Gooß - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Daniel Gooß</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'> <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! */ .parallax { height: 100vh; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; perspective: 300px;
}
.parallax-group { position: relative; height: 100vh; transform-style: preserve-3d;
}
.parallax-layer { overflow: hidden; height: 100vh; width: 100vw; background-position: bottom center; background-repeat: no-repeat; background-size: cover; transform: translateZ(0);
}
.parallax-group:nth-child(1) .parallax-layer { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-hero-lg.jpg");
}
.parallax-group:nth-child(3) .parallax-layer { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-social-lg.jpg");
}
.parallax-group:nth-child(5) .parallax-layer { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-radio-lg.jpg");
}
.parallax-layer-back { color: black; z-index: 4; transform: translateZ(-300px) scale(2);
}
.parallax-group:nth-child(1) .parallax-layer-back { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-discover-lg.jpg");
}
.parallax-group:nth-child(3) .parallax-layer-back { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-all-music-lg.jpg");
}
body { font-family: 'Open Sans', sans-serif; font-size: 125%;
}
.h { font-weight: normal; text-transform: uppercase;
}
.parallax-layer { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px;
}
.parallax-content { height: auto; max-width: 600px; color: #fff; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="parallax"> <section class="parallax-group"> <div class="parallax-layer"> <div class="parallax-content"> <h1 class="h">Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, dicta sit. Et aliquam similique rerum, soluta minus odit natus qui, hic magni architecto velit odio quasi porro quod, consequatur, ab.</p> </div> </div> <div class="parallax-layer parallax-layer-back"></div> </section> <section class="parallax-group"> <div class="parallax-layer"> <div class="parallax-content"> <h1 class="h">Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, dicta sit. Et aliquam similique rerum, soluta minus odit natus qui, hic magni architecto velit odio quasi porro quod, consequatur, ab.</p> </div> </div> </section> <section class="parallax-group"> <div class="parallax-layer"> <div class="parallax-content"> <h1 class="h">Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, dicta sit. Et aliquam similique rerum, soluta minus odit natus qui, hic magni architecto velit odio quasi porro quod, consequatur, ab.</p> </div> </div> <div class="parallax-layer parallax-layer-back"></div> </section> <section class="parallax-group"> <div class="parallax-layer"> <div class="parallax-content"> <h1 class="h">Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, dicta sit. Et aliquam similique rerum, soluta minus odit natus qui, hic magni architecto velit odio quasi porro quod, consequatur, ab.</p> </div> </div> </section> <section class="parallax-group"> <div class="parallax-layer"> <div class="parallax-content"> <h1 class="h">Hello World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, dicta sit. Et aliquam similique rerum, soluta minus odit natus qui, hic magni architecto velit odio quasi porro quod, consequatur, ab.</p> </div> </div> </section>
</div>
</body>
</html>
A Pen by Daniel Gooß - Script Codes CSS Codes
.parallax { height: 100vh; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; perspective: 300px;
}
.parallax-group { position: relative; height: 100vh; transform-style: preserve-3d;
}
.parallax-layer { overflow: hidden; height: 100vh; width: 100vw; background-position: bottom center; background-repeat: no-repeat; background-size: cover; transform: translateZ(0);
}
.parallax-group:nth-child(1) .parallax-layer { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-hero-lg.jpg");
}
.parallax-group:nth-child(3) .parallax-layer { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-social-lg.jpg");
}
.parallax-group:nth-child(5) .parallax-layer { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-radio-lg.jpg");
}
.parallax-layer-back { color: black; z-index: 4; transform: translateZ(-300px) scale(2);
}
.parallax-group:nth-child(1) .parallax-layer-back { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-discover-lg.jpg");
}
.parallax-group:nth-child(3) .parallax-layer-back { background-image: url("https://d2c87l0yth4zbw.global.ssl.fastly.net/i/home/lifestyle-all-music-lg.jpg");
}
body { font-family: 'Open Sans', sans-serif; font-size: 125%;
}
.h { font-weight: normal; text-transform: uppercase;
}
.parallax-layer { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px;
}
.parallax-content { height: auto; max-width: 600px; color: #fff; text-align: center;
}
Developer | Daniel Gooß |
Username | daniel_gooss |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 3,742 Kb |
Views | 10,120 |
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!
Name | Size |
CSS Blur Effect | 3,176 Kb |
Text Transition Effect | 232,607 Kb |
Base-Style | 2,614 Kb |
Folded Video | 3,913 Kb |
Web Component Switches | 4,335 Kb |
Navigation concept | 14,510 Kb |
Patternplate logo animation | 4,795 Kb |
Blog Concept | 7,663 Kb |
Revolver Slideshow | 5,445 Kb |
Revolver Slideshow with Touch | 7,609 Kb |
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!
Name | Username | Size |
A Pen by Jess | Jessamyne | 5,100 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Calculator | Rzencoder | 4,572 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!