Skip to content

Instantly share code, notes, and snippets.

@joshapgar

joshapgar/flip-card.html

Created November 18, 2020 13:48
Show Gist options
  • Save joshapgar/0545b45ab49a31b7df1c05cb98bc2723 to your computer and use it in GitHub Desktop.
Save joshapgar/0545b45ab49a31b7df1c05cb98bc2723 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flip-card.html
<section class="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="header-wrapper">
This is the header.
</div>
<div class="blocks-wrapper">
<div class="row block-row">
<div class="block block-1">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 1
</div>
<div class="content content-2">
Content 2
</div>
<div class="content content-3">
Content 3
</div>
<div class="content content-4">
Content 4
</div>
</div>
</div>
<div class="block block-2">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 5
</div>
<div class="content content-2">
Content 6
</div>
<div class="content content-3">
Content 7
</div>
<div class="content content-4">
Content 8
</div>
</div>
</div>
<div class="block block-3">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 9
</div>
<div class="content content-2">
Content 10
</div>
<div class="content content-3">
Content 11
</div>
<div class="content content-4">
Content 12
</div>
</div>
</div>
<div class="block block-4">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 13
</div>
<div class="content content-2">
Content 14
</div>
<div class="content content-3">
Content 15
</div>
<div class="content content-4">
Content 16
</div>
</div>
</div>
<div class="block block-5">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 17
</div>
<div class="content content-2">
Content 18
</div>
<div class="content content-3">
Content 19
</div>
<div class="content content-4">
Content 20
</div>
</div>
</div>
</div>
<div class="row block-row">
<div class="block block-1">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 21
</div>
<div class="content content-2">
Content 22
</div>
<div class="content content-3">
Content 23
</div>
<div class="content content-4">
Content 24
</div>
</div>
</div>
<div class="block block-2">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 25
</div>
<div class="content content-2">
Content 26
</div>
<div class="content content-3">
Content 27
</div>
<div class="content content-4">
Content 28
</div>
</div>
</div>
<div class="block block-3">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 29
</div>
<div class="content content-2">
Content 30
</div>
<div class="content content-3">
Content 31
</div>
<div class="content content-4">
Content 32
</div>
</div>
</div>
<div class="block block-4">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 33
</div>
<div class="content content-2">
Content 34
</div>
<div class="content content-3">
Content 35
</div>
<div class="content content-4">
Content 36
</div>
</div>
</div>
<div class="block block-5">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 37
</div>
<div class="content content-2">
Content 38
</div>
<div class="content content-3">
Content 39
</div>
<div class="content content-4">
Content 40
</div>
</div>
</div>
</div>
<div class="row block-row">
<div class="block block-1">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 41
</div>
<div class="content content-2">
Content 42
</div>
<div class="content content-3">
Content 43
</div>
<div class="content content-4">
Content 44
</div>
</div>
</div>
<div class="block block-2">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 45
</div>
<div class="content content-2">
Content 46
</div>
<div class="content content-3">
Content 47
</div>
<div class="content content-4">
Content 48
</div>
</div>
</div>
<div class="block block-3">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 49
</div>
<div class="content content-2">
Content 50
</div>
<div class="content content-3">
Content 51
</div>
<div class="content content-4">
Content 52
</div>
</div>
</div>
<div class="block block-4">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 53
</div>
<div class="content content-2">
Content 54
</div>
<div class="content content-3">
Content 55
</div>
<div class="content content-4">
Content 56
</div>
</div>
</div>
<div class="block block-5">
<div class="block-content-wrapper clicked-1">
<div class="face face-1">
Side 1
</div>
<div class="face face-2">
Side 2
</div>
</div>
<div class="content-store">
<div class="content content-1">
Content 57
</div>
<div class="content content-2">
Content 58
</div>
<div class="content content-3">
Content 59
</div>
<div class="content content-4">
Content 60
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
This is the footer.
</div>
</div>
</div>
</div>
</section>
Raw
flip-card.js
$('.block').each(function () {
var firstCardContent = $(this).find('.content-1').html();
$(this).find('.clicked-1 .face-1').html(firstCardContent);
});
var clickTimes = 1;
$('.block').click(function () {
$(this).find('.block-content-wrapper').filter(function () {
return this.className.match(/(^|\s)clicked-\S+/g) !== null;
}).each(function () {
var clickedClass = (this.className.match(/(^|\s)clicked-\S+/g));
var parsedClickClass = clickedClass[0];
var parsedClickNumber = parsedClickClass.split("-");
var newClickedNumber = parseInt(parsedClickNumber[1]) + 1;
if (newClickedNumber % 5 === 0) {
clickTimes = 1
} else {
clickTimes = newClickedNumber;
}
});
$(this).find('.block-content-wrapper').toggleClass('flipped-wrapper');
$(this).find('.block-content-wrapper').removeClass(function (index, className) {
return (className.match (/(^|\s)clicked-\S+/g) || []).join(' ');
});
$(this).find('.block-content-wrapper').addClass('clicked-' + clickTimes);
$(this).find('.block-content-wrapper > .face-1').toggleClass('flipped');
var cardContent = $(this).find('.content-' + clickTimes).html();
if (clickTimes === 1 || clickTimes === 3) {
$(this).find('.clicked-'+clickTimes + ' .face-1').html(cardContent);
} else if(clickTimes === 2 || clickTimes === 4) {
$(this).find('.clicked-'+clickTimes + ' .face-2').html(cardContent);
}
});
Raw
flip-card.less
.calendar-wrapper {
background-color: #ea5a4f;
.block-row {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
max-width: 700px;
}
.block {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-basis: 18.57%;
height: 140px;
margin: 5px;
cursor: pointer;
}
.content-store {
display: none;
}
.block-content-wrapper {
position: absolute;
width: 100%;
height: 100%;
.face {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transition: transform 1s;
transform-style: preserve-3d;
}
.face-1 {
border: 1px dashed #ffffff;
border-radius: 3px;
background-color: #ea5a4f;
transform: rotateY(360deg);
}
.face-2 {
background-color: #f7d999;
border: 0px solid #ffffff;
border-radius: 3px;
transform: rotateY(180deg);
}
.flipped {
transform: rotateY(180deg);
}
}
.flipped-wrapper .face-2 {
transform: rotateY(360deg);
}
}
@joshapgar
Copy link
Author

Screen Shot 2020-11-18 at 8 49 17 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment