Added Logo and logo animation

components/navbar.html

@@ -1,4 +1,9 @@
 <nav id="navbar_component">
+    <div id="navbar_logo-container">
+        <img class="navbar_logo" src="../assets/Logo.png"><img>
+    </div>
+    <div id="navbar_text-container">
         <p><bold>Saoul Bon Monsieur</bold></p>
+    </div>
 </nav>
 <div id="navbar_padding"></div>

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;
 }

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;
 }

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();
     });
 }
+
+/****************************************/
+/*                 main                 */
+/****************************************/
+
+window.addEventListener('load', function () {
+    load("../components/navbar.html", document.getElementsByTagName("Navbar")[0],"js/navbar.js", this.document.getElementsByTagName("head")[0]);
+})

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()
 }

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;
+    })
+});