Скрипты для uKit 07.12.2017 7 970
Новая анимация появления блоков в uKit

Новая анимация появления блоков в uKit

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

Сегодня такие эффекты способны привлечь внимание потребителя и увеличить популярность сайта. Анимация поможет создать особенную атмосферу, которая выгодно выделит вас среди конкурентов. В поиске нового оригинального решения редизайна своего сайта, стоит обратить внимание на случайную анимацию блоков.

Такой скрипт можно использовать для всех страниц сайта, только для главной или выборочно. Благодаря использованию скрипта анимация не влияет на время загрузки страниц.

Прошлый вариант скрипта: https://ukit.top/scripts/sluchaynaya-animatsiya-poyavleniya-blokov-na-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 = ['slideInUp','slideInDown','slideInLeft','slideInRight'];
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>

 

Второй вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):

 

Код
<script> 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ 
console.log('Ты на мобилке: '+navigator.userAgent+''); 
}else{ 
var animate_anims = ['zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp']; 
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>

 

Третий вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):

 

Код
<script> 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ 
console.log('Ты на мобилке: '+navigator.userAgent+''); 
}else{ 
var animate_anims = ['fadeIn','fadeInDown','fadeInDownBig','fadeInLeftBig','fadeInRightBig','fadeInUp','fadeInUpBig'];
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>

 

Четвертый вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):

 

Код
<script> 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ 
console.log('Ты на мобилке: '+navigator.userAgent+''); 
}else{ 
var animate_anims = ['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp']; 
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>

 

Пятый вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):

 

Код
<script> 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ 
console.log('Ты на мобилке: '+navigator.userAgent+''); 
}else{ 
var animate_anims = ['flipInX','flipInY'];
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>

 

Шестой вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):

 

Код
<script> 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ 
console.log('Ты на мобилке: '+navigator.userAgent+''); 
}else{ 
var animate_anims =  ["zoomIn","slideInUp","slideInDown"];
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 за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 7
avatar
1
как отключить работу например в последнем блоке?
avatar
0
2
Как отключить определенный блок, описано в соседней статьей, в комментариях: https://ukit.top/scripts....na-ukit

Вам же необходимо будет только заменить следующие значение: https://screenshot.ukit.com/src/zz/2018-01-07-14-56-36.png, на необходимый набор анимаций. Например с пятового варианта вставить следующие значения, вместо тех, что на скриншоте: 

Код
'flipInX','flipInY'
avatar
3
Скрипт классный и интересный, но есть баг при проигрывании видео вернее при нажатии на кнопку развернуть в полноэкраном режиме, видео не раскрывается а открывается просто главная страница сайта в полнокранном режиме.
avatar
0
4
Благодарим за предоставленную информацию
avatar
5
хороший рабочий скрипт, правда подвисает немного)
avatar
6
На телефоне долго сайт грузит с этой анимацией
avatar
0
7
Изначально работа этого скрипта отключена на мобильных устройствах.
avatar