diff --git a/components/footer.html b/components/footer.html
index d2d0049..0a53c45 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -39,13 +39,6 @@
données qui le concernent. Cependant, Saoul Bonmonsieur possède un droit de Veto dans votre
dimension ainsi que 5 autres et ne vous autorise donc ni à accèder, ni à supprimer ces derniers
- Il en est de même des éventuelles bases de données figurant sur le site Internet qui sont protégées
- par
- les dispositions de la loi du 11 juillet 1998 portant transposition dans le Code de la propriété
- intellectuelle (CPI) de la directive européenne du 11 mars 1996 relative à la protection juridique
- des
- bases de données.
-
Le logo de Saoul Bonmonsieur n'est ni reproductible ni utilisable dans d'autres domaines. Nous
savons qu'il est beau, voire magnifique. S'il vous arrive de l'utiliser Saul Bonmonsieur sera dans
l'obligation de vous poursuivre en justice, et vous ne gagnerez pas, ni ne pouvez être défendu par
diff --git a/css/navbar.css b/css/navbar.css
index 409c587..d1af298 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -2,14 +2,6 @@
padding: 2.5rem;
}
-#navbar_logo-container {
- height: 5rem;
- width: 5rem;
- display: flex;
- position: fixed;
- right: 5rem;
-}
-
.navbar_logo {
height: 5rem;
}
@@ -28,6 +20,14 @@
overflow: initial;
}
+ #navbar_logo-container {
+ height: 5rem;
+ width: 5rem;
+ display: flex;
+ position: fixed;
+ right: 5rem;
+ }
+
#navbar_text-container {
font-family: 'Josefin Sans', sans-serif;
position: fixed;
@@ -81,6 +81,14 @@
overflow: initial;
}
+ #navbar_logo-container {
+ height: 5rem;
+ width: 5rem;
+ display: flex;
+ position: fixed;
+ right: 2.5rem;
+ }
+
#navbar_text-container {
font-family: 'Josefin Sans', sans-serif;
position: fixed;
diff --git a/js/base.js b/js/base.js
index f455e1a..dfaf82e 100644
--- a/js/base.js
+++ b/js/base.js
@@ -5,24 +5,30 @@
var urlStr = window.location.toString().slice(0, window.location.toString().lastIndexOf(window.location.pathname) + 1);
//Getting the dir name by gathering the pathname and substract it with the last '/'.
var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
+//Global variable set to true when finished loading external html/css/js files
+var finishedLoading = false;
/****************************************/
/* functions */
/****************************************/
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 ' + urlHTML + ': Add the correct tag ?', err);
- }
- );
+ const returnPromise = new Promise((resolve, reject) => {
+ fetch(urlHTML).then(res => {
+ return res.text();
+ }).then(htmltext => {
+ return elementHTML.innerHTML = htmltext;
+ }).then(loadedHTML => {
+ loadJS(urlJS, elementJS);
+ resolve(elementHTML);
+ })
+ .catch(
+ function (err) {
+ reject('Could not load ' + urlHTML + ': Add the correct tag ?', err);
+ }
+ );
+ });
+ return returnPromise;
}
function loadHTML(url, element) {
@@ -116,14 +122,16 @@ function popUpPlacement(className) {
//During the loading process we need a loading status bar
var headTag = document.getElementsByTagName("head")[0];
window.addEventListener('load', function () {
- loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag)
+ //instant loading
+ loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag);
loadCSS(urlStr + "css/base.css", headTag);
loadCSS(urlStr + "css/navbar.css", headTag);
- load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag);
loadCSS(urlStr + "css/footer.css", headTag);
- load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag)
- setTimeout(() => {
- //Will change
- popUpPlacement("black-bg");
- }, 500);
+ //async loading
+ load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag).then(() => {
+ load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag).then(() => {
+ finishedLoading = true;
+ popUpPlacement("black-bg");
+ });
+ });
})
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 1727fc3..2da3a21 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,6 +2,7 @@
/* global variables */
/****************************************/
+//status if saoul has disappeared or not
var saulDisappeared = 0;
/****************************************/
@@ -19,6 +20,7 @@ var nomoreSaoul = anime({
var saoulAnimation = anime({
targets: '.photosaoul',
easing: 'easeOutQuint',
+ autoplay: false,
translateX: [
{ value: "", duration: 100, delay: 0 },
{ value: "130%", duration: 1000, delay: 100 }
@@ -55,15 +57,11 @@ var textAnimation = anime({
/* main */
/****************************************/
-saoulAnimation.reverse()
-ready(function () {
- setTimeout(() => {
- saoulAnimation.play();
- whiteBandAnimation.play();
- textAnimation.play();
- }, 1000);
-});
+//playing the first animation on the page
+saoulAnimation.reverse();
+playIndexAnimation();
+//eventlistener to make saoul dissapear when scrolling at a certain point
window.addEventListener("scroll", function (e) {
var saoulPhoto = document.getElementsByClassName("photosaoul")[0];
if (document.getElementsByClassName("description")[0].getBoundingClientRect().y < 150) {
@@ -94,6 +92,14 @@ window.addEventListener("scroll", function (e) {
/* functions */
/****************************************/
-function superAnim() {
- saoulAnimation.play()
+
+async function playIndexAnimation() {
+ while (!finishedLoading) {
+ await new Promise(resolve => setTimeout(resolve, 200));
+ }
+ setTimeout(() => {
+ whiteBandAnimation.play();
+ textAnimation.play();
+ saoulAnimation.restart();
+ }, 500);
}
\ No newline at end of file