A Pen by Daniel Gooß

Developer
Size
3,742 Kb
Views
10,120

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ß Previews

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;
}
A Pen by Daniel Gooß - Script Codes
A Pen by Daniel Gooß - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 3
Size 3,742 Kb
Views 10,120
Do you need developer help for A Pen by Daniel Gooß?

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!

Daniel Gooß (daniel_gooss) Script Codes
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!