4еместо

37

0
+37

Анимированные эффекты в сPortfolio

Хотелось бы Анимированных эффектов в сPortfolio

Александр, 10.11.2014, 09:53
Официальный ответ
Igor Fedorov, 01.10.2017
В будущем обязательно будут добавляться в админку эффекты, но если вам сейчас не хватает, могу посоветовать использовать сторонние библиотеки, например:
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 блока
Статус идеи: запланировано

Комментарии

Дмитрий, 19.04.2015, 13:58
Эффект появления холстов и блоков, например выезжание, растворение, затемнение - было бы здорово.
Igor Fedorov, 21.10.2015, 14:51
Подключение waypoints:
Скачайте плагин с официального сайта http://imakewebthings.com/waypoints/

Файл jquery.waypoints.min.js нужно загрузить в хранилище на ваш сайт, потом этот файл нужно подключить к странице(ам).

Это можно сделать в настройках сайта (если хотите использовать на всем сайте) или в настройках страницы (если хотите его использовать только на одной странице) HTML & JavaScript (Расположение: <head> ... </head>), вот в это текстовое поле нужно добавить код: <script src="/files/storage/jquery.waypoints.min.js"></script>

В HTML & JavaScript (Расположение: перед </body>) добавить:
<script>
var waypoints = $('#i120')
.css('opacity', 0)
.waypoint(function(direction) {
if (direction === 'down') {
$(this.element).animate({ opacity: 1 });
}
else {
$(this.element).animate({ opacity: 0 });
}
}, {
offset: '75%'
});
</script>
Igor Fedorov, 16.04.2016, 21:52
Подключение 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>

//анимация при клике
$('#i112').click(function() {
$(this).addClass("animated bounceInLeft");
});

//анимация при скролле
$(window).scroll(function() {

$('#i118,#i111').each(function(){

if ($(this).offset().top < stPoint+400) {
$(this).addClass("animated flash");
}

});

});

</script>

где i118, i112 и i111 это id блоков, над которыми будет, проводится анимация.

flash и bounceInLeft - это константа, которую вам нужно менять, если вам нужен другой вид анимации... все доступные константы у них на сайте.

еще в этом коде есть +400, чем больше это число, тем раньше будет начинаться анимация при скролле...

Оставить комментарий