Animsition - 58 различных анимаций при загрузке страниц сайта на jQuery
|
1 |
<link rel="stylesheet" href="/css/animsition.min.css"> |
|
1 |
<body><div class="animsition"> |
|
1 |
</div></body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript" src="/js/animsition.min.js"></script> <script> $(function() { $(".animsition").animsition({ inClass: 'fade-in-up-sm', // Эффект при загрузке страницы outClass: 'fade-out-down-sm', // Эффект при уходе со страницы /* Доступны следующие анимации Исчезание/Появление: fade-in fade-out fade-in-up-sm fade-in-up fade-in-up-lg fade-out-up-sm fade-out-up fade-out-up-lg fade-in-down-sm fade-in-down fade-in-down-lg fade-out-down-sm fade-out-down fade-out-down-lg fade-in-left-sm fade-in-left fade-in-left-lg fade-out-left-sm fade-out-left fade-out-left-lg fade-in-right-sm fade-in-right fade-in-right-lg fade-out-right-sm fade-out-right fade-out-right-lg Вращение: rotate-in-sm rotate-in rotate-in-lg rotate-out-sm rotate-out rotate-out-lg Искривление: flip-in-x-fr flip-in-x flip-in-x-nr flip-out-x-fr flip-out-x flip-out-x-nr Искривление: flip-in-y-fr flip-in-y flip-in-y-nr flip-out-y-fr flip-out-y flip-out-y-nr Масштабирование: zoom-in-sm zoom-in zoom-in-lg zoom-out-sm zoom-out zoom-out-lg */ inDuration: 1500, // Скорость анимации при при загрузке страницы outDuration: 800, // Скорость анимации при уходе со страницы linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([href^="javascript"])', // Исключаем из обработки некоторые ссылки loading: true, // Включать прелоадер overlayParentElement : 'body', // Каким будет родительский элемент (Не трогаем, если не знаем) }); }); </script> |
|
1 |
<div class="animsition"> |
|
1 |
<div class="animsition" data-animsition-in-class="fade-in" data-animsition-in-duration="1000" data-animsition-out-class="fade-out" data-animsition-out-duration="800"> |
