css 新的Zoom Carousel / Slider bootstrap带动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 新的Zoom Carousel / Slider bootstrap带动画相关的知识，希望对你有一定的参考价值。
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#sg-carousel'),
$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 to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
<!--New-Zoom-Crousal-by Sangrai-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all">
<div class="container-fluid">
<div class="row">
<div id="sg-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1" class=""></li>
<li data-target="#carousel" data-slide-to="2" class=""></li>
<li data-target="#carousel" data-slide-to="3" class=""></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner carousel-zoom">
<div class="item active"><img class="img-responsive" src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818" alt="">
<div class="carousel-caption">
<h1 data-animation="animated zoomInLeft" class="cap-txt ">We are amazing</h1>
<p data-animation="animated bounceInDown">Get start your next awesome project</p>
<button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button>
</div>
</div>
<div class="item"><img class="img-responsive" src="https://images.pexels.com/photos/48726/pexels-photo-48726.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
<div class="carousel-caption">
<h1 data-animation="animated zoomInLeft" class="cap-txt">We are smart developers</h1>
<p data-animation="animated bounceInDown">Get start your next awesome project</p>
<button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button>
</div>
</div>
<div class="item"><img class="img-responsive" src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327" alt="">
<div class="carousel-caption animated slideInLeft">
<h1 data-animation="animated zoomInLeft" class="cap-txt">We are innovative</h1>
<p data-animation="animated bounceInDown">Get start your next awesome project</p>
<button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#sg-carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#sg-carousel" data-slide="next">›</a>
</div>
</div>
</div><link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
* CROUSAL-STARTS */
#sg-carousel {
position: relative;
height: 100vh;
}
#sg-carousel .carousel-inner .item {
height: 100vh;
}
.carousel-caption{top:50%;}
.carousel-caption h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
#sg-carousel .carousel-control.left {
top: 48%;
}
#sg-carousel .carousel-control.right {
top: 48%;
}
.uppr-txt {
text-transform: uppercase;
color: #fff;
font-size: 35px;
}
#sg-carousel .carousel-control.left,
#sg-carousel .carousel-control.right {
background-image: none;
background-repeat: no-repeat;
opacity: 0;
text-shadow: none;
transition: all 0.8s ease 0s;
}
.carousel-control {
bottom: 0;
color: #fff;
font-size: 20px;
left: 0;
opacity: 0;
position: absolute;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
top: 0;
width: auto;
transition: all 0.8s ease 0s;
}
.carousel-inner {
box-shadow: 2px 6px 21px;
}
.fa-angle-right,
.fa-angle-left {
font-size: 80px;
}
#sg-carousel:hover .carousel-control.left {
left: 38px;
transition: all .2s ease 0;
}
#sg-carousel:hover .carousel-control.right {
right: 38px;
transition: all .2s ease 0;
}
#sg-carousel:hover .carousel-control.left,
#sg-carousel:hover .carousel-control.right {
opacity: 1;
}
.carousel-inner > .item > a > img,
.carousel-inner > .item > img,
.img-responsive,
.thumbnail a > img,
.thumbnail > img {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
.item.active img {
transition: transform 5000ms linear 0s;
transform: scale(1.05, 1.05);
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
font-size: 80px;
}
.carousel-caption {
left: 60%;
padding-bottom: 5%;
right: 0;
text-align: left;
}
.carousel-caption h1 {
font-family: raavi;
font-size: 60px;
font-weight: 600;
line-height: 18px;
}
.carousel-caption > p {
font-size: 30px;
color: #fff;
}
.carousel-caption > a {
text-transform: uppercase;
color: #fff;
background: #041132;
padding: 6px 12px;
}
.button--tamaya {
border: 2px solid #40a304 !important;
border-radius: 5px;
color: #7986cb;
min-width: 180px;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
}
.button--border-thick {
border: 3px solid;
}
.button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: inherit;
display: block;
float: left;
max-width: 250px;
min-width: 199px;
padding: 1em 7em;
position: relative;
vertical-align: middle;
z-index: 1;
}
.button--tamaya::before {
padding-top: 1em;
top: 0;
}
.button--tamaya::before,
.button--tamaya::after {
background: #40a304;
color: #fff;
content: attr(data-text);
height: 50%;
left: 0;
overflow: hidden;
position: absolute;
transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
width: 100%;
}
.button--tamaya::after {
bottom: 0;
line-height: 0;
}
.button--tamaya:hover::before {
transform: translate3d(0px, -100%, 0px);
}
.button--tamaya:hover::after {
transform: translate3d(0px, 100%, 0px);
color: #40a304;
}
.button--tamaya:hover {
color: #40a304;
font-weight: 600;
}
.carousel-indicators li {
background-color: #b3b5b9;
border-radius: 10px;
cursor: pointer;
display: inline-block;
height: 12px;
margin: 1px;
text-indent: -999px;
width: 12px;
border: 0;
}
.carousel-indicators .active {
background-color: #041132;
height: 12px;
margin: 0;
width: 12px;
border: 0;
}
#sg-carousel h1 {
animation-delay: 1s;
margin-bottom:25px;
}
#sg-carousel p {
animation-delay: 2s;
}
#sg-carousel button {
animation-delay: 3s;
margin-top:25px;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}以上是关于css 新的Zoom Carousel / Slider bootstrap带动画的主要内容，如果未能解决你的问题，请参考以下文章