From 10553b62e7ba1e6936fb08afb5856337477d1c25 Mon Sep 17 00:00:00 2001 From: Divlo Date: Sun, 29 Dec 2019 01:18:10 +0100 Subject: [PATCH] Ajout: Apparition au scroll sur functions-list --- css/animationsScroll.css | 88 +++++++++++++++++++++++ incl/footer.php | 1 + incl/header.php | 1 + scripts/libs/plugins/jquery.appear.min.js | 1 + scripts/main.js | 15 ++++ views/function-list.php | 16 ++--- 6 files changed, 114 insertions(+), 8 deletions(-) create mode 100644 css/animationsScroll.css create mode 100644 scripts/libs/plugins/jquery.appear.min.js diff --git a/css/animationsScroll.css b/css/animationsScroll.css new file mode 100644 index 0000000..b9c934d --- /dev/null +++ b/css/animationsScroll.css @@ -0,0 +1,88 @@ +main { + transition: opacity 400ms ease-out; +} + +.animate-down { + opacity: 0; + visibility: hidden; + -webkit-transform: translate(0, -100px); + -moz-transform: translate(0, -100px); + transform: translate(0, -100px); +} + +.animate-down.animated { + opacity: 1; + visibility: visible; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + transform: translate(0, 0); + -webkit-transition: all 400ms ease-out 100ms; + -moz-transition: all 400ms ease-out 100ms; + transition: all 400ms ease-out 100ms; + transition: 5s; +} + +.animate-up { + opacity: 0; + visibility: hidden; + -webkit-transform: translate(0, 100px); + -moz-transform: translate(0, 100px); + transform: translate(0, 100px); +} + +.animate-up.animated { + opacity: 1; + visibility: visible; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + transform: translate(0, 0); + -webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; + -moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; + transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; +} + +.animate-right { + opacity: 0; + visibility: hidden; + transform: translate(-100px, 0); +} + +.animate-right.animated { + opacity: 1; + visibility: visible; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + transform: translate(0, 0); + -webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; + -moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; + transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; +} + +.animate-left { + opacity: 0; + visibility: hidden; + transform: translate(100px, 0); +} + +.animate-left.animated { + opacity: 1; + visibility: visible; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + transform: translate(0, 0); + -webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; + -moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; + transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms; +} \ No newline at end of file diff --git a/incl/footer.php b/incl/footer.php index 803c8dc..ed386df 100644 --- a/incl/footer.php +++ b/incl/footer.php @@ -12,6 +12,7 @@ + diff --git a/incl/header.php b/incl/header.php index 30b1bf8..3349a4f 100644 --- a/incl/header.php +++ b/incl/header.php @@ -36,6 +36,7 @@ + diff --git a/scripts/libs/plugins/jquery.appear.min.js b/scripts/libs/plugins/jquery.appear.min.js new file mode 100644 index 0000000..ee83ae3 --- /dev/null +++ b/scripts/libs/plugins/jquery.appear.min.js @@ -0,0 +1 @@ +!function(e){function r(){o=!1;for(var r=0,t=i.length;t>r;r++){var n=e(i[r]).filter(function(){return e(this).is(":appeared")});if(n.trigger("appear",[n]),p[r]){var a=p[r].not(n);a.trigger("disappear",[a])}p[r]=n}}function t(e){i.push(e),p.push()}var i=[],n=!1,o=!1,a={interval:250,force_process:!1},f=e(window),p=[];e.expr[":"].appeared=function(r){var t=e(r);if(!t.is(":visible"))return!1;var i=f.scrollLeft(),n=f.scrollTop(),o=t.offset(),a=o.left,p=o.top;return p+t.height()>=n&&p-(t.data("appear-top-offset")||0)<=n+f.height()&&a+t.width()>=i&&a-(t.data("appear-left-offset")||0)<=i+f.width()?!0:!1},e.fn.extend({appear:function(i){var f=e.extend({},a,i||{}),p=this.selector||this;if(!n){var u=function(){o||(o=!0,setTimeout(r,f.interval))};e(window).scroll(u).resize(u),n=!0}return f.force_process&&setTimeout(r,f.interval),t(p),e(p)}}),e.extend({force_appear:function(){return n?(r(),!0):!1}})}(function(){return"undefined"!=typeof module?require("jquery"):jQuery}()); \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index a1720da..2e194a4 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,4 +1,19 @@ $(function () { + + /* Apparition au défilement avec animation */ + function setWindowScrollAppear() { + var $animate = $('.animate-up, .animate-down, .animate-left, .animate-right'); + $animate.appear(); + $animate.on('appear', function (event, affected) { + for (var i = 0; i < affected.length; i++) { + console.log(affected[i]); + $(affected[i]).addClass('animated'); + } + }); + $.force_appear(); + } + setWindowScrollAppear(); + /* Changement du texte accueil (exemples de fonction) */ if(chemin === "/" || chemin === '/index.php') { let index=-1; diff --git a/views/function-list.php b/views/function-list.php index 84d9972..6af6959 100644 --- a/views/function-list.php +++ b/views/function-list.php @@ -11,7 +11,7 @@

La liste des Fonctions :

-
+

Météo

@@ -28,7 +28,7 @@
-
+

Quel âge avez-vous ?

@@ -45,7 +45,7 @@
-
+

Conversion de Distance

@@ -62,7 +62,7 @@
-
+

Générateur de citations

@@ -79,7 +79,7 @@
-
+

Conversion des Encodages de caractères

@@ -96,7 +96,7 @@
-
+

Nombre d'Armstrong

@@ -113,7 +113,7 @@
-
+

Markdown

@@ -130,7 +130,7 @@
-
+

Liste de choses à faire