Swap means to exchange or to replace. The term card swap itself defines that the cards are getting an exchange. The Card swap can be used to show two cards, one after the other. The first card will be visible and, behind the first card, the second card placed. By clicking a button, the card swaps and shows the second card.
In this blog (Card Swap Animation using HTML, CSS & JavaScript) on the webpage, there are two cards in the webpage where the first card overlaps the second card. The card contains an image, a heading, a few texts, and a button. When you click on the change button first card and, the second card get swapped. This swap is made by JavaScript and the overlap of the card is made by using CSS position absolute property. Again on clicking the change button, the second card goes back and, the first card is made visible at first.
The source code of this project is given below, if you want the source code of this program, you can copy it. You can use this Card Swap Animation with your creativity and, can take this project to the next level.
Card Swap Animation [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html, and, remember, you have to make a file with a .html extension.
body
{
height:100%;
padding-top:30px;
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}
.card-holder
{
position:relative;
}
.card-holder .card
{
position:absolute;
margin-top:40px;
z-index:10;
box-shadow:0px 0px 10px 2px rgba(0,0,0,0.1);
transform: scale(.9);
transition:all .4s;
border-radius: 10px;
padding: 10px;
}
.card-holder .card.active
{
transform: scale(1);
margin-top:0;
box-shadow:0px 0px 30px 5px rgba(0,0,0,0.1);
z-index:100;
transition:all .4s;
}
.btn
{
text-transform:uppercase;
padding:0px 20px;
line-height:40px;
}
.btn:hover{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-img-top{
height:200px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#000;
text-align: center;
}
$(".card-change").click(function(){
$(this).closest(".card-holder").find(".card").toggleClass("active");
});
Thank you for reading our blog. If you face any problem in creating this Card Swap Animation using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team