Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Эффект анимации для фоновой картинки в слайдере (https://javascript.ru/forum/misc/66895-ehffekt-animacii-dlya-fonovojj-kartinki-v-slajjdere.html)

alexscus 16.01.2017 18:39
Эффект анимации для фоновой картинки в слайдере
 
Приветствую, Уважаемые! :)
Подскажите, как добавить эффект для фоновой картинки каждому активному слайду в плагине 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
 
      });

Dilettante_Pro 16.01.2017 18:47
alexscus,
https://owlcarousel2.github.io/OwlCa...pi-events.html

alexscus 16.01.2017 19:16
Цитата:
Сообщение от Dilettante_Pro (Сообщение 440981)
Спасибо, но у меня используется старая версия, ниже второй.
А нет способа на JQuery ?

рони 16.01.2017 20:33
alexscus,
какая версия ? номер

рони 16.01.2017 20:56
alexscus,
для версий 1.3.2 и выше достаточно добавить css
http://newtimes.ru/demos/transitions.html

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

alexscus 16.01.2017 21:02
Цитата:
Сообщение от рони (Сообщение 440999)
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;

}

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

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

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

рони 16.01.2017 22:50
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>

alexscus 17.01.2017 08:40
Цитата:
Сообщение от рони (Сообщение 441010)
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>

alexscus 17.01.2017 10:07
Поэтому и хотел использовать jquery
но анимацию получается сделать только для первого слайда, а далее перестает работать(
.animate({'background-position-x': '-60px'}, 10000, 'linear');



<!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;
}

 /* 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",
		
		anim
		
      });

      var anim = $('.owl-item.active .item').animate({
          'background-position-x': '-60px'
        }, 10000, 'linear');

      });
    </script>

  </body>
</html>

рони 17.01.2017 10:28
alexscus,
сделайте собственный слайдер :)

рони 17.01.2017 10:34
alexscus,
http://wowslider.com/ru/html-slider-...urns-demo.html

alexscus 17.01.2017 11:56
Цитата:
Сообщение от рони (Сообщение 441059)
alexscus,
сделайте собственный слайдер :)
Ладно, понял, что это геморно, проще другой прикрутить, пойду уже js изучать :) оставлю вариант с css.
Спасибо за потраченное время!
С Уважением! :)


Часовой пояс GMT +3, время: 17:19.