host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add logo animation to gallery page

Browse source
This commit is contained in:
Paul Nicoué 2022-08-03 14:55:32 +02:00
parent 0d52c5dd04
commit 9cd82101c8
3 changed files with 53 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

39
public/assets/build/app.js
View file

File diff suppressed because one or more lines are too long

39
public/assets/js/app.js
View file

@ -8,11 +8,11 @@ import Splide from '@splidejs/splide';
const body = document.body; const body = document.body;
// SLIDER // SPLIDE SLIDER
let splide = document.querySelector('.splide'); let splideSlider = document.querySelector('.splide');
// IFRAME LOADING ANIMATIONS // EXHIBITION IFRAME
const sidebar = document.querySelector('.sidebar'); const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal'); const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
@ -36,11 +36,11 @@ function convertRemToPixels(rem) {
return rem * fontSize; return rem * fontSize;
} }
// SLIDER // SPLIDE SLIDER
function setUpSlider() { function setUpSlider() {
if (splide) { if (splideSlider) {
splide = new Splide('.splide', { splideSlider = new Splide('.splide', {
type: 'fade', type: 'fade',
rewind: true, rewind: true,
rewindByDrag: true, rewindByDrag: true,
@ -57,15 +57,13 @@ function setUpSlider() {
} }
function goToNextSlideOnClick() { function goToNextSlideOnClick() {
if (splide) { if (splideSlider) {
splide.on('click', function(e) { splideSlider.on('click', function(e) {
splide.go('>'); splideSlider.go('>');
}); });
} }
} }
// IFRAME LOADING ANIMATIONS
function enableLogoIconRotation() { function enableLogoIconRotation() {
if (logoIcon) { if (logoIcon) {
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom'); logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
@ -78,6 +76,20 @@ function disableLogoIconRotation() {
} }
} }
function rotateLogoOnSliderMove() {
if (splideSlider && logoIcon) {
splideSlider.on('move', function(e) {
logoIcon.removeEventListener('animationiteration', disableLogoIconRotation);
enableLogoIconRotation();
});
splideSlider.on('moved', function(e) {
logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
});
}
}
// EXHIBITION IFRAME
function slimDownSidebar() { function slimDownSidebar() {
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) { if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
sidebar.classList.add('sidebar--slimmed'); sidebar.classList.add('sidebar--slimmed');
@ -134,11 +146,12 @@ function loadExhibitionIframe() {
enableActivePseudoClass(); enableActivePseudoClass();
// SLIDER // SPLIDE SLIDER
setUpSlider(); setUpSlider();
goToNextSlideOnClick(); goToNextSlideOnClick();
rotateLogoOnSliderMove();
// IFRAME LOADING ANIMATIONS // EXHIBITION IFRAME
loadExhibitionIframe(); loadExhibitionIframe();

2
site/templates/exhibitions.twig
View file

@ -4,7 +4,7 @@
<header> <header>
<div class="logo"> <div class="logo">
<a class="logo__link" href="{{ homePage.url }}" target="_self" aria-label="Go to {{ site.title }}'s home page"> <a class="logo__link" href="{{ homePage.url }}" target="_self" aria-label="Go to {{ site.title }}'s gallery page">
<svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg"> <svg class="logo__icon" aria-hidden="true" viewBox="0 0 3814 1912" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)"> <g transform="matrix(1, 0, 0, -1, 1426.537109, 1153.771606)">
<path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/> <path style="fill:none;stroke:currentColor;stroke-width:93.54299927;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -290.833,17.312 -697.633,-243.443 -961.355,-441.732 -463.22,-348.289 -491.716,-401.405 -327.464,98.265 42.11,128.104 133.935,713.436 134.825,1065.798 1.49,589.899 147.634,423.095 319.826,16.386 C -107.247,-978.225 558.099,-596.729 789.55,-160.404 800.123,-140.473 836,-55 836,-55 c 0,0 25.705,-95.875 94.192,-196.312 C 1081.909,-473.805 1640,-308 1770,-260 c 53.364,19.704 261,-145 571,-221"/>