Скрипты для uKit 24.07.2017 6 573
Случайная анимация появления блоков на uKit

Случайная анимация появления блоков на uKit

Каждый профессиональный веб-мастер стремится сделать свой сайт комфортнее для посетителей. Сегодня всё чаще и чаще на популярных Интернет-страницах встречается анимация при прокрутке. Чтобы Ваш сайт не остался позади и также был приятен глазу, мы предлагаем Вам использовать наш новый скрипт, анимирующий веб-страницу при скроллинге.

Наше решение поможет Вам в представлении товаров или услуг. Эргономичное расположение информации и правильная анимация позволит акцентировать внимание гостя на действительно важных моментах. Кроме того, одним из плюсов подобной функции является то, что пользователь сам регулирует скорость подачи информации. Большой текст, размещённый на рекламной странице, отпугивает целевую аудиторию, в то время как эффектно анимированное появление информации облегчает восприятие и придаёт тексту определённую структуру, а сайту – лёгкость и оригинальность.

С нашим анимирующим скриптом Вы визуально оптимизируете свой сайт, что обязательно увеличит к нему интерес пользователей сети!

 



Установка

1. Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код
<script src="https://newsite.kz/js/wow.min.js"></script>
<link rel="stylesheet" media="all" href="https://daneden.github.io/animate.css/animate.min.css">
<style>
      body {
    overflow-x: hidden;
}
</style>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот). После чего, нажмите кнопоку "Сохранить"


2. Сразу в этом же разделе добавьте второй код (скриншот):
 

Код
<script> 
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>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 6
avatar
1
Здравствуйте, первый раз поставил работало нормально, сейчас же стало не корректно работать, вроде бы почти не выезжают блоки, код не изменял, установлен правильно. В чем может быть проблема ?
webshmot.com
avatar
1
2
Я заметил, что ситуация исправлена (возможно у вас был установлен скрипт или сервис который конфликтовал с нашим кодом).
У вас остались еще какие-либо вопросы?
avatar
3
Подскажите, пожалуйста. Как оставить анимацию с данным скоиптом, но отключить ее на первом блоке. Например в блоке со слайдером, дабы избежать такой ситуации: страница загружается - появляется контент, все блоки, потом страница начинает опять дергаться блоки начинают анимировать)
avatar
0
4
Вам необходимо подключить анимацию при помощи следующего кода (вместо второго кода в статье):

Код
<script>
var anims = ['fadeInDown','fadeInLeft','fadeInRight','fadeInUp'];
// id="block1" блоков которые не надо трогать пример: ['block1', 'block2', 'block3']
var block = ['' ];
require(['jquery'], function($){
     $('*[class*="row ul-row"').each(function(){
      if(block.indexOf(''+$(this).attr('id')+'') == -1){
       var rand = Math.floor(Math.random() * anims.length);
       $(this).addClass(''+anims[rand]+' wow animated').attr('data-wow-duration', '1500ms');
      }
     };);
     new WOW().init();
};);
</script>

Где:

Код
var block = ['' ];

Необходимо установить ID вашего блока, пример установки указан также скрипте
Вот дополнительный пример:

Код
var block = ['ul-id-1302-89', 'ul-id-1302-81' , 'ul-id-1302-100', 'ul-id-1302-108', 'ul-id-1302-93', 'ul-id-1302-77', 'ul-id-1306-25', 'ul-id-1306-33', 'ul-id-1306-37', 'ul-id-1306-29', 'ul-id-1305-4', 'ul-id-1319-20' ];


Как получить ID-блока, можете прочитать здесь: https://ukit.top/howto....golovok
avatar
5
Здесь нужно будет устанавливать самостоятельно блоки где будет работать и где не будет так?
avatar
0
6
Вам необходимо указывать ID блоков, в которых не будет подключена анимация, для всех остальных блоков анимация будет работать также, как и раньше.
avatar