css - Animating Elements Inside Bootstrap Carousel -
can give me example on how animate css3, elements inside of typical bootstrap carousel?
i going effect (bsstc.com.au). know it's different type of slider, animations inside of after.
i know there class of (.active) added item current in slider when this:
.slide-one .item-one { -webkit-transition: .6s ease-in 0s; -moz-transition: .6s ease-in 0s; -ms-transition: .6s ease-in 0s; -o-transition: .6s ease-in 0s; transition: .6s ease-in 0s; margin:100px 0 0 0; } .slide-one.active .item-one {margin:0;} it works in chrome , nothing else. there better way or different way missing?
here html...
<div id="carousel-1" class="carousel slide carousel-fade hidden-phone"> <ol class="carousel-indicators"> <li data-target="#carousel-1" data-slide-to="0" class="active"></li> <li data-target="#carousel-1" data-slide-to="1"></li> <li data-target="#carousel-1" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item slide-one active"> <div class="container"> <img class="item-one" src="/image/guitar.png" alt="" /> <img class="item-two" src="/image/featured-one.jpg" alt="" /> <a href="#">b</a> </div> </div> <div class="item slide-two"><a href="#">a</a></div> <div class="item slide-three">c</div> </div> <a class="carousel-control left" href="#carousel-1" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel-1" data-slide="next">›</a> </div><!-- carousel --> <script> $('#carousel-1').carousel({ interval:6000 }); </script>
it's old in case if still looking answer here is:
html
<div class="container main-container"> <h1>bootstrap carousel animate.css</h1> <div id="carousel-example-generic" class="carousel slide"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <!-- first slide --> <div class="item active deepskyblue"> <div class="carousel-caption"> <h3 data-animation="animated bounceinleft" data-delay="1000" data-dur="1000"> caption slide 1 </h3> <h3 data-animation="animated bounceinright" data-delay="2000" data-dur="1000"> caption slide 1 </h3> <button class="btn btn-primary btn-lg" data-animation="animated zoominup" data-delay="3000" data-dur="1000">button</button> </div> </div> <!-- /.item --> <!-- second slide --> <div class="item skyblue"> <div class="carousel-caption"> <h3 class="icon-container" data-animation="animated bounceindown" data-delay="1000" data-dur="1000"> <span class="glyphicon glyphicon-heart"></span> </h3> <h3 data-animation="animated bounceinup" data-delay="2000" data-dur="1000"> caption slide 2 </h3> <button class="btn btn-primary btn-lg" data-animation="animated zoominright" data-delay="3000" data-dur="1000">button</button> </div> </div><!-- /.item --> <!-- third slide --> <div class="item darkerskyblue"> <div class="carousel-caption"> <h3 class="icon-container" data-animation="animated zoominleft" data-delay="1000" data-dur="1000"> <span class="glyphicon glyphicon-glass"></span> </h3> <h3 data-animation="animated flipinx" data-delay="2000" data-dur="1000"> caption slide 3 </h3> <button class="btn btn-primary btn-lg" data-animation="animated lightspeedin" data-delay="3000" data-dur="1000">button</button> </div> </div><!-- /.item --> </div><!-- /.carousel-inner --> <!-- controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div><!-- /.carousel --> </div><!-- /.container --> css
.main-container { padding: 10px 15px; } .skyblue { background-color: #22c8ff; } .deepskyblue { background-color: #00bfff; } .darkerskyblue { background-color: #00a6dd; } .carousel-indicators { bottom: 0; } .carousel-control.right, .carousel-control.left { background-image: none; } .carousel .item { min-height: 350px; height: 100%; width:100%; } .carousel-caption h3, .carousel .icon-container, .carousel-caption button { background-color: #09c; } .carousel-caption h3 { padding: .5em; } .carousel .icon-container { display: inline-block; font-size: 25px; line-height: 25px; padding: 1em; text-align: center; border-radius: 50%; } .carousel-caption button { border-color: #00bfff; margin-top: 1em; } h1 { text-align: center; margin-bottom: 30px; font-size: 30px; font-weight: bold; } .p { padding-top: 125px; text-align: center; } .p { text-decoration: underline; } js
(function( $ ) { //function animate slider captions function doanimations( elems ) { //cache animationend event in variable var animendev = 'webkitanimationend animationend'; elems.each(function () { var $this = $(this), $animationtype = $this.data('animation'); // requires add [data-delay] & [data-dur] in markup. values in ms $animdur = parseint($this.data('dur')); $animdelay = parseint($this.data('delay')); $this.css({"animation-duration": $animdur + "ms", "animation-delay": $animdelay + "ms", "animation-fill-mode": "both"}).addclass($animationtype).one(animendev, function () { $this.removeclass($animationtype); }); }); } //variables on page load var $mycarousel = $('#carousel-example-generic'), $firstanimatingelems = $mycarousel.find('.item:first').find("[data-animation ^= 'animated']"); //initialize carousel $mycarousel.carousel(); //animate captions in first slide on page load doanimations($firstanimatingelems); //pause carousel $mycarousel.carousel('pause'); //other slides animated on carousel slide event $mycarousel.on('slide.bs.carousel', function (e) { var $animatingelems = $(e.relatedtarget).find("[data-animation ^= 'animated']"); doanimations($animatingelems); }); })(jquery);
Comments
Post a Comment