From d61f2c59753c9b6139f43d0777de1c52a752ba8d Mon Sep 17 00:00:00 2001 From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com> Date: Sat, 19 Jun 2021 11:03:18 +0100 Subject: [PATCH] add alt favicon and footer controller --- images/favicon2.ico | Bin 0 -> 797 bytes index.html | 7 ++- main.css | 29 ++++++++++++- scripts/main.js | 103 +++++++++++++++++++++++--------------------- 4 files changed, 87 insertions(+), 52 deletions(-) create mode 100644 images/favicon2.ico diff --git a/images/favicon2.ico b/images/favicon2.ico new file mode 100644 index 0000000000000000000000000000000000000000..0fcdff903b39ce3a2630133c1ef663d82d49335f GIT binary patch literal 797 zcmV+&1LFLNP)Px$Vo*#}MgRZ*U}vDZz1*?1*Ur%9r>fHR_WEOKuxxU* zR$iKCZL)B6xBmYB{{H^j+wA!G`)F>m!o}dOvDW+h{n69tb$hw(?)K>E^k!_b-{9|< zoXcr$v$?z5Woxl)akTRC_~+;Ik(I}He7gDi{P_9%zrx>YZ?l7l!0YVwZ*;bvqR!yr z@TsiR$jalDnaQK3(20%1eS*Er&gIe4=Yog8hKs`8-|orFb<|-@bUPapv|kU)a>o`nVrmwkHmn5zxMX}h>gRkt<-IDwZp~Xa(B0i zkHmk3zKxN^;o|W1_4=l&(w?Et^Yr<1c(|ym)860iad)?Gb+(6$!gzhVcz(O1r_pkF zxRI8~U1XlNxY~}B#(sseS6`a#?(~$Izpt~`s;h!X;)!p9en4Q7>{r;=3&0S@l z?(g-AkGa9b+E-tjXKth(2rmu*00CJ^L_t(Y$KBRtSHmzA2H*l?X*xQ0<{R$rGTb)Y z-QD5;vlR{`IZK-RmG@h3&U4cC+}lP`{$IS7lJV}uxkN?0*oIwmKvGEUf)z>-+8P5B z6zl>MRGk15l!p@(f|C(AnTL~{hzwK|(>%nyGZCr$DMly~lOg&pSv`;;%05|5N)aDf z9h4zUWHFi*k@oUp+$+@6Z-X1A!vQ6SerWSguK`DFqX|6w&hRRH_R)j`KFG71@Tr`s zg3n8hh_qRa_+5L{XVW9omUe2JJ{h9e$a13;870fhGGvOnv14 Tben Design V3 - + @@ -170,7 +171,7 @@ -
+

So. Let's have a chat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod @@ -212,6 +213,8 @@

+ +
diff --git a/main.css b/main.css index a54e7b7..74a7acf 100644 --- a/main.css +++ b/main.css @@ -507,7 +507,7 @@ input:focus { -/*############################################################# -- About Me -- */ +/*############################################################# -- My Specialties -- */ .my-specialties-section { justify-content: flex-start; @@ -554,6 +554,33 @@ input:focus { +/*############################################################# -- Contact Me -- */ + +.contact-section { + position: relative; +} + +.contact-section > div:nth-of-type(2) { + background-color: var(--sec-color-1); +} + +.contact-section-controller { + width: 100%; + height: 100px; + position: absolute; + bottom: 0; + left: 0; + padding: 0; +} + + + + + + + + + diff --git a/scripts/main.js b/scripts/main.js index 3ae4e41..fcd38bf 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -13,10 +13,12 @@ const mainCTA = document.querySelector(".main-cta-button"); const allHeaderElements = document.querySelectorAll("header *"); const mountains = document.querySelectorAll("#mountains"); const clouds = document.querySelectorAll("#clouds"); +const footerController = document.querySelector(".contact-section-controller"); +const header = document.querySelector("header"); function intro() { - + anime({ targets: heroTextSection, width: [0, "50%"], @@ -25,17 +27,17 @@ function intro() { duration: 1500, delay: 1000, }); - + anime({ targets: allHeaderElements, translateX: [-20, 0], -// rotateY: [50, 0], + // rotateY: [50, 0], opacity: [0, 1], easing: "easeOutQuad", duration: 800, - delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */), + delay: anime.stagger(100, { start: 1000 }/* , {easing: 'easeOutQuad'} */), }); - + anime({ targets: myBigTextBlock, translateY: [100, 0], @@ -44,7 +46,7 @@ function intro() { duration: 1200, delay: 2000, }); - + anime({ targets: myImageBlock, translateY: [100, 0], @@ -53,7 +55,7 @@ function intro() { duration: 1500, delay: 2200, }); - + anime({ targets: mainTextBlock, translateX: [-50, 0], @@ -62,7 +64,7 @@ function intro() { duration: 1200, delay: 2500, }); - + anime({ targets: mainCTA, translateX: [-50, 0], @@ -71,7 +73,7 @@ function intro() { duration: 1200, delay: 2600, }); - + anime({ targets: mountains, translateY: [200, 0], @@ -80,7 +82,7 @@ function intro() { duration: 1500, delay: 1000, }); - + anime({ targets: clouds, opacity: [0.2, 1], @@ -88,61 +90,61 @@ function intro() { duration: 1200, delay: 800, }); - + } // Intro Initialization function introInit() { - + anime({ targets: heroTextSection, width: [0], translateX: 200, duration: 0 }); - + anime({ targets: allHeaderElements, translateX: [-20], opacity: [0], duration: 0 }); - + anime({ targets: myBigTextBlock, translateY: [100], opacity: [0], duration: 0 }); - + anime({ targets: myImageBlock, translateY: [100], opacity: [0], duration: 0 }); - + anime({ targets: mainTextBlock, translateX: [-50], opacity: [0], duration: 0 }); - + anime({ targets: mainCTA, translateX: [-50], opacity: [0], duration: 0 }); - + anime({ targets: mountains, opacity: 0, duration: 0 }); - + } introInit(); @@ -161,9 +163,9 @@ var windowRect = { var headerObserver = new IntersectionObserver(changeHeader, windowRect); function changeHeader(entry) { - - if(entry[0].isIntersecting) { - document.querySelector("header").className = "none"; + + if (entry[0].isIntersecting) { + header.className = "none"; anime({ targets: "header img", width: 40, @@ -172,16 +174,16 @@ function changeHeader(entry) { duration: 400, easing: "easeOutCubic", }); - + anime({ targets: "header > a > div", translateX: 0, opacity: 1, duration: 1000, }); - + } else { - document.querySelector("header").classList.add("scrolled"); + header.classList.add("scrolled"); anime({ targets: "header img", width: 60, @@ -190,7 +192,7 @@ function changeHeader(entry) { duration: 400, easing: "easeOutCubic", }); - + anime({ targets: "header > a > div", translateX: -50, @@ -211,7 +213,7 @@ setTimeout(() => { window.addEventListener("load", () => { - setTimeout(() => {intro();}, 1000); + setTimeout(() => { intro(); }, 1000); }); @@ -233,21 +235,22 @@ var windowRect2 = { var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2); function sectionsObserverFn(entries) { - + entries.forEach(entry => { - if(entry.isIntersecting) { + 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, -// }); - } + headerObserver.observe(footerController); + + // anime({ + // targets: contents[entry.target.firstElementChild], + // width: [0, "50%"], + // easing: "cubicBezier( 0.93, 0, 0.09, 1 )", + // opacity: [0, 1], + // duration: 1200, + // }); + } }); - + } @@ -265,13 +268,13 @@ const contents = document.querySelectorAll(".scroll-into-view-content"); const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2); function contentsObserverFn(entries) { - + entries.forEach(entry => { - if(entry.isIntersecting) { + if (entry.isIntersecting) { entry.target.classList.add("scrolled-into-view-content"); - } + } }); - + } @@ -293,22 +296,22 @@ const myToolsIconsAnimated = anime({ targets: myToolsIcons, translateX: [-20, 0], translateY: [-20, 0], -// rotateY: [50, 0], + // rotateY: [50, 0], opacity: [0, 1], easing: "easeOutQuad", duration: 1200, - delay: anime.stagger(150, {start: 200}), + delay: anime.stagger(150, { start: 200 }), loop: false, autoplay: false, - complete: function() { myToolsIconsAnimated.remove(myToolsIcons); }, + complete: function () { myToolsIconsAnimated.remove(myToolsIcons); }, }); function myToolsFn(entries) { - - if(entries[0].isIntersecting) { + + if (entries[0].isIntersecting) { myToolsIconsAnimated.play(); } - + } @@ -326,6 +329,8 @@ myToolsIO.observe(myToolsParagraph); //############################################# -- Contact Form + + //var form = document.getElementById("my-form"); // // async function handleSubmit(event) {