Added intro
This commit is contained in:
BenjaminToby
parent
5c855e092f
commit
5794177725
@ -21,3 +21,13 @@ window.addEventListener("scroll", () => {
|
||||
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
|
||||
|
||||
});
|
||||
|
||||
//window.scrollBy({
|
||||
// top: -100,
|
||||
// behavior: "smooth"
|
||||
//});
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
document.getElementById("skewed-bg").classList.add("skewed-bg");
|
||||
document.getElementById("preloader").className = "preloader";
|
||||
});
|
||||
74
v2.css
74
v2.css
@ -42,11 +42,11 @@ header {
|
||||
}
|
||||
|
||||
header > a {
|
||||
font-family: Impact;
|
||||
font-family: hennigar;
|
||||
font-size: 24px;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
letter-spacing: 0px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
nav {
|
||||
@ -105,13 +105,15 @@ a:hover {
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: Impact;
|
||||
font-family: hennigar;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
line-height: 1.2;
|
||||
color: inherit;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -120,7 +122,7 @@ h1 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -192,6 +194,36 @@ input:focus {
|
||||
|
||||
/*................................................... General classes and IDs */
|
||||
|
||||
.preloader-init {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--main-color);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.preloader {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--main-color);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
animation: preloaderexit 1s;
|
||||
animation-fill-mode: both;
|
||||
animation-delay: 1s;
|
||||
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
|
||||
}
|
||||
|
||||
@keyframes preloaderexit {
|
||||
0%{display: none; transform: none; opacity: 1; height: 100vh;}
|
||||
99%{transform: skewY(-3deg); opacity: 1; height: 0px; bottom: -200px;}
|
||||
100%{display: none; transform: skewY(-3deg); opacity: 0; height: 0px;}
|
||||
}
|
||||
|
||||
.aside-header {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
@ -227,21 +259,21 @@ input:focus {
|
||||
}
|
||||
|
||||
#benjamin-hero-text {
|
||||
font-family: Impact;
|
||||
font-size: 90px;
|
||||
font-family: hennigar;
|
||||
font-size: 105px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -2px;
|
||||
letter-spacing: 0px;
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#toby-hero-text {
|
||||
font-family: Impact;
|
||||
font-size: 180px;
|
||||
font-family: hennigar;
|
||||
font-size: 205px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -4px;
|
||||
letter-spacing: 0px;
|
||||
color: var(--main-color);
|
||||
line-height: 1;
|
||||
margin-top: -48px;
|
||||
margin-top: -63px;
|
||||
}
|
||||
|
||||
.hero-graphic-block {
|
||||
@ -249,7 +281,7 @@ input:focus {
|
||||
height: 300px;
|
||||
background-color: var(--main-color);
|
||||
border-radius: 20px;
|
||||
margin-top: -30px;
|
||||
margin-top: -35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -347,13 +379,14 @@ input:focus {
|
||||
|
||||
.hero-watermark {
|
||||
position: absolute;
|
||||
font-size: 30em;
|
||||
font-family: Impact;
|
||||
font-size: 35em;
|
||||
font-family: hennigar;
|
||||
z-index: -1;
|
||||
top: 20px;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(0,0,0,0.05)
|
||||
color: rgba(0,0,0,0.05);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.below-fold {
|
||||
@ -370,6 +403,15 @@ input:focus {
|
||||
background-color: var(--main-color);
|
||||
top: -200px;
|
||||
z-index: -1;
|
||||
animation: skewintro 1.2s;
|
||||
animation-fill-mode: both;
|
||||
animation-delay: 1s;
|
||||
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||
}
|
||||
|
||||
@keyframes skewintro {
|
||||
0%{transform: none; top: 0;}
|
||||
100%{transform: skewY(-3deg); top: -200px;}
|
||||
}
|
||||
|
||||
.container-darkbg {
|
||||
|
||||
10
v2.html
10
v2.html
@ -11,7 +11,7 @@
|
||||
<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 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 href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="v2.css">
|
||||
|
||||
@ -21,6 +21,8 @@
|
||||
|
||||
<body><!-- ...................................................................................................................... Body -->
|
||||
|
||||
<div class="preloader-init" id="preloader"></div>
|
||||
|
||||
<header>
|
||||
<a>Tben.Design</a>
|
||||
<nav>
|
||||
@ -38,7 +40,7 @@
|
||||
|
||||
<section style="z-index:1;">
|
||||
<div>
|
||||
<div class="hero-graphic-wrapper translate" data-speed=".3">
|
||||
<div class="hero-graphic-wrapper translate" data-speed=".25">
|
||||
<div id="benjamin-hero-text">Benjamin</div>
|
||||
<div id="toby-hero-text">Toby</div>
|
||||
<div class="hero-graphic-block">
|
||||
@ -46,7 +48,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-text-wrapper translate" data-speed=".2">
|
||||
<div class="hero-text-wrapper translate" data-speed=".15">
|
||||
<div class="hero-text-block">
|
||||
Hi. I'm a
|
||||
<h1>
|
||||
@ -87,7 +89,7 @@
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="skewed-bg"></div>
|
||||
<div id="skewed-bg"></div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user