Ajout: Apparition au scroll sur functions-list
This commit is contained in:
Divlo
parent
b3225f3adc
commit
10553b62e7
88
css/animationsScroll.css
Normal file
88
css/animationsScroll.css
Normal file
@ -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;
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
|
||||
<!-- Scripts JS -->
|
||||
<script defer src="/scripts/libs/jquery-min.js"></script>
|
||||
<script defer src="/scripts/libs/plugins/jquery.appear.min.js"></script>
|
||||
<script defer src="/scripts/libs/bootstrap-min.js"></script>
|
||||
<script defer src="/scripts/libs/moment.js"></script>
|
||||
<script defer src="/scripts/libs/jquery-ui-min.js"></script>
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
<link rel="stylesheet" href="/css/libs/bootstrap-datepicker3.css">
|
||||
<link rel="stylesheet" href="/css/libs/fonts.css">
|
||||
<link rel="stylesheet" href="/css/libs/fontawesome/css/all.css">
|
||||
<link rel="stylesheet" href="/css/animationsScroll.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
|
||||
|
||||
1
scripts/libs/plugins/jquery.appear.min.js
vendored
Normal file
1
scripts/libs/plugins/jquery.appear.min.js
vendored
Normal file
@ -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}());
|
||||
@ -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;
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<h1>La liste des <span class="important">Fonctions</span> :</h1>
|
||||
</div>
|
||||
|
||||
<div class="row pt-4">
|
||||
<div class="row pt-4 animate-up">
|
||||
<div class="col-sm-12 col-md-6 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/weatherRequest.php">Météo</a></h2>
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row animate-up">
|
||||
<div class="col-sm-12 col-md-6 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/calculateAge.php">Quel âge avez-vous ?</a></h2>
|
||||
@ -45,7 +45,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row animate-up">
|
||||
<div class="col-sm-12 col-md-6 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/convertDistance.php">Conversion de Distance</a></h2>
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row animate-up">
|
||||
<div class="col-sm-12 col-md-6 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/randomQuote.php">Générateur de citations</a></h2>
|
||||
@ -79,7 +79,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row animate-up">
|
||||
<div class="col-sm-12 col-md-6 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/convertEncoding.php">Conversion des Encodages de caractères</a></h2>
|
||||
@ -96,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row animate-up">
|
||||
<div class="col-sm-12 col-md-6 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/armstrongNumber.php">Nombre d'Armstrong</a></h2>
|
||||
@ -113,7 +113,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row animate-up">
|
||||
<div class="col-sm-12 col-md-6 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/convertMarkdown.php">Markdown</a></h2>
|
||||
@ -130,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row animate-up">
|
||||
<div class="col-12 pb-4">
|
||||
<div class="text-center pb-5">
|
||||
<h2 class="function-list-title"><a href="./function-views/toDoList.php">Liste de choses à faire</a></h2>
|
||||
|
||||
Reference in New Issue
Block a user