16.01.2017, 18:39
|
Интересующийся
|
|
Регистрация: 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
});
|
|
16.01.2017, 18:47
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
|
16.01.2017, 19:16
|
Интересующийся
|
|
Регистрация: 16.01.2017
Сообщений: 14
|
|
Спасибо, но у меня используется старая версия, ниже второй.
А нет способа на JQuery ?
|
|
16.01.2017, 20:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,116
|
|
alexscus,
какая версия ? номер
|
|
16.01.2017, 20:57
|
Интересующийся
|
|
Регистрация: 16.01.2017
Сообщений: 14
|
|
Сообщение от рони
|
alexscus,
какая версия ? номер
|
owl.carousel.min.js
сейчас смотрел, версия не написана((
но просто пробовал добавлять из 2 версии зацикливание, не работало, почитал, что доступно только в версии 2, на этом основании и решил, что меньше..
Последний раз редактировалось alexscus, 16.01.2017 в 21:44.
|
|
16.01.2017, 21:02
|
Интересующийся
|
|
Регистрация: 16.01.2017
Сообщений: 14
|
|
пробовал уже, но там при переходе на др. слайд поддергивание происходит, т.к. при 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;
}
|
|
16.01.2017, 21:24
|
Интересующийся
|
|
Регистрация: 16.01.2017
Сообщений: 14
|
|
хотя сейчас небольшой костыль придумал, чтобы fade эффект не убивать )))
Спасибо за ссылку! =)
.owl-item.owl-fade-out .slide__box{
background-position: -300px 0
}
Последний раз редактировалось alexscus, 16.01.2017 в 21:55.
|
|
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>
|
|
17.01.2017, 08:40
|
Интересующийся
|
|
Регистрация: 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>
|
|
|
|