More functionality added

This commit is contained in:
BenjaminToby 2021-06-10 20:47:58 +01:00
parent 631194bb7a
commit 10908c151c
5 changed files with 147 additions and 32 deletions

BIN
images/hero-image-ben-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

@ -88,7 +88,7 @@ var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view");
var windowRect2 = { var windowRect2 = {
rootMargin: "0px 0px -200px 0px", rootMargin: "0px 0px -200px 0px",
}; };
var scrollIntoView = new IntersectionObserver(function(entries, scrollIntoView) { var scrollIntoView = new IntersectionObserver(function(entries) {
entries.forEach(entry => { entries.forEach(entry => {
if(entry.isIntersecting) { if(entry.isIntersecting) {
entry.target.classList.add("fade-in-bottom"); entry.target.classList.add("fade-in-bottom");

View File

@ -31,7 +31,7 @@ function intro() {
translateX: [-20, 0], translateX: [-20, 0],
// rotateY: [50, 0], // rotateY: [50, 0],
opacity: [0, 1], opacity: [0, 1],
easing: "easeInOutQuad", easing: "easeOutQuad",
duration: 800, duration: 800,
delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */), delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */),
}); });
@ -48,7 +48,7 @@ function intro() {
anime({ anime({
targets: myImageBlock, targets: myImageBlock,
translateY: [100, 0], translateY: [100, 0],
opacity: [0, 1], opacity: [0, 0.8],
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )", easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
duration: 1500, duration: 1500,
delay: 2200, delay: 2200,
@ -223,29 +223,61 @@ window.addEventListener("load", () => {
//############################################# -- Secitons intersection Observer //############################################# -- Secitons intersection Observer
const sections = document.querySelectorAll("section"); var sections = document.querySelectorAll(".scroll-into-view");
var sectionContainer = document.querySelector("#samp-div"); //var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
var windowRect2 = { var windowRect2 = {
rootMargin: "0px", rootMargin: "0px 0px -200px 0px",
}; };
var sectionsIntersectionObserver = new IntersectionObserver(sectionsObserverFn, windowRect); var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2);
function sectionsObserverFn(entries) { function sectionsObserverFn(entries) {
if(entries[1].isInersecting) {
anime({ entries.forEach(entry => {
targets: sectionContainer, if(entry.isIntersecting) {
width: [0, 500], entry.target.classList.add("scrolled-into-view");
delay: 1000,
}); // anime({
} // targets: contents[entry.target.firstElementChild],
// width: [0, "50%"],
// easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
// opacity: [0, 1],
// duration: 1200,
// });
}
});
} }
sections.forEach(entry => { sections.forEach(item => {
sectionsIntersectionObserver.observe(entry); sectionsIO.observe(item);
});
//############################################# -- Content intersection Observer
var contents = document.querySelectorAll(".scroll-into-view-content");
var contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
function contentsObserverFn(entries) {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add("scrolled-into-view-content");
}
});
}
contents.forEach(item => {
contentsIO.observe(item);
}); });

93
v3.css
View File

@ -25,8 +25,8 @@ html {
--main-color: #747bef; --main-color: #747bef;
--base-color: #222; --base-color: #222;
--sec-color-1: #ed7d71; --sec-color-1: #ed7d71;
--sec-color-2: #d67772; --sec-color-2: #faa096;
--sec-color-3: #f5b9eb; --sec-color-3: #75F0E6;
--dark-color: #1c3766; --dark-color: #1c3766;
} }
@ -120,6 +120,7 @@ nav > a:not(.social-media-links) {
background-position: -200px 41px; background-position: -200px 41px;
background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1)); background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1));
color: inherit; color: inherit;
transition: background .3s ease;
} }
nav > a:not(.social-media-links):hover { nav > a:not(.social-media-links):hover {
@ -136,6 +137,7 @@ section {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
align-items: stretch;
} }
section > div { section > div {
@ -143,9 +145,10 @@ section > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center;
perspective: 500px; perspective: 500px;
transform-style: preserve-3d; transform-style: preserve-3d;
padding: 60px; padding: 15%;
position: relative; position: relative;
} }
@ -167,7 +170,7 @@ a {
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: inherit; font-size: inherit;
transition: all .3s ease-out; /* transition: all .3s ease-out;*/
} }
a:hover { a:hover {
@ -190,7 +193,8 @@ h1 {
} }
h2 { h2 {
font-size: 36px; font-size: 32px;
width: auto;
} }
h3 { h3 {
@ -206,9 +210,8 @@ p {
line-height: 1.5; line-height: 1.5;
margin-top: 0px; margin-top: 0px;
margin-bottom: 20px; margin-bottom: 20px;
color: rgba(0,0,0,0.8);
width: 100%; width: 100%;
font-weight: 500; font-weight: 400;
} }
span { span {
@ -246,8 +249,7 @@ button {
background-color: var(--dark-color); background-color: var(--dark-color);
padding: 10px 20px; padding: 10px 20px;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: all .2s ease-out;
background-image: linear-gradient(var(--main-color),var(--main-color)); background-image: linear-gradient(var(--main-color),var(--main-color));
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0px 67px; background-position: 0px 67px;
@ -315,6 +317,28 @@ input:focus {
margin-right: 0; margin-right: 0;
} }
.scroll-into-view {
padding: 0;
width: 0;
transition: all .7s cubic-bezier(0.93, 0, 0.09, 1);
}
.scrolled-into-view {
width: 50%;
padding: 40px;
}
.scroll-into-view-content {
transform: translateY(80px) rotateX(5deg);
transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1);
opacity: 0;
}
.scrolled-into-view-content {
transform: none;
opacity: 1;
}
@ -331,7 +355,6 @@ input:focus {
} }
.hero-section > div:nth-child(1) { .hero-section > div:nth-child(1) {
} }
.hero-section > div:nth-child(2) { .hero-section > div:nth-child(2) {
@ -339,6 +362,7 @@ input:focus {
padding: 25vh 40px 40px 6.2vw; padding: 25vh 40px 40px 6.2vw;
font-size: 2.5vw; font-size: 2.5vw;
display: inline; display: inline;
z-index: 100;
/* opacity: 0;*/ /* opacity: 0;*/
} }
@ -352,10 +376,12 @@ input:focus {
background-image: linear-gradient(var(--main-color),var(--main-color)); background-image: linear-gradient(var(--main-color),var(--main-color));
background-position: 0px 3.2vw; background-position: 0px 3.2vw;
background-repeat: no-repeat; background-repeat: no-repeat;
transition: all .3s ease-out;
} }
.main-text-block a:hover { .main-text-block a:hover {
color: white; color: white;
background-position: 0px 0px; background-position: 0px 0px;
background-image: linear-gradient(var(--dark-color),var(--dark-color));
padding: 5px 10px; padding: 5px 10px;
} }
@ -394,33 +420,36 @@ input:focus {
left: 15vw; left: 15vw;
background-image: url("images/hero-image-ben.jpg"); background-image: url("images/hero-image-ben.jpg");
background-size: cover; background-size: cover;
opacity: .8; opacity: .2;
padding: 0; padding: 0;
} }
.benjamin-big-text-block { .benjamin-big-text-block {
position: absolute; position: absolute;
font-size: 8.5vw; font-size: 8.5vw;
bottom: -50px; bottom: -40px;
left: 5%; left: 5%;
font-weight: 900; font-weight: 900;
line-height: 1em; line-height: 1em;
color: white; color: white;
mix-blend-mode: overlay; mix-blend-mode: overlay;
filter: drop-shadow(0 0 20px rgba(0,0,0,0.4)); filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
padding: 40px;
} }
.main-cta-button { .main-cta-button {
font-size: 24px; font-size: 24px;
padding: 15px 40px; padding: 15px 40px;
margin-top: 20px; margin-top: 20px;
background-color: var(--sec-color-1);
transition: all .3s ease-out;
background-image: linear-gradient(var(--dark-color),var(--dark-color));
} }
.main-cta-button:hover { .main-cta-button:hover {
background-image: linear-gradient(var(--main-color),var(--main-color)); background-image: linear-gradient(var(--dark-color),var(--dark-color));
background-position: 0px 0px; background-position: 0px 0px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: var(--dark-color);
} }
@ -437,8 +466,42 @@ input:focus {
} }
.my-work-section > div:nth-child(1) {
color: rgba(0,0,0,0.6);
align-items: flex-end;
}
.my-work-section > div:nth-child(2) { .my-work-section > div:nth-child(2) {
background-color: var(--sec-color-1); background-color: var(--sec-color-2);
/* width: 20%;*/
}
.my-work-section h2 {
text-align: right;
color: rgba(0,0,0,.8);
}
.my-work-section p {
text-align: right;
}
/*############################################################# -- About Me -- */
.about-me-section {
justify-content: flex-end;
}
.about-me-section > div:nth-child(1) {
background-color: var(--sec-color-3);
/* width: 20%;*/
} }

22
v3.html
View File

@ -93,14 +93,34 @@
<section class="my-work-section"> <section class="my-work-section">
<div> <div>
<h2 class="scroll-into-view-content">Some of My Work</h2>
<p class="scroll-into-view-content">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 id="samp-div"> <div class="scroll-into-view">
</div> </div>
</section> </section>
<!-- #################################################################################-- About Me -->
<section class="about-me-section">
<div class="scroll-into-view">
</div>
<div>
</div>
</section>