Случайная анимация появления блоков на uKit
Каждый профессиональный веб-мастер стремится сделать свой сайт комфортнее для посетителей. Сегодня всё чаще и чаще на популярных Интернет-страницах встречается анимация при прокрутке. Чтобы Ваш сайт не остался позади и также был приятен глазу, мы предлагаем Вам использовать наш новый скрипт, анимирующий веб-страницу при скроллинге.
Наше решение поможет Вам в представлении товаров или услуг. Эргономичное расположение информации и правильная анимация позволит акцентировать внимание гостя на действительно важных моментах. Кроме того, одним из плюсов подобной функции является то, что пользователь сам регулирует скорость подачи информации. Большой текст, размещённый на рекламной странице, отпугивает целевую аудиторию, в то время как эффектно анимированное появление информации облегчает восприятие и придаёт тексту определённую структуру, а сайту – лёгкость и оригинальность.
С нашим анимирующим скриптом Вы визуально оптимизируете свой сайт, что обязательно увеличит к нему интерес пользователей сети!
Установка
1. Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
</script>
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/><style>
body {
overflow-x: hidden;
}
</style>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот). После чего, нажмите кнопоку "Сохранить"
2. Сразу в этом же разделе добавьте второй код (скриншот):
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
console.log('Ты на мобилке: '+navigator.userAgent+'');
}else{
var animate_anims = ['fadeInDown','fadeInLeft','fadeInRight','fadeInUp'];
var animate_block = [''];
require(['jquery'], function($){
// Все блоки
$('[class*="row ul-row"]').each(function(){
if(animate_block.indexOf(''+$(this).attr('id')+'') == -1){
var animate_rand = Math.floor(Math.random() * animate_anims.length);
$(this).addClass(''+animate_anims[animate_rand]+' wow animated').attr('data-wow-duration', '2s');
}
});
// Запуск
new WOW().init();
//Пользователь долистал до низа страницы
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$('[style*="visibility: hidden; animation-"]').each(function(){
var animate_rand = Math.floor(Math.random() * animate_anims.length);
$(this).attr('style', 'visibility:visible;animation-duration:2s;animation-name:'+animate_anims[animate_rand]+';');
});
}
});
});
}
</script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
0
