More updates made to v2
This commit is contained in:
BenjaminToby
parent
5794177725
commit
8715cd578b
BIN
images/portfolio-item-1.jpg
Normal file
BIN
images/portfolio-item-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
images/portfolio-item-2.jpg
Normal file
BIN
images/portfolio-item-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
images/portfolio-item-3.jpg
Normal file
BIN
images/portfolio-item-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@ -30,4 +30,99 @@ window.addEventListener("scroll", () => {
|
||||
window.addEventListener("load", () => {
|
||||
document.getElementById("skewed-bg").classList.add("skewed-bg");
|
||||
document.getElementById("preloader").className = "preloader";
|
||||
document.getElementById("hero-graphic-container").className = "hero-graphic-wrapper";
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
var targets = document.querySelector("#section-2");
|
||||
var windowRect = {
|
||||
rootMargin: "0px 0px -400px 0px",
|
||||
delay: 100,
|
||||
trackVisibility: true,
|
||||
};
|
||||
|
||||
var navColors = new IntersectionObserver(navColorFunction, windowRect);
|
||||
|
||||
function navColorFunction(entries, navColors) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
document.querySelector("header").style.color = "white";
|
||||
document.querySelector(".hero-graphic-wrapper").style.opacity = "0";
|
||||
// translate[3].dataset.speed = .2;
|
||||
} else {
|
||||
document.querySelector("header").style.color = "#222";
|
||||
document.querySelector(".hero-graphic-wrapper").style.opacity = "1";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
navColors.observe(targets);
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view");
|
||||
|
||||
var windowRect2 = {
|
||||
rootMargin: "0px 0px -200px 0px",
|
||||
};
|
||||
var scrollIntoView = new IntersectionObserver(function(entries, scrollIntoView) {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("fade-in-bottom");
|
||||
}
|
||||
});
|
||||
}, windowRect2);
|
||||
|
||||
|
||||
scrollIntoViewItems.forEach(item => {
|
||||
scrollIntoView.observe(item);
|
||||
});
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
//var sectionOneText = document.querySelector("#section-2");
|
||||
|
||||
var sectionOneIo = new IntersectionObserver(sect1Function, windowRect);
|
||||
|
||||
function sect1Function(entries, sectionOneIo) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
// windowRect.thresholds = [0, 0.25, 0.5, 0.75, 1];
|
||||
// if (windowRect.thresholds < 0.25) {
|
||||
// translate[3].dataset.speed = .1;
|
||||
// } else if (windowRect.thresholds > 0.25 && windowRect.thresholds < 0.5) {
|
||||
// translate[3].dataset.speed = .2;
|
||||
// } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) {
|
||||
// translate[3].dataset.speed = .3;
|
||||
// }
|
||||
translate[4].dataset.speed = .2;
|
||||
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
||||
} else {
|
||||
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
||||
translate[4].dataset.speed = 0;
|
||||
setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
sectionOneIo.observe(translate[4]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
160
v2.css
160
v2.css
@ -39,14 +39,16 @@ header {
|
||||
top: 40px;
|
||||
width: 200px;
|
||||
z-index: 1000;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
header > a {
|
||||
font-family: hennigar;
|
||||
font-family: "hennigar";
|
||||
font-size: 24px;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
letter-spacing: 1px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav {
|
||||
@ -54,11 +56,13 @@ nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav > a:hover {
|
||||
@ -105,7 +109,7 @@ a:hover {
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: hennigar;
|
||||
font-family: "hennigar";
|
||||
margin-top: 0px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
@ -130,7 +134,9 @@ h3 {
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
||||
font-family: "Lato";
|
||||
text-transform: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -145,6 +151,9 @@ p {
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
@ -249,6 +258,16 @@ input:focus {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.hero-graphic-wrapper-init {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: -20px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hero-graphic-wrapper {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
@ -256,10 +275,20 @@ input:focus {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: -20px;
|
||||
animation: herographicintro 1.5s;
|
||||
/* animation-fill-mode: both;*/
|
||||
animation-delay: 1.3s;
|
||||
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
|
||||
transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||
}
|
||||
|
||||
@keyframes herographicintro {
|
||||
0% {transform: translateY(100px) rotateX(5deg); opacity: 0;}
|
||||
100% {transform: none; opacity: 1;}
|
||||
}
|
||||
|
||||
#benjamin-hero-text {
|
||||
font-family: hennigar;
|
||||
font-family: "hennigar";
|
||||
font-size: 105px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0px;
|
||||
@ -267,7 +296,7 @@ input:focus {
|
||||
}
|
||||
|
||||
#toby-hero-text {
|
||||
font-family: hennigar;
|
||||
font-family: "hennigar";
|
||||
font-size: 205px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0px;
|
||||
@ -293,7 +322,7 @@ input:focus {
|
||||
}
|
||||
|
||||
.hero-text-wrapper {
|
||||
width: 200px;
|
||||
width: 240px;
|
||||
padding-top: 100px;
|
||||
align-items: flex-start;
|
||||
margin-left: 50px;
|
||||
@ -380,13 +409,13 @@ input:focus {
|
||||
.hero-watermark {
|
||||
position: absolute;
|
||||
font-size: 35em;
|
||||
font-family: hennigar;
|
||||
font-family: "hennigar";
|
||||
z-index: -1;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: rgba(0,0,0,0.05);
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.below-fold {
|
||||
@ -419,8 +448,109 @@ input:focus {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.section-watermark {
|
||||
font-family: "hennigar";
|
||||
position: absolute;
|
||||
color: rgba(0,0,0,0.05);
|
||||
font-size: 15em;
|
||||
top: -350px;
|
||||
left: auto;
|
||||
right: auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.portfolio-item {
|
||||
margin-left: 100px;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
transition: all .5s ease-out;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.portfolio-item:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.portfolio-item:first-child {
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.portfolio-item:last-child {
|
||||
margin-bottom: -300px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.portfolio-item > h4 {
|
||||
transition: all .5s ease-out;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.portfolio-item > div {
|
||||
width: 350px;
|
||||
height: 250px;
|
||||
background-color: #222;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: all .3s ease-out;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.portfolio-item img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transition: all .4s ease-out;
|
||||
}
|
||||
|
||||
.portfolio-item:hover img {
|
||||
width: 110%;
|
||||
transform: rotate(5deg);
|
||||
filter: brightness(105%);
|
||||
}
|
||||
|
||||
.portfolio-item:hover > h4 {
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
.portfolio-item:hover > div {
|
||||
box-shadow: 0px 0px 35px -5px rgba(0,0,0,0.4);
|
||||
background-size: 120%;
|
||||
}
|
||||
|
||||
.portfolio-item:last-child:hover > h4 {
|
||||
border-bottom: 2px solid var(--main-color);
|
||||
}
|
||||
|
||||
.portfolio-item-image {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -438,6 +568,20 @@ input:focus {
|
||||
transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||
}
|
||||
|
||||
.fade-in-bottom {
|
||||
animation: fadeinbottom 1s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeinbottom {
|
||||
0% {transform: translateY(100px) rotateX(5deg); opacity: 0;}
|
||||
100% {transform: none; opacity: 1;}
|
||||
}
|
||||
|
||||
.scroll-into-view {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
54
v2.html
54
v2.html
@ -38,20 +38,22 @@
|
||||
<a class="social-media-link-block"></a>
|
||||
</div>
|
||||
|
||||
<section style="z-index:1;">
|
||||
<div>
|
||||
<div class="hero-graphic-wrapper translate" data-speed=".25">
|
||||
<section style="z-index:1;perspective:400px;">
|
||||
<div style="perspective:400px;transform-style:preserve-3d;">
|
||||
<div class="hero-graphic-wrapper-init" id="hero-graphic-container">
|
||||
<div class="translate" data-speed=".25">
|
||||
<div id="benjamin-hero-text">Benjamin</div>
|
||||
<div id="toby-hero-text">Toby</div>
|
||||
<div class="hero-graphic-block">
|
||||
<img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-text-wrapper translate" data-speed=".15">
|
||||
<div class="hero-text-block">
|
||||
Hi. I'm a
|
||||
<h1>
|
||||
<h1 style="font-family:inherit;">
|
||||
<span>UI/UX Designer</span>,
|
||||
<span>Web Designer</span>,
|
||||
<span>Frontend Web Developer</span>,
|
||||
@ -69,25 +71,43 @@
|
||||
|
||||
|
||||
|
||||
<div class="hero-watermark" data-speed=".6">T-BEN</div>
|
||||
<div class="hero-watermark"><span class="translate" data-speed=".6">T-BEN</span></div>
|
||||
|
||||
<div class="scroll-down-link-block">
|
||||
<a href="#section-2" class="scroll-down-link-block">
|
||||
<div class="scroll-link-icon">›</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="below-fold translate" data-speed=".1" id="section-2" style="perspective:600px;">
|
||||
<div style="perspective:400px;transform-style:preserve-3d;">
|
||||
<div class="container-darkbg translate" data-speed="0" style="transform-style:preserve-3d;">
|
||||
<h2 class="scroll-into-view">Some of my Work</h2>
|
||||
<p style="width: 350px;" class="scroll-into-view">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 class="right-column" style="transform-style:preserve-3d;">
|
||||
<a class="portfolio-item scroll-into-view">
|
||||
<div><img src="images/portfolio-item-3.jpg" alt=""></div>
|
||||
<h4>Portfolio Item Title</h4>
|
||||
</a>
|
||||
|
||||
<a class="portfolio-item scroll-into-view">
|
||||
<div><img src="images/portfolio-item-2.jpg" alt=""></div>
|
||||
<h4>Portfolio Item Title</h4>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="below-fold translate" data-speed=".1">
|
||||
<div>
|
||||
<div class="container-darkbg translate" data-speed="0">
|
||||
<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>
|
||||
<a class="portfolio-item scroll-into-view">
|
||||
<div><img src="images/portfolio-item-1.jpg" alt=""></div>
|
||||
<h4>Portfolio Item Title</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
<div class="section-watermark scroll-into-view"><span class="translate" data-speed=".05">My Work</span></div>
|
||||
</div>
|
||||
<div id="skewed-bg"></div>
|
||||
</section>
|
||||
@ -98,7 +118,7 @@
|
||||
|
||||
|
||||
|
||||
<section style="height: 2000px"></section>
|
||||
<section style="height: 2000px;z-index: -100;"></section>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user