Вход Регистрация
Скрипты для uKit 02.08.2017 5 2603
Слайдер по размеру экрана + Анимация

Слайдер по размеру экрана + Анимация

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

Слайдер — вид баннера, который автоматически прокручивает серию изображений-слайдов и позволяет прокрутить их пользователю вручную. Вы наверняка уже встречали текстовые или визуальные слайдеры на разных сайтах, потому что в последние годы такой виджет становится всё более распространённым. Размеры слайдера в конструкторе задаются произвольно (скриншот), и поэтому может случиться так, что на некоторых устройствах изображения в слайдере по ширине будут превышать размеры экрана, или наоборот.
С нашим решением такого не случится — он автоматически подстраивается под параметры устройства пользователя и занимает площадь, пропорциональную площади его экрана.

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

 


Установка

1. Устанавливаем анимацию для слайдера (ее устанавливать не обязательно, в зависимости от ваших пожеланий). Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код
<style>

.owl-item {overflow:hidden;}
@-webkit-keyframes kenburns-bottom-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 5% 10%;
            transform-origin: 5% 10%;
  }
  100% {
    -webkit-transform: scale(1.10) translate(-10px, 5px);
            transform: scale(1.10) translate(-10px, 5px);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
}
@keyframes kenburns-bottom-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 5% 10%;
            transform-origin: 5% 10%;
  }
  100% {
    -webkit-transform: scale(1.10) translate(-10px, 5px);
            transform: scale(1.10) translate(-10px, 5px);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
}

@-webkit-keyframes kbl {
  0% {
    -webkit-transform: scale(1.10) translate(-10px, 5px);
            transform: scale(1.10) translate(-10px, 5px);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 5% 10%;
            transform-origin: 5% 10%;
  }
}
@keyframes kbl {
  0% {
    -webkit-transform: scale(1.10) translate(-10px, 5px);
            transform: scale(1.10) translate(-10px, 5px);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 5% 10%;
            transform-origin: 5% 10%;
  }
}


@-webkit-keyframes kenburns-top-right {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 10% 5%;
            transform-origin: 10% 5%;
  }
  100% {
    -webkit-transform: scale(1.10) translate(10px, -5px);
            transform: scale(1.10) translate(10px, -5px);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}
@keyframes kenburns-top-right {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 10% 5%;
            transform-origin: 10% 5%;
  }
  100% {
    -webkit-transform: scale(1.10) translate(10px, -5px);
            transform: scale(1.10) translate(10px, -5px);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}

@-webkit-keyframes ktr {
  0% {
    -webkit-transform: scale(1.10) translate(10px, -5px);
            transform: scale(1.10) translate(10px, -5px);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 10% 5%;
            transform-origin: 10% 5%;
  }
}
@keyframes ktr {
  0% {
    -webkit-transform: scale(1.10) translate(10px, -5px);
            transform: scale(1.10) translate(10px, -5px);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 10% 5%;
            transform-origin: 10% 5%;
  }
}
</style>


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


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

Код
<script>
var sh_anim_sec = 15; // секунды анимации
require(['jquery'], function($){
    $(document).ready(function(){
        setTimeout(function(){
            re_sh();
        }, 100);
    });
    function re_sh(){
        var sh_slider = $('.ul-widget-slider-2 .ul-image'), // слайд
            sh_slideH = sh_slider.height(), // Высота слайда
            sh_winH = $(window).height(), // Высота окна
            sh_sliderTop = sh_slider.offset().top, // от слайда до верха
            sh_min_height = sh_slideH+(sh_winH-(sh_sliderTop+sh_slideH));
        sh_slider.css('min-height',''+sh_min_height+'px');
        // Запуск анимации
        var sh_sec = sh_anim_sec*1000;
        setTimeout(function(){
             animRL();
             setInterval(function(){
                animRL()
            }, sh_sec);
        }, 500); // через 0.5 сек запускает
        $('.ul-image').each(function(){
            var th_cl = $(this).find('.ul-slider-item-overlay').clone();
            $(this).find('.ul-slider-item-overlay').remove();
            th_cl.css({'z-index':'999'}).prependTo($(this).parent());
            $(this).parent().addClass('ul-image');
        });
    }
    
    // Анимация
    var sh_LR = 'r';
    function animRL(){
        if(sh_LR == 'r'){
            $('.ul-slider-wysy .ul-image').css({
                '-webkit-animation': 'kenburns-bottom-left '+sh_anim_sec+'s ease-out both',
                'animation': 'kenburns-bottom-left '+sh_anim_sec+'s ease-out both'
            });
            sh_LR = 'kbl';
        }else if(sh_LR == 'kbl'){
            $('.ul-slider-wysy .ul-image').css({
                '-webkit-animation': 'kbl '+sh_anim_sec+'s ease-out both',
                'animation': 'kbl '+sh_anim_sec+'s ease-out both'
            });
            sh_LR = 'l';
        }else if(sh_LR == 'l'){
            $('.ul-slider-wysy .ul-image').css({
                '-webkit-animation': 'kenburns-top-right '+sh_anim_sec+'s ease-out both',
                'animation': 'kenburns-top-right '+sh_anim_sec+'s ease-out both'
            });
            sh_LR = 'ktr';
        }else{
            $('.ul-slider-wysy .ul-image').css({
                '-webkit-animation': 'ktr '+sh_anim_sec+'s ease-out both',
                'animation': 'ktr '+sh_anim_sec+'s ease-out both'
            });
            sh_LR = 'r';
        }
    }
});
</script>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Демо страница Написать автору статьи Донат автору
Похожие материалы:
Всего комментариев: 5
avatar
0 Спам
1
А как этот? http://www.adhamdannaway.com/
avatar
0
2
Именно такой не удастся реализовать на uKit из виджете «слайдер» (только полностью кодом).
Свою анимацию слайдов можно реализовать с помощью этого скрипта «Анимация подложки в виджете слайдер»
avatar
0 Спам
3
http://adhesive.ooo/ - тут на мониторе свыше 24 дюймов не впечатывается в размер. Иными словами 4К монитор.
avatar
0
4
Увы, но проверить такой монитор я не могу, эмуляторы встретил только до 2К и там работает корректно.
avatar
0 Спам
5
2560х1600 работает нормально
Войдите:
avatar