tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scroll animations refined

Browse Source
This commit is contained in:
BenjaminToby 2021-06-04 21:11:31 +01:00
parent ed0ab02f0b
commit 5c855e092f
3 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scripts/v2.js
View File

@ -4,16 +4,20 @@
const translate = document.querySelectorAll(".translate"); const translate = document.querySelectorAll(".translate");
var watermark = document.querySelector(".hero-watermark"); var watermark = document.querySelector(".hero-watermark");
var skewedBg = document.querySelector(".skewed-bg"); //var skewedBg = document.querySelector(".skewed-bg");
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
var scroll = window.pageYOffset; var scroll = window.pageYOffset;
translate.forEach(element => { translate.forEach(element => {
let speed = element.dataset.speed; let speed = element.dataset.speed;
element.style.transform = "translateY(" + (scroll * speed) + "px)"; element.style.transform = "translateY(" + (scroll * speed) + "px)";
}); });
// skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
}); });

13
v2.css
View File

@ -287,8 +287,8 @@ input:focus {
color: #222; color: #222;
font-size: 36px; font-size: 36px;
font-weight: 700; font-weight: 700;
top: -200px;; top: 480px;;
right: 40vw; right: 30vw;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -297,6 +297,7 @@ input:focus {
border-radius: 10px; border-radius: 10px;
padding-top: 20px; padding-top: 20px;
cursor: pointer; cursor: pointer;
z-index: 100;
} }
.scroll-link-icon { .scroll-link-icon {
@ -355,6 +356,12 @@ input:focus {
color: rgba(0,0,0,0.05) color: rgba(0,0,0,0.05)
} }
.below-fold {
background-color: var(--main-color);
padding-top: 200px;
padding-bottom: 200px;
}
.skewed-bg { .skewed-bg {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -386,7 +393,7 @@ input:focus {
/*Animations*/ /*Animations*/
.translate { .translate {
transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
} }

22
v2.html
View File

@ -10,7 +10,9 @@
<title>Tben Design</title> <title>Tben Design</title>
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer"> <meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
<link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Impact|Satisfy" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Impact" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/impacted" rel="stylesheet">
<link rel="stylesheet" href="v2.css"> <link rel="stylesheet" href="v2.css">
</head> </head>
@ -44,7 +46,7 @@
</div> </div>
</div> </div>
<div class="hero-text-wrapper"> <div class="hero-text-wrapper translate" data-speed=".2">
<div class="hero-text-block"> <div class="hero-text-block">
Hi. I'm a Hi. I'm a
<h1> <h1>
@ -65,7 +67,11 @@
<div class="hero-watermark" data-speed=".2">T-BEN</div> <div class="hero-watermark" data-speed=".6">T-BEN</div>
<div class="scroll-down-link-block">
<div class="scroll-link-icon">&rsaquo;</div>
</div>
@ -73,19 +79,15 @@
<section style="background-color:var(--main-color);" class="translate" data-speed=".15"> <section class="below-fold translate" data-speed=".1">
<div class="scroll-down-link-block">
<div class="scroll-link-icon">&rsaquo;</div>
</div>
<div> <div>
<div class="container-darkbg"> <div class="container-darkbg translate" data-speed="0">
<h2>Some of my Work</h2> <h2>Some of my Work</h2>
<p style="width: 350px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p> <p style="width: 350px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
</div> </div>
<div></div> <div></div>
</div> </div>
<div class="skewed-bg" data-speed=".6"></div> <div class="skewed-bg"></div>
</section> </section>