javascript - Bootstrap carousel zoom transition -
i have images in bootstrap carousel , transition effect want zoom active image , show next image. - http://cssdeck.com/labs/solitary-css3-slider-zoom-transition, zoom of active slide.
i tried change bootstrap's css, doesn't scale active slide, next one.
.carousel-inner .item{ transition-property: transform; transform: scale(1); } .carousel-inner .item.active{ transform: scale(1.5); } /* turning off default transition effect */ .next, .prev, .active.left, .active.right { left: 0; transform: translate3d(0, 0, 0); }
the problem when slide.bs.carousel
event occures next slide active 1 , want zoom effect before switching carousel's slide.
maybe triggering effect js before next slide shown help.
how can achieve this?
here need : http://codepen.io/statix/pen/dnlmxb
simply create carousel-item responsive image inside , transition :
.carousel-holder .carousel-item { position: absolute; left: 0; top: 0; -webkit-transition: 1s ease 0s; transition: 1s ease 0s; -webkit-transform: scale(1); transform: scale(1); } .carousel-holder .carousel-item .img-responsive { position: absolute; left: 0; top: 0; -webkit-transition: 1s ease 0s; transition: 1s ease 0s; transform: perspective(100vw) translatez(15vw); opacity: 0; } .carousel-holder .carousel-item.active .img-responsive { opacity: 1; transform: perspective(100vw) translatez(0); }
enjoy ;)
Comments
Post a Comment