Conjure/Site-Web
6
0
Fork 0
mirror of https://github.com/ConjureETS/Site.git synced 2026-03-24 01:30:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine Year animation

Browse Source
This commit is contained in:
Massimo Di Lullo 2019-08-19 10:50:35 -04:00
parent 51ec9136d3
commit 15b13d6c0e
3 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/main.min.js vendored
View File

@ -1 +1 @@
function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(t){t.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),t.target.parentElement.parentElement.classList.toggle("slide")}function pad(t,e,i){return i=i||"0",(t+="").length>=e?t:new Array(e-t.length+1).join(i)+t}function animateNumbers(t){setTimeout(function(){let e=1*(null===t.getAttribute("data-endvalue")?(new Date).getFullYear():t.getAttribute("data-endvalue")),i=setInterval(function(){e-=1,t.innerHTML=pad(parseInt(t.innerHTML)+1,4),e<=0&&clearInterval(i)},1)},null===t.getAttribute("data-delay")?250:t.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(t){t.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(t){animateNumbers(t)}),bulmaCarousel.attach(".slider",{autoplay:!0,pagination:!1,loop:!0,slidesToShow:2,slidesToScroll:2,infinite:!0,icons:{previous:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'}});
function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(t){t.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),t.target.parentElement.parentElement.classList.toggle("slide")}function pad(t,e,n){return n=n||"0",(t+="").length>=e?t:new Array(e-t.length+1).join(n)+t}function animateNumbers(t){setTimeout(function(){let e=t.getAttribute("data-endvalue"),n=1*(e=parseInt(null===e?(new Date).getFullYear():e))/7;console.log(n),console.log(void 0===e||0===e?(new Date).getFullYear():e);let i=setInterval(function(){n-=1;let l=parseInt(t.innerHTML);t.innerHTML=pad(l+7>e?l+(e-l):l+7,4),n<=0&&clearInterval(i)},1)},null===t.getAttribute("data-delay")?250:t.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(t){t.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(t){animateNumbers(t)}),bulmaCarousel.attach(".slider",{autoplay:!0,pagination:!1,loop:!0,slidesToShow:2,slidesToScroll:2,infinite:!0,icons:{previous:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'}});

10
resources/js/app.js
View File

@ -40,11 +40,17 @@ function pad(n, width, z) {
function animateNumbers(item) {
let intervalTime = 1;
let incrementation = 7;
setTimeout(function() {
let duration = (item.getAttribute('data-endvalue') === null ? new Date().getFullYear() : item.getAttribute('data-endvalue')) * intervalTime;
let endValue = item.getAttribute('data-endvalue');
endValue = parseInt(endValue === null ? new Date().getFullYear() : endValue);
let duration = endValue * intervalTime / incrementation;
console.log(duration);
console.log((endValue === undefined || endValue === 0 ? new Date().getFullYear() : endValue));
let animation = setInterval(function() {
duration -= intervalTime;
item.innerHTML = pad(parseInt(item.innerHTML) + 1, 4);
let val = parseInt(item.innerHTML);
item.innerHTML = pad( (val + incrementation > endValue ? val + (endValue - val) : val + incrementation), 4);
if(duration <= 0)
clearInterval(animation);
}, intervalTime);

2
view/fr/index.html
View File

@ -52,7 +52,7 @@
<div class="splashscreen-text-container full-width">
<h1>Laboratoire de médias interactifs</h1>
<div class="border-seperator"></div>
<h2><span class="year-animated" data-endvalue="2009">0000</span> - <span class="year-animated" data-delay="2000">0000</span></h2>
<h2><span class="year-animated" data-endvalue="2009">0000</span> - <span class="year-animated" data-delay="1500">0000</span></h2>
</div>
</section>
<section class="section" id="apropos">