Добавить в закладки
Просто шикарный скрипт, который позволяет добавлять анимации переходов для страниц вашего сайта. Вы просто переходите по внутренним ссылкам вашего сайта, а скрипт добавляет выбранные вами эффекты для событий до и после перехода
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Установка:
1#: На нужных страницах между <head> и </head> вставьте:
|
1 |
<link rel="stylesheet" href="/css/animsition.min.css"> |
2#: Замените на всех нужных страницах <body> на:
|
1 |
<body><div class="animsition"> |
И </body> на:
|
1 |
</div></body> |
3#: На этих же страницах в самый низ перед </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> |
P.S. Если вы хотите использовать для нужных разных страниц разные анимации, просто добавьте для DIV блока, которым мы оборачивали весь контент, пару параметров. Для этого тупо замените
|
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"> |
Где у нас:
data-animsition-in-class="fade-in" - тип анимации при загрузке страницы
data-animsition-in-duration="1000" - скорость анимации при загрузке страницы
data-animsition-out-class="fade-out" - тип анимации при уходе со страницы
data-animsition-out-duration="800" - скорость анимации при уходе со страницы
Осталось лишь залить из прикреплённого архива JS файл в папку js и CSS файл в папку css
Возникли вопросы? Оставьте их в комментариях