Новая анимация появления блоков в uKit
Случайная анимация отдельных блоков придает интересного и современного вида сайту. При открытии страницы вашего сайта посетители смогут увидеть, как каждый отдельный блок постепенно появляется перед ними с помощью разных техник анимации.
Сегодня такие эффекты способны привлечь внимание потребителя и увеличить популярность сайта. Анимация поможет создать особенную атмосферу, которая выгодно выделит вас среди конкурентов. В поиске нового оригинального решения редизайна своего сайта, стоит обратить внимание на случайную анимацию блоков.
Такой скрипт можно использовать для всех страниц сайта, только для главной или выборочно. Благодаря использованию скрипта анимация не влияет на время загрузки страниц.
Прошлый вариант скрипта: https://ukit.top/scripts/sluchaynaya-animatsiya-poyavleniya-blokov-na-ukit
Установка
1. Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.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 = ['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>
Второй вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):
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>
Третий вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):
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>
Четвертый вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):
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>
Пятый вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):
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>
Шестой вариант. (Пример отображения вы можете найти на второстепенных страницах демо-сайта: скриншот):
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>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
| Всего комментариев: 10 | |
|
| |
0
