Created
July 26, 2022 22:24
-
-
Save smartium/f82d36506bb29023125aef26321c2bc4 to your computer and use it in GitHub Desktop.
Flip card with JS
This file contains hidden or 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
| <button id="btn" class="btn btn--blue">Flip card</button> | |
| <div class="card js-card"> | |
| <div class="card__wrapper"> | |
| <div class="card__side is-active"> | |
| <h1>FRONT</h1> | |
| <h1>FRONT</h1> | |
| <h1>FRONT</h1> | |
| </div> | |
| <div class="card__side card__side--back"> | |
| <h2>BACK</h2> | |
| <h2>BACK</h2> | |
| <h2>BACK</h2> | |
| <h2>BACK</h2> | |
| <h2>BACK</h2> | |
| <h2>BACK</h2> | |
| </div> | |
| </div> | |
| </div> | |
| <h1 class="title">WHAT THE HEIGHT!</h1> |
This file contains hidden or 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
| let cardTransitionTime = 500; | |
| let $card = $('.js-card') | |
| let switching = false | |
| $('#btn').click(flipCard) | |
| function flipCard () { | |
| if (switching) { | |
| return false | |
| } | |
| switching = true | |
| $card.toggleClass('is-switched') | |
| window.setTimeout(function () { | |
| $card.children().children().toggleClass('is-active') | |
| switching = false | |
| }, cardTransitionTime / 2) | |
| } |
This file contains hidden or 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
| <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
This file contains hidden or 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
| $card-transition-time: 0.5s; | |
| .card { | |
| perspective: 600px; | |
| position: relative; | |
| &.is-switched { | |
| .card__wrapper { | |
| animation: rotate $card-transition-time linear both; | |
| } | |
| } | |
| } | |
| .card__wrapper { | |
| transform-style: preserve-3d; | |
| animation: rotate-inverse $card-transition-time linear both; | |
| } | |
| .card__side { | |
| backface-visibility: hidden; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| &.is-active { | |
| position: static; | |
| } | |
| } | |
| .card__side--back { | |
| transform: rotateY(180deg); | |
| } | |
| @keyframes rotate { | |
| 0% { | |
| transform: rotateY(0); | |
| } | |
| 70% { | |
| transform: rotateY(200deg); | |
| } | |
| 100% { | |
| transform: rotateY(180deg); | |
| } | |
| } | |
| @keyframes rotate-inverse { | |
| 0% { | |
| transform: rotateY(180deg); | |
| } | |
| 70% { | |
| transform: rotateY(-20deg); | |
| } | |
| 100% { | |
| transform: rotateY(0); | |
| } | |
| } | |
| // ignore | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #5a5a5a; | |
| text-align: center; | |
| padding: 1.5rem; | |
| } | |
| h1, | |
| h2 { | |
| margin: 0; | |
| } | |
| .card { | |
| margin: 2rem auto; | |
| max-width: 350px; | |
| } | |
| .card__side { | |
| padding: 1em; | |
| border-radius: 5px; | |
| color: white; | |
| background-color: #ff4136; | |
| } | |
| .card__side--back { | |
| background-color: #0074d9; | |
| } | |
| .btn { | |
| outline: none; | |
| border: none; | |
| border-radius: 5px; | |
| padding: 15px 25px; | |
| font-size: 22px; | |
| text-decoration: none; | |
| margin: 20px; | |
| color: #fff; | |
| position: relative; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| &:active { | |
| transform: translate(0px, 5px); | |
| box-shadow: 0px 1px 0px 0px rgba(#000, .25); | |
| } | |
| } | |
| .btn--blue { | |
| background-color: #55acee; | |
| box-shadow: 0px 5px 0px 0px #3C93D5; | |
| &:hover { | |
| background-color: #6FC6FF; | |
| } | |
| } | |
| .title { | |
| color: #fff; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment