Last active
August 29, 2015 13:59
-
-
Save mikeislearning/10880025 to your computer and use it in GitHub Desktop.
Unlimited image flip card animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flip-card { | |
| -webkit-transform-style: preserve3d; | |
| -moz-transform-style: preserve3d; | |
| -ms-transform-style: preserve3d; | |
| -o-transform-style: preserve3d; | |
| transform-style: preserve3d; | |
| -webkit-transition: null 1s null; | |
| -moz-transition: null 1s null; | |
| -ms-transition: null 1s null; | |
| -o-transition: null 1s null; | |
| transition: null 1s null; | |
| } | |
| .backface { | |
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| -ms-backface-visibility: hidden; | |
| -o-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .back{ | |
| -webkit-transform: rotateY(180deg); | |
| -moz-transform: rotateY(180deg); | |
| -ms-transform: rotateY(180deg); | |
| -o-transform: rotateY(180deg); | |
| transform: rotateY(180deg); | |
| } | |
| .dont-show{ | |
| opacity: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="flip-card"> | |
| <img src="http://lorempixel.com/400/200/sports"> | |
| <img src="http://lorempixel.com/400/200/sports"> | |
| <img src="http://lorempixel.com/400/200/sports"> | |
| <img src="http://lorempixel.com/400/200/sports"> | |
| <img src="http://lorempixel.com/400/200/sports"> | |
| <img src="http://lorempixel.com/400/200/sports"> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var numFlipImages = $('.flip-card img').length; | |
| var currentNum = 0; | |
| var flipArray = []; | |
| var counter = 0; | |
| var nextNum = 0; | |
| var prevNum = 0; | |
| $('.flip-card img').each(function(i){ | |
| flipArray.push($(this)); | |
| $(this).addClass('backface dont-show'); | |
| }); | |
| flipArray[currentNum].removeClass('dont-show'); | |
| flipArray[currentNum+1].removeClass('dont-show').addClass('back'); | |
| flipCardAnimation(); | |
| function flipCardAnimation(){ | |
| setTimeout(function(){ | |
| counter++; | |
| currentNum++; | |
| prevNum = currentNum - 1; | |
| nextNum = (currentNum == numFlipImages-1) ? 0 : currentNum + 1; | |
| if(currentNum == numFlipImages){ | |
| currentNum = 0; | |
| prevNum = numFlipImages - 1; | |
| nextNum = 1; | |
| } | |
| $('.flip-card').toggleClass('back'); | |
| // changes made to dom after the animation is completed | |
| setTimeout(function(){ | |
| flipArray[prevNum].addClass('dont-show').removeClass('back'); | |
| flipArray[nextNum].removeClass('dont-show'); | |
| //counter used to add a transformX(180deg) to every second element in the array | |
| if(counter % 2 == 0){ | |
| flipArray[nextNum].addClass('back'); | |
| } | |
| },1200); | |
| flipCardAnimation(); | |
| }, 4000) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment