Добавлены!!!!! Новая вкладка в настройках "Анимция" и там можно настроить анимацию элемента!
------------
В будущем обязательно будут добавляться в админку эффекты, но если вам сейчас не хватает, могу посоветовать использовать сторонние библиотеки, например:
http://www.justinaguilar.com/animations/ с этого сайта загрузите css файл, большая зеленая кнопка на сайте.
Этот файл нужно загрузить в хранилище на ваш сайт, потом этот файл нужно подключить к странице(ам).
Это можно сделать в настройках сайта (если хотите использовать на всем сайте) или в настройках страницы (если хотите его использовать только на одной странице) HTML & JavaScript (Расположение: <head> ... </head>), вот в это текстовое поле нужно добавить код: <link rel="stylesheet" href="/files/storage/animations.css">
Таким образом подключается эта библиотека
-----------------------------
Дальше вставляем в настройках страницы HTML & JavaScript (Расположение: перед </body>):
---------------------------
<script>
//анимация при клике
$('#b152').click(function() {
$(this).addClass("slideUp");
});
//анимация при скролле
$(window).scroll(function() {
$('#b152,#b135').each(function(){
if ($(this).offset().top < stPoint+400) {
$(this).addClass("slideUp");
}
});
});
</script>
---------------------------
где b152 и b135 это id блоков, над которыми будет, проводится анимация.
slideUp - это константа, которую вам нужно менять, если вам нужен другой вид анимации... все доступные константы у них на сайте.
еще в этом коде есть +400, чем больше это число, тем раньше будет начинаться анимация при скролле...
------------
Еще можно использовать:
http://mynameismatthieu.com/WOW/docs.html
качаете с сайта css и js файлы, загружаете их в хранилище или просто на сервер, в настройках страницы или настройках сайта подключаете их в HTML & JavaScript (Расположение: <head> ... </head>): <link rel="stylesheet" href="/files/storage/animate.css"><script src="/files/storage/wow.min.js"></script>
В HTML & JavaScript (Расположение: перед </body>) добавить:
<script>
$('#b81').addClass("wow slideInLeft");
$('#b82').attr('data-wow-duration', "2s").attr('data-wow-delay', "3s").addClass("wow slideInLeft");
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();
</script>
где b81 и b82 - это id блока
---------------------------
Подключение daneden.animate.css:
Переходим на сайт
https://daneden.github.io/animate.css/
или
https://github.com/daneden/animate.css
Качаем animate.css - этот файл нужно загрузить в хранилище на ваш сайт, потом этот файл нужно подключить к странице(ам).
Это можно сделать в настройках сайта (если хотите использовать на всем сайте) или в настройках страницы (если хотите его использовать только на одной странице) HTML & JavaScript (Расположение: <head> ... </head>), вот в это текстовое поле нужно добавить код: <link rel="stylesheet" href="/files/storage/animate.css">
Таким образом подключается эта библиотека
-----------------------------
Дальше вставляем в настройках страницы HTML & JavaScript (Расположение: перед </body>):
---------------------------
<script>
//анимация при клике
$('#b112').click(function() {
$(this).addClass("animated bounceInLeft");
});
//анимация при скролле
$(window).scroll(function() {
$('#b118,#b111').each(function(){
if ($(this).offset().top < stPoint+400) {
$(this).addClass("animated flash");
}
});
});
</script>
где b118, b112 и b111 это id блоков, над которыми будет, проводится анимация.
flash и bounceInLeft - это константа, которую вам нужно менять, если вам нужен другой вид анимации... все доступные константы у них на сайте.
еще в этом коде есть +400, чем больше это число, тем раньше будет начинаться анимация при скролле...
