From 55413d8a543d98acedf447e8006a9cc16285a735 Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Mon, 19 Jun 2023 13:12:32 +0200 Subject: [PATCH] Added Logo and logo animation --- assets/Logo.png | Bin 0 -> 10191 bytes components/navbar.html | 7 ++++++- css/index.css | 2 +- css/navbar.css | 16 ++++++++++++++ js/componentloader.js | 46 +++++++++++++++++++++++++++++++++-------- js/index.js | 11 ++++++++++ js/navbar.js | 40 +++++++++++++++++++++++++++++++++++ 7 files changed, 111 insertions(+), 11 deletions(-) create mode 100644 assets/Logo.png create mode 100644 js/navbar.js diff --git a/assets/Logo.png b/assets/Logo.png new file mode 100644 index 0000000000000000000000000000000000000000..20c09543de1df1ec8c00490968180311ce090318 GIT binary patch literal 10191 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 Q{g*p?8z<{xOYE8d0@bTvEC2ui literal 0 HcmV?d00001 diff --git a/components/navbar.html b/components/navbar.html index a3578c5..ad92665 100644 --- a/components/navbar.html +++ b/components/navbar.html @@ -1,4 +1,9 @@ \ No newline at end of file diff --git a/css/index.css b/css/index.css index e4a9f2f..af324aa 100644 --- a/css/index.css +++ b/css/index.css @@ -67,7 +67,6 @@ p { display: flex; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; position: relative; - z-index: 11; } .description-text { @@ -91,4 +90,5 @@ p { max-width: 30rem; height: auto; float: right; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; } \ No newline at end of file diff --git a/css/navbar.css b/css/navbar.css index 15fccb9..6e12903 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -10,6 +10,22 @@ z-index:2; } +#navbar_logo-container { + height: 5rem; + width: 5rem; + display: flex; +} + +.navbar_logo { + height: inherit; +} + +#navbar_text-container { + font-family: 'Josefin Sans', sans-serif; + position: fixed; + right: 5rem; +} + #navbar_padding{ padding: 2.5rem; } \ No newline at end of file diff --git a/js/componentloader.js b/js/componentloader.js index 5608214..5de7fc9 100644 --- a/js/componentloader.js +++ b/js/componentloader.js @@ -1,5 +1,23 @@ +/****************************************/ +/* functions */ +/****************************************/ -function load(url, element) { +function load(urlHTML, elementHTML, urlJS, elementJS) { + fetch(urlHTML).then(res => { + return res.text(); + }).then(htmltext => { + return elementHTML.innerHTML = htmltext; + }).then(loadedHTML => { + loadJS(urlJS, elementJS); + }) + .catch( + function (err) { + console.warn('Could not load the Navbar.', err) + } + ); +} + +function loadHTML(url, element) { fetch(url).then(res => { return res.text(); }).then(htmltext => { @@ -11,17 +29,27 @@ function load(url, element) { ); } -window.addEventListener('load', function () { - load("../components/navbar.html", document.getElementsByTagName("Navbar")[0]); -}) +function loadJS(url, element) { + var scriptTag = document.createElement('script'); + scriptTag.src = url; + element.appendChild(scriptTag); +} -function ready(callback){ +function ready(callback) { // in case the document is already rendered - if (document.readyState!='loading') callback(); + if (document.readyState != 'loading') callback(); // modern browsers else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback); // IE <= 8 - else document.attachEvent('onreadystatechange', function(){ - if (document.readyState=='complete') callback(); + else document.attachEvent('onreadystatechange', function () { + if (document.readyState == 'complete') callback(); }); -} \ No newline at end of file +} + +/****************************************/ +/* main */ +/****************************************/ + +window.addEventListener('load', function () { + load("../components/navbar.html", document.getElementsByTagName("Navbar")[0],"js/navbar.js", this.document.getElementsByTagName("head")[0]); +}) \ No newline at end of file diff --git a/js/index.js b/js/index.js index 7ce4888..d21e652 100644 --- a/js/index.js +++ b/js/index.js @@ -1,3 +1,7 @@ +/****************************************/ +/* animjs */ +/****************************************/ + var saoulAnimation = anime({ targets: '.photosaoul', easing: 'easeOutQuint', @@ -33,6 +37,9 @@ var textAnimation = anime({ }, }) +/****************************************/ +/* main */ +/****************************************/ saoulAnimation.reverse() ready(function(){ setTimeout(() => { @@ -42,6 +49,10 @@ ready(function(){ }, 1000); }); +/****************************************/ +/* functions */ +/****************************************/ + function superAnim() { saoulAnimation.play() } \ No newline at end of file diff --git a/js/navbar.js b/js/navbar.js new file mode 100644 index 0000000..62ad312 --- /dev/null +++ b/js/navbar.js @@ -0,0 +1,40 @@ +var enterAnimation; + +var logoRotate = anime({ + targets: '.navbar_logo', + rotateY: 180, + duration: 1000, + easing: 'easeOutExpo', + autoplay: false, + direction: 'normal', + update: function(anim){ + console.log(anim.progress+" : enter ? "+enterAnimation); + if(anim.progress >= 10 && enterAnimation) + { + document.getElementsByClassName("navbar_logo")[0].style.filter = "brightness(50%)"; + } + if(anim.progress <= 10 && !enterAnimation) + { + document.getElementsByClassName("navbar_logo")[0].style.filter = ""; + } + } +}); + +document.getElementById("navbar_logo-container").addEventListener("mouseenter", function () { + enterAnimation = true; + logoRotate.play(); + logoRotate.finished.then(() => { + enterAnimation = false; + }) +}); + +document.getElementById("navbar_logo-container").addEventListener("mouseleave", function () { + console.log("leave") + enterAnimation = false; + logoRotate.reverse(); + logoRotate.play(); + logoRotate.finished.then(() => { + logoRotate.reverse(); + enterAnimation = true; + }) +}); \ No newline at end of file