i saw website http://www.montere.it/?lang=en , love how use javascript on website. when scroll down, image appear , flip. have tried hard find sample online none of them this. or @ least can give me website has javascript collection.
appreciate help.
i ripped css animation code straight out of page
@keyframes flipiny { 0% { -webkit-transform:perspective(1000px) rotatey(20deg); -ms-transform:perspective(1000px) rotatey(20deg); transform:perspective(1000px) rotatey(20deg); opacity:0 } 100% { -webkit-transform:perspective(1000px) rotatey(0deg); -ms-transform:perspective(1000px) rotatey(0deg); transform:perspective(1000px) rotatey(0deg); opacity:1 } } .flipiny { -webkit-backface-visibility:visible !important; -ms-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipiny; animation-name:flipiny } .animated { -webkit-animation-duration:.7s; animation-duration:.7s; -webkit-animation-fill-mode:both; animation-fill-mode:both }
run jsfiddle http://jsfiddle.net/4of7l5al/4/
basically when user scrolls, add animated
class element.
Comments
Post a Comment