Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Saoul now disappears when accessing the next div

Browse source
This commit is contained in:
Yohan Boujon 2023-06-19 23:06:53 +02:00
parent c5c3ebca24
commit 4c5dff3564
3 changed files with 56 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/navbar.html
View file

@ -12,7 +12,11 @@
</div>
</li>
<li>
<a href="#0">Contact</a>
<a href="#0">Me Joindre</a>
<div class="navbar_dropdown">
<a href="#0">Coordonées</a>
<a href="#0">Contact</a>
</div>
</li>
</ul>
</div>

2
css/navbar.css
View file

@ -69,7 +69,7 @@ button {
float: none;
justify-content: center;
position: absolute;
width: auto;
width: 15rem;
overflow: initial;
display: none;
z-index: 10;

59
js/index.js
View file

@ -1,17 +1,31 @@
/****************************************/
/* global variables */
/****************************************/
var saulDisappeared = 0;
/****************************************/
/* animjs */
/****************************************/
var nomoreSaoul = anime({
targets: '.photosaoul',
easing: 'easeInQuint',
autoplay: false,
opacity: 0,
duration: 200
});
var saoulAnimation = anime({
targets: '.photosaoul',
easing: 'easeOutQuint',
translateX: [
{value: "", duration: 100, delay: 0 },
{value: "130%", duration: 1000, delay: 100 }
{ value: "", duration: 100, delay: 0 },
{ value: "130%", duration: 1000, delay: 100 }
],
rotate : [
{value: 0, duration: 100, delay: 0 },
{value: -60, duration: 1000, delay: 100 }
rotate: [
{ value: 0, duration: 100, delay: 0 },
{ value: -60, duration: 1000, delay: 100 }
],
begin: function () {
document.getElementsByClassName("photosaoul")[0].style.display = "flex";
@ -28,9 +42,9 @@ var whiteBandAnimation = anime({
var textAnimation = anime({
targets: '.anim-text',
easing: 'easeInOutExpo',
opacity : [
{value: 0, duration: 2000, delay: 0 },
{value: 100, duration: 1000, delay: 100 }
opacity: [
{ value: 0, duration: 2000, delay: 0 },
{ value: 100, duration: 1000, delay: 100 }
],
begin: function () {
document.getElementsByClassName("anim-text")[0].style.display = "block";
@ -40,8 +54,9 @@ var textAnimation = anime({
/****************************************/
/* main */
/****************************************/
saoulAnimation.reverse()
ready(function(){
ready(function () {
setTimeout(() => {
saoulAnimation.play();
whiteBandAnimation.play();
@ -49,6 +64,32 @@ ready(function(){
}, 1000);
});
window.addEventListener("scroll", function (e) {
var saoulPhoto = document.getElementsByClassName("photosaoul")[0];
if (document.getElementsByClassName("description")[0].getBoundingClientRect().y < 150) {
if (saulDisappeared == 0) {
saulDisappeared = 2;
nomoreSaoul.play();
nomoreSaoul.finished.then(() => {
saoulPhoto.style.display = "none";
saulDisappeared = 1;
});
}
}
else {
if (saulDisappeared == 1) {
saulDisappeared = 2;
saoulPhoto.style.display = "block";
nomoreSaoul.reverse();
nomoreSaoul.play();
nomoreSaoul.finished.then(() => {
nomoreSaoul.reverse();
saulDisappeared = 0;
});
}
}
});
/****************************************/
/* functions */
/****************************************/