From 10908c151ce9ad28909041d6f7609f76bfe4741a Mon Sep 17 00:00:00 2001 From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com> Date: Thu, 10 Jun 2021 20:47:58 +0100 Subject: [PATCH] More functionality added --- images/hero-image-ben-2.jpg | Bin 0 -> 7685 bytes scripts/v2.js | 2 +- scripts/v3.js | 62 ++++++++++++++++++------ v3.css | 93 ++++++++++++++++++++++++++++++------ v3.html | 22 ++++++++- 5 files changed, 147 insertions(+), 32 deletions(-) create mode 100644 images/hero-image-ben-2.jpg diff --git a/images/hero-image-ben-2.jpg b/images/hero-image-ben-2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5a82bed62bb76f8bf6aa691a5e7345650567f127 GIT binary patch literal 7685 zcmbVtcT`i`_Vq~u1QdnPyCL+N1VSK42_2+Jl_GEx{d4l?Jiwt9;_dz z6rvd7?c?nn;0O=#_9FQ!hA1O`iz`ybzhEQ+{+klusf^eozN~WPR_FOawx*zI{)S`BdaAVhf!10z^Til(OT;28uBvgGFm8{ERLcp zkN(?NkK`ZVNFqA_9owA}`!8SI|LLo!;pglaK=v~ylfC}l1;%dV0J6Uu*#|BoBaMcO zTDp^*$ie<%zt-r_DQi0Wxd%BrY5S4A;lGQl=>9JWU|moy3eJv>QgTG1qZGjfBTIS6 zqNL<;3XVisd3hPEJPz@fzteve@6Sz2K`4{(`8yXy0;QA~G^L8NE*N@&o}Q7N;S>WqHwz;p3-=lJUv`F% zor_}Ze0%~zB0>UuNTjSR5{ds`1Hl*=V9YR9CMH%E80E*s!p6qJCCtUe!^I_x65ykl z07^nyL_|bdLQam-iE?VHf8>;z!6U}|6+0zv>_7zhFb{p<#YD5nYp1OokY-T)vl zgo>Jm0#We)g8#%B0WcT@0aHUDRFL0aL0|v^<7c8mp&8+L8D<0vwU3&BvAV3FL#hS_ zMyUrFLQMswp{9cT(gFc6Fh5$&gvrr2G7VDKfslct@ORWr35>7j{i2w^Zl=ppITY7- z`lOC9Q36tdq0}_czmlN%GV-IraFm+KFK;INojQbH$Gi;1+t?@K>+2}U&nbYOk`)*R zfl+*RK0?pje|<&0?P=Kb&USE1HD)?}*8IJpM73{Trgn&T!9|{?k4YS>+PhJ+e}(W| zS-c-RHLBP9X+ogzX7|OM(?g-F*RVZJOwSA`6iB^L&M7Xn^lj|(vb|d_v&_TUdkGi( z+kz6SExhf+aSLM~+k8jaqTQH%0D!95l5@2bJrFSDUG}4?&2IX8P_up0lcSG(0~czC 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 N-EF>lp!f6b{{wPJ>M#HR literal 0 HcmV?d00001 diff --git a/scripts/v2.js b/scripts/v2.js index a0c414a..0523e9b 100644 --- a/scripts/v2.js +++ b/scripts/v2.js @@ -88,7 +88,7 @@ var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view"); var windowRect2 = { rootMargin: "0px 0px -200px 0px", }; -var scrollIntoView = new IntersectionObserver(function(entries, scrollIntoView) { +var scrollIntoView = new IntersectionObserver(function(entries) { entries.forEach(entry => { if(entry.isIntersecting) { entry.target.classList.add("fade-in-bottom"); diff --git a/scripts/v3.js b/scripts/v3.js index f097c10..cead544 100644 --- a/scripts/v3.js +++ b/scripts/v3.js @@ -31,7 +31,7 @@ function intro() { translateX: [-20, 0], // rotateY: [50, 0], opacity: [0, 1], - easing: "easeInOutQuad", + easing: "easeOutQuad", duration: 800, delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */), }); @@ -48,7 +48,7 @@ function intro() { anime({ targets: myImageBlock, translateY: [100, 0], - opacity: [0, 1], + opacity: [0, 0.8], easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )", duration: 1500, delay: 2200, @@ -223,29 +223,61 @@ window.addEventListener("load", () => { //############################################# -- Secitons intersection Observer -const sections = document.querySelectorAll("section"); -var sectionContainer = document.querySelector("#samp-div"); +var sections = document.querySelectorAll(".scroll-into-view"); +//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)"); var windowRect2 = { - rootMargin: "0px", + rootMargin: "0px 0px -200px 0px", }; -var sectionsIntersectionObserver = new IntersectionObserver(sectionsObserverFn, windowRect); +var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2); function sectionsObserverFn(entries) { - if(entries[1].isInersecting) { - anime({ - targets: sectionContainer, - width: [0, 500], - delay: 1000, - }); - } + + entries.forEach(entry => { + if(entry.isIntersecting) { + entry.target.classList.add("scrolled-into-view"); + +// 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 => { - sectionsIntersectionObserver.observe(entry); +sections.forEach(item => { + 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); }); diff --git a/v3.css b/v3.css index a7df8a1..932fea9 100644 --- a/v3.css +++ b/v3.css @@ -25,8 +25,8 @@ html { --main-color: #747bef; --base-color: #222; --sec-color-1: #ed7d71; - --sec-color-2: #d67772; - --sec-color-3: #f5b9eb; + --sec-color-2: #faa096; + --sec-color-3: #75F0E6; --dark-color: #1c3766; } @@ -120,6 +120,7 @@ nav > a:not(.social-media-links) { background-position: -200px 41px; background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1)); color: inherit; + transition: background .3s ease; } nav > a:not(.social-media-links):hover { @@ -136,6 +137,7 @@ section { margin: 0; height: 100vh; overflow: hidden; + align-items: stretch; } section > div { @@ -143,9 +145,10 @@ section > div { display: flex; flex-direction: column; align-items: flex-start; + justify-content: center; perspective: 500px; transform-style: preserve-3d; - padding: 60px; + padding: 15%; position: relative; } @@ -167,7 +170,7 @@ a { border: none; cursor: pointer; font-size: inherit; - transition: all .3s ease-out; +/* transition: all .3s ease-out;*/ } a:hover { @@ -190,7 +193,8 @@ h1 { } h2 { - font-size: 36px; + font-size: 32px; + width: auto; } h3 { @@ -206,9 +210,8 @@ p { line-height: 1.5; margin-top: 0px; margin-bottom: 20px; - color: rgba(0,0,0,0.8); width: 100%; - font-weight: 500; + font-weight: 400; } span { @@ -246,8 +249,7 @@ button { background-color: var(--dark-color); padding: 10px 20px; color: white; - cursor: pointer; - transition: all .2s ease-out; + cursor: pointer; background-image: linear-gradient(var(--main-color),var(--main-color)); background-repeat: no-repeat; background-position: 0px 67px; @@ -315,6 +317,28 @@ input:focus { 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(2) { @@ -339,6 +362,7 @@ input:focus { padding: 25vh 40px 40px 6.2vw; font-size: 2.5vw; display: inline; + z-index: 100; /* opacity: 0;*/ } @@ -352,10 +376,12 @@ input:focus { background-image: linear-gradient(var(--main-color),var(--main-color)); background-position: 0px 3.2vw; background-repeat: no-repeat; + transition: all .3s ease-out; } .main-text-block a:hover { color: white; background-position: 0px 0px; + background-image: linear-gradient(var(--dark-color),var(--dark-color)); padding: 5px 10px; } @@ -394,33 +420,36 @@ input:focus { left: 15vw; background-image: url("images/hero-image-ben.jpg"); background-size: cover; - opacity: .8; + opacity: .2; padding: 0; } .benjamin-big-text-block { position: absolute; font-size: 8.5vw; - bottom: -50px; + bottom: -40px; left: 5%; font-weight: 900; line-height: 1em; color: white; mix-blend-mode: overlay; filter: drop-shadow(0 0 20px rgba(0,0,0,0.4)); + padding: 40px; } .main-cta-button { font-size: 24px; padding: 15px 40px; 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 { - 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-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) { - 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%;*/ } diff --git a/v3.html b/v3.html index 0fdd409..285d9ae 100644 --- a/v3.html +++ b/v3.html @@ -93,14 +93,34 @@
+

Some of My Work

+

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.

-
+
+ + + + + + + + +
+
+
+ +
+
+
+ + +