Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2017, 18:39
Интересующийся
Отправить личное сообщение для alexscus Посмотреть профиль Найти все сообщения от alexscus
 
Регистрация: 16.01.2017
Сообщений: 14

Эффект анимации для фоновой картинки в слайдере
Приветствую, Уважаемые!
Подскажите, как добавить эффект для фоновой картинки каждому активному слайду в плагине owl.carousel.js (слайдер 1-ой версии)
Намучался уже, никак не получается((

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

анимация:
var animBg = $('.carousel__frame .owl-item .slide__box').animate({
        'background-position-x': '-60px'
      }, 10000, 'linear');

var owl = $(".owl-carousel"),
      status = $(".owlStatus");
 
      owl.owlCarousel({ 
        navigation : false,
        singleItem : true,
        pagination: true,
        touchDrag: false,
        mouseDrag: false,
        afterAction : afterAction,
        transitionStyle : "fade",
        addClassActive: true,
        autoPlay : true,
        goToFirst : true,
        goToFirstSpeed : 100,
        slideSpeed:100,
 
        animBg
 
      });
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2017, 18:47
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

alexscus,
https://owlcarousel2.github.io/OwlCa...pi-events.html
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2017, 19:16
Интересующийся
Отправить личное сообщение для alexscus Посмотреть профиль Найти все сообщения от alexscus
 
Регистрация: 16.01.2017
Сообщений: 14

Сообщение от Dilettante_Pro Посмотреть сообщение
alexscus,
https://owlcarousel2.github.io/OwlCa...pi-events.html
Спасибо, но у меня используется старая версия, ниже второй.
А нет способа на JQuery ?
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2017, 20:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

alexscus,
какая версия ? номер
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2017, 20:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

alexscus,
для версий 1.3.2 и выше достаточно добавить css
http://newtimes.ru/demos/transitions.html
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2017, 20:57
Интересующийся
Отправить личное сообщение для alexscus Посмотреть профиль Найти все сообщения от alexscus
 
Регистрация: 16.01.2017
Сообщений: 14

Сообщение от рони Посмотреть сообщение
alexscus,
какая версия ? номер
owl.carousel.min.js
сейчас смотрел, версия не написана((
но просто пробовал добавлять из 2 версии зацикливание, не работало, почитал, что доступно только в версии 2, на этом основании и решил, что меньше..

Последний раз редактировалось alexscus, 16.01.2017 в 21:44.
Ответить с цитированием
  #7 (permalink)  
Старый 16.01.2017, 21:02
Интересующийся
Отправить личное сообщение для alexscus Посмотреть профиль Найти все сообщения от alexscus
 
Регистрация: 16.01.2017
Сообщений: 14

Сообщение от рони Посмотреть сообщение
alexscus,
для версий 1.3.2 и выше достаточно добавить css
http://newtimes.ru/demos/transitions.html
пробовал уже, но там при переходе на др. слайд поддергивание происходит, т.к. при fade active переключается и это заметно((
поэтому на js ищу

такой вариант использовал:
@keyframes animatedBackground {
    from {
        background-position: 0 0
    }
    100% {
        background-position: -600px 0
    }
}
.owl-item.active .slide__box{
	width:100%;
	animation: animatedBackground 60s linear infinite;
	-moz-animation: animatedBackground 60s linear infinite;
	-webkit-animation: animatedBackground 60s linear infinite;
 	-o-animation: animatedBackground 60s linear infinite;

}
Ответить с цитированием
  #8 (permalink)  
Старый 16.01.2017, 21:24
Интересующийся
Отправить личное сообщение для alexscus Посмотреть профиль Найти все сообщения от alexscus
 
Регистрация: 16.01.2017
Сообщений: 14

Сообщение от рони Посмотреть сообщение
alexscus,
для версий 1.3.2 и выше достаточно добавить css
http://newtimes.ru/demos/transitions.html
хотя сейчас небольшой костыль придумал, чтобы fade эффект не убивать )))

Спасибо за ссылку! =)

.owl-item.owl-fade-out .slide__box{
    background-position: -300px 0
}

Последний раз редактировалось alexscus, 16.01.2017 в 21:55.
Ответить с цитированием
  #9 (permalink)  
Старый 16.01.2017, 22:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

owlCarousel transitions in Chrome
alexscus,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Owl Carousel - CSS3 Transitions</title>

    <!-- Owl Carousel Assets -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet">



  </head>
  <body>
<div id="owl-demo" class="owl-carousel">
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage1.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage4.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage3.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage5.jpg)"></div>
              </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

    <!-- Demo -->

    <style>


 .owl-test-out .item {

 -webkit-animation: testOut 7s both ease;
 -moz-animation: testOut 7s both ease;
 -o-animation: testOut 7s both ease;
 animation: testOut 7s both ease;
}
.owl-test-in .item {

  -webkit-animation: testIn 7s both ease;
  -moz-animation: testIn 7s both ease;
  -o-animation: testIn 7s both ease;
  animation: testIn 7s both ease;
}
@keyframes testOut {
  0% { background-position: 100% 0;  }
  100% { background-position: 300% 0; }
}
@keyframes testIn {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
 .item {
   width: 500px;
   height: 300px ;
   background-size: 1000px 300px;
   background-repeat:  no-repeat;
   background-position: 100% 0;
 }
    </style>


    <script>
    $(document).ready(function() {

      var owl = $("#owl-demo");
      owl.owlCarousel({
        autoPlay: true ,
        navigation : false,
        singleItem : true,
        pagination: false,
        transitionStyle : "test"
      });

    });
    </script>

  </body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 17.01.2017, 08:40
Интересующийся
Отправить личное сообщение для alexscus Посмотреть профиль Найти все сообщения от alexscus
 
Регистрация: 16.01.2017
Сообщений: 14

Сообщение от рони Посмотреть сообщение
alexscus,
Спасибо за пример!
нужно было мне сразу на примере показать
после добавления следующего правила, стало норм:
.owl-item.owl-fade-out .item{ background-position: -50px 0}

если его убрать, происходит "дергание" при переходе слайдов
минус в том, что для адаптивной верстки придется дописывать новую позицию фона "background-position"
но пока вышло как-то так)

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Owl Carousel - CSS3 Transitions</title>

    <!-- Owl Carousel Assets -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet">



  </head>
  <body>
<div id="owl-demo" class="owl-carousel">
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage1.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage4.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage3.jpg)"></div>
                <div class="item" style="background-image: url(http://newtimes.ru/demos/assets/fullimage5.jpg)"></div>
              </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

    <!-- Demo -->

    <style>
#owl-demo{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
}
.owl-carousel, .sl-carousel {position: relative; height: 100%; z-index: 10;}
.owl-carousel div:not(.owl-controls),
.sl-carousel div:not(.owl-controls)
{height: 100%; z-index: 10;}
.owl-item .item{
  -moz-background-size: 120%; 
  -webkit-background-size: 120%; 
  -o-background-size: 120%;
  background-size: 120%;
  background-repeat: no-repeat;
}
.owl-item.active .item{
  animation: animatedBackground 60s linear infinite;
  -moz-animation: animatedBackground 60s linear infinite;
  -webkit-animation: animatedBackground 60s linear infinite;
  -o-animation: animatedBackground 60s linear infinite;
}

/*hack*/
.owl-item.owl-fade-out .item{
    background-position: -50px 0
}

 /* animatedBackground */
@keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}
@-moz-keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}
@-webkit-keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}
@-o-keyframes animatedBackground {
    0 { background-position: 0 0 }
    100% { background-position: -600px 0 }
}

 /* fade */
.owl-fade-out {
  z-index: 10;
  -webkit-animation: fadeOut .7s both ease;
  -moz-animation: fadeOut .7s both ease;
  animation: fadeOut .7s both ease;
}
.owl-fade-in {
  -webkit-animation: fadeIn .7s both ease;
  -moz-animation: fadeIn .7s both ease;
  animation: fadeIn .7s both ease;
}
@keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

</style>


    <script>
    $(document).ready(function() {

      var owl = $("#owl-demo");
      owl.owlCarousel({
        autoPlay: true ,
        navigation : false,
        singleItem : true,
        pagination: false,
        addClassActive: true,
        transitionStyle : "fade"
      });

    });
    </script>

  </body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
эффект для кнопки kostik2002 jQuery 8 29.11.2010 00:31
Полезная опция для анимации hrundel jQuery 4 12.11.2010 16:30
параметр "width" для рандомной картинки Demska Элементы интерфейса 1 12.09.2010 19:14
Картинки для сайта mycoding (X)HTML/CSS 1 13.04.2010 09:52