This code snippet helps you to create a card with a flip animation. It selects all the elements with the class name “card” using the document.querySelectorAll() method and assigns them to the “cards” variable. It then defines a function called “transition” that toggles the “active” class on the clicked element.
Finally, it loops through all the cards using forEach() and attaches a click event listener to each one, which calls the “transition” function when the card is clicked. So, when a card is clicked, it will toggle the “active” class on that element.
How to Create Company Cards with Flip Animation using jQuery
First of all, load the following assets into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald:500,600" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
Create the HTML structure for the flip card as follows:
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img1"></div>
<div class="info">
<h2>Super S</h2>
<p>A stand-on with an exceptional compact stance. Great for tight spaces and trailering.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<div class="reviews">
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs><path d="M0 0h24v24H0V0z" id="a"/></defs><clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><path clip-path="url(#b)" d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
</svg>
<p>23 Reviews</p>
</div>
<ul>
<li>Manage backyard gates with ease with the 36" deck option</li>
<li>Your choice of deck sizes ranging from 36", 48", 52" and 60"</li>
<li>Updated hip bolstering offers superior operator comfort and positioning</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Super Z HyperDrive</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed & reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<div class="reviews">
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<p>39 Reviews</p>
</div>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img3"></div>
<div class="info">
<h2>Vanguard Power</h2>
<p>If you need a tough, commercial grade engine that makes you more productive, look to Vanguard.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<div class="reviews">
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<p>26 Reviews</p>
</div>
<ul>
<li>V-Twin OHV Technology provides superior balance, low vibration, lower emissions, better fuel economy and higher HP/Weight</li>
<li>Advanced Debris Management keeps engine clean and cool for enhanced durability and performance</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
Now, style the flip card using the following CSS styles:
*, *:after, *:before {
box-sizing: border-box;
}
h2, h4, p, ul, li {
margin: 0;
padding: 0;
}
h2, h4 {
font-family: "Oswald", sans-serif;
text-transform: uppercase;
color: #333333;
}
h2 {
font-size: 27px;
font-weight: 500;
letter-spacing: -0.2px;
margin-bottom: 10px;
}
p, li {
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #555;
line-height: 22px;
}
ul, li {
text-decoration: none;
list-style: disc outside;
}
ul {
padding-left: 20px;
}
svg {
margin: 0px;
min-width: 24px;
min-height: 24px;
}
body {
background-color: #dadce2;
background-image: linear-gradient(140deg, white, #dadce2);
margin: 0;
width: 100vw;
min-height: 450px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.cardContainer {
position: relative;
width: 300px;
height: 400px;
min-width: 300px;
min-height: 400px;
margin: 4px;
perspective: 1000px;
}
.active {
transform: translateZ(0px) rotateY(180deg) !important;
}
.active:after {
display: none;
}
.card {
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
-moz-backface-visibility: hidden;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0 14px 50px -4px rgba(0, 0, 0, 0.15);
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4);
}
.card:hover {
transform: translateZ(0px);
}
.card:hover:after {
opacity: 1;
}
.card .side {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: white;
}
.card .front {
z-index: 2;
}
.card .back {
transform: rotateY(180deg);
}
.card .info {
padding: 16px;
}
.front .img {
background-color: #dadce2;
background-position: center;
background-size: cover;
border-radius: 5px 5px 0 0;
width: 100%;
height: 250px;
}
.front .img1 {
background-image: url(http://i.imgur.com/1aE1nMA.jpg);
}
.front .img2 {
background-image: url(http://i.imgur.com/2p9VXAn.jpg);
}
.front .img3 {
background-image: url(http://i.imgur.com/I5ABT2v.jpg);
}
.back {
position: relative;
}
.back h2 {
margin-top: 6px;
margin-bottom: 18px;
}
.back .reviews {
display: flex;
align-items: center;
margin-bottom: 12px;
cursor: pointer;
}
.back .reviews p {
color: #c4c4c4;
font-weight: 300;
margin: 1px 0 0 6px;
transition: 0.3s ease-in-out;
}
.back .reviews:hover p {
color: #555;
}
.back li {
line-height: 22px;
margin: 2px 0 6px 0;
}
.back .btn {
position: absolute;
bottom: 16px;
width: calc(100% - 32px);
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFC324;
background-image: linear-gradient(-90deg, #FFB714, #FFE579);
border-radius: 5px;
cursor: pointer;
}
.back .btn:hover h4 {
transform: translateX(0px);
}
.back .btn:hover svg {
transform: translateX(0px);
opacity: 1;
}
.back .btn h4 {
transform: translateX(12px);
transition: transform 0.3s ease-out;
}
.back .btn svg {
margin: 1px 0 0 4px;
transform: translateX(-8px);
opacity: 0;
transition: all 0.3s ease-out;
}
Finally, add the following JavaScript function for its functionality:
const cards = document.querySelectorAll('.card');
function transition() {
if (this.classList.contains('active')) {
this.classList.remove('active');
} else {
this.classList.add('active');
}
}
cards.forEach(card => card.addEventListener('click', transition));
That’s all! hopefully, you have successfully created company cards with flip animation using jQuery. If you have any questions or suggestions, feel free to comment below.
