Эффект анимации для фоновой картинки в слайдере
Приветствую, Уважаемые! :)
Подскажите, как добавить эффект для фоновой картинки каждому активному слайду в плагине 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
});
|
|
Цитата:
А нет способа на JQuery ? |
alexscus,
какая версия ? номер |
|
Цитата:
сейчас смотрел, версия не написана(( но просто пробовал добавлять из 2 версии зацикливание, не работало, почитал, что доступно только в версии 2, на этом основании и решил, что меньше.. |
Цитата:
поэтому на 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;
}
|
Цитата:
Спасибо за ссылку! =)
.owl-item.owl-fade-out .slide__box{
background-position: -300px 0
}
|
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>
|
Цитата:
нужно было мне сразу на примере показать :) после добавления следующего правила, стало норм:
.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>
|
| Часовой пояс GMT +3, время: 06:44. |