猫头鹰旋转木马和视差背景

时间:2017-07-09 11:31:59

标签: parallax owl-carousel-2

我必须使用parallax.js来捕捉猫头鹰旋转木马中的背景图像。例如,我想在http://pixelcog.github.io/parallax.js/中使用https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html 我该怎么做? 笔:https://codepen.io/naaatasha/pen/gRdoej

<div class="owl-carousel slider">
  <div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://trawnik.nazwa.pl/TrawnikProducent2016/wp-content/uploads/slide-strong-1.jpg">
            <div class="container">
                <div class="box">
                    <h2 class="h2 wow fadeIn text-right">co tam</h2>
                    <span class="subtitle wow fadeIn">ihsisdijbvjd</span>
                </div>
            </div>
        </div>
  <div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://www.focus.pl/upload/galleries/19/trawa-19061_l.jpg">
            <div class="container">
                <div class="box">
                    <h2 class="h2">lorem ipsum</h2>
                    <span class="subtitle">asdsk jbsjfd</span>
                </div>
            </div>
        </div>
    </div>


.slider {
    position: relative;
    display: table;
}
.box {
    display: table-cell;
    vertical-align: middle;
    width: 1%;
}
.slide-wrapper {
    height: 800px;
    width: 100%;
    background-color: #333;
    backround-size: cover;
}
.h2 {
    font-size: 40px;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
}
.subtitle {
    display: block;
    font-family: 'latolight', sans-serif;
    font-size: 30px;
    text-transform: uppercase;
}
.parallax-window {
    min-height: 400px;
    background: transparent !important;
}


jQuery(document).ready(function() {
    jQuery(".slider").owlCarousel({
    items: 1,
    loop: true,
    nav: false,
    dots: false,
    autoplay: true,
    autoplayTimeout: 4000,
    animateIn: 'fadeIn',
    //onChange : callback
    });
// function callback(event) {
//     jQuery('.parallax-window').parallax();
// }
});

0 个答案:

没有答案