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 |
WebGL Container | 2,300 Kb |
IPhone Ui | 8,602 Kb |
Folded Video | 3,913 Kb |
Mobile Navigation Pattern | 5,939 Kb |
Text Transition Effect | 232,607 Kb |
Web Component Switches | 4,335 Kb |
Base-Style | 2,614 Kb |
SVG Cheat-Sheet | 3,107 Kb |
Blog Concept | 7,663 Kb |
Revolver Slideshow | 5,445 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 |
Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
Light Switch | Bartuc | 4,933 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Svg penguin | _massimo | 2,990 Kb |
Spilled Paint | Darrylhuffman | 3,894 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Gears | Synvox | 3,278 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 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!