Skip to content

Commit 049c110

Browse files
Ratheshan03Ratheshan03
committed
card animation completed
1 parent 16fee00 commit 049c110

File tree

7 files changed

+185
-2
lines changed

7 files changed

+185
-2
lines changed

‎3D-Animation-Card/App.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
//Movement Animation to happen
2+
const card = document.querySelector(".card");
3+
const container = document.querySelector(".container");
4+
//Items
5+
const title = document.querySelector(".title");
6+
const sneaker = document.querySelector(".sneaker img");
7+
const purchase = document.querySelector(".purchase");
8+
const description = document.querySelector(".info h3");
9+
const sizes = document.querySelector(".sizes");
10+
11+
//Moving Animation Event
12+
container.addEventListener("mousemove", (e) => {
13+
let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
14+
let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
15+
card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
16+
});
17+
//Animate In
18+
container.addEventListener("mouseenter", (e) => {
19+
card.style.transition = "none";
20+
//Popout
21+
title.style.transform = "translateZ(150px)";
22+
sneaker.style.transform = "translateZ(200px) rotateZ(-25deg)";
23+
description.style.transform = "translateZ(125px)";
24+
sizes.style.transform = "translateZ(100px)";
25+
purchase.style.transform = "translateZ(75px)";
26+
});
27+
//Animate Out
28+
container.addEventListener("mouseleave", (e) => {
29+
card.style.transition = "all 0.5s ease";
30+
card.style.transform = `rotateY(0deg) rotateX(0deg)`;
31+
//Popback
32+
title.style.transform = "translateZ(0px)";
33+
sneaker.style.transform = "translateZ(0px) rotateZ(0deg)";
34+
description.style.transform = "translateZ(0px)";
35+
sizes.style.transform = "translateZ(0px)";
36+
purchase.style.transform = "translateZ(0px)";
37+
});

‎3D-Animation-Card/DJ5401-100-PHSRH000-2000.png‎

637 KB
Loading

‎3D-Animation-Card/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>3D Card Effect</title>
8+
<link rel="title-icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5KHEqHBg0ZW5QpboPhxu6y3Pu5L12k_G2Xg&usqp=CAU" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"/>
10+
<link rel="stylesheet" href="./style.css">
11+
12+
</head>
13+
<body>
14+
<div class="container">
15+
<div class="card">
16+
<div class="sneaker">
17+
<div class="circle"></div>
18+
<img src="./nike-shoe.png" alt="Nike">
19+
</div>
20+
<div class="info">
21+
<h1 class="title">Nike Adapt</h1>
22+
<h3>FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTIONAL COMFORT.</h3>
23+
<div class="sizes">
24+
<button>38</button>
25+
<button>40</button>
26+
<button class="active">42</button>
27+
<button>44</button>
28+
</div>
29+
<div class="purchase">
30+
<button>Purchase</button>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
<script src="App.js"></script>
36+
</body>
37+
</html>

‎3D-Animation-Card/nike-shoe.png‎

619 KB
Loading

‎3D-Animation-Card/style.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Poppins", sans-serif;
9+
min-height: 100vh;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
perspective: 1000px;
14+
}
15+
16+
.container {
17+
width: 50%;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
padding-top: 10px;
22+
padding-bottom: 10px;
23+
}
24+
.card {
25+
transform-style: preserve-3d;
26+
height: 40rem;
27+
width: 31rem;
28+
border-radius: 30px;
29+
padding: 0rem 5rem;
30+
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
31+
}
32+
33+
.sneaker {
34+
min-height: 35vh;
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
}
39+
40+
.sneaker img {
41+
width: 16rem;
42+
z-index: 2;
43+
transition: all 1s ease-out;
44+
}
45+
46+
.circle {
47+
margin-top: 20px;
48+
width: 14rem;
49+
height: 14rem;
50+
background: linear-gradient(
51+
to right,
52+
rgba(102, 101, 101, 0.75),
53+
rgba(8, 83, 156, 0.75)
54+
);
55+
position: absolute;
56+
border-radius: 50%;
57+
z-index: 1;
58+
}
59+
60+
.info h1 {
61+
font-size: 2.5rem;
62+
padding: 1.5rem 0rem;
63+
transition: all 0.75s ease-out;
64+
}
65+
.info h3 {
66+
font-size: 1rem;
67+
padding-top: 0.5rem;
68+
margin-bottom: 2rem;
69+
color: #585858;
70+
font-weight: lighter;
71+
transition: all 0.75s ease-out;
72+
}
73+
.sizes {
74+
display: flex;
75+
justify-content: space-between;
76+
transition: all 0.75s ease-out;
77+
}
78+
.sizes button {
79+
padding: 0.5rem 2rem;
80+
background: none;
81+
border: none;
82+
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
83+
border-radius: 30px;
84+
cursor: pointer;
85+
font-weight: bold;
86+
color: #585858;
87+
}
88+
89+
button.active {
90+
background: #585858;
91+
color: white;
92+
}
93+
94+
.purchase {
95+
margin-top: 3rem;
96+
transition: all 0.75s ease-out;
97+
}
98+
99+
.purchase button {
100+
width: 100%;
101+
padding: 1rem 0rem;
102+
background: #768fff;
103+
border: none;
104+
color: white;
105+
cursor: pointer;
106+
border-radius: 30px;
107+
font-weight: bolder;
108+
}

‎Countdown/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="title-icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5KHEqHBg0ZW5QpboPhxu6y3Pu5L12k_G2Xg&usqp=CAU" />
8-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"/>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"/>
99
<link rel="stylesheet" href="./style.css"/>
1010
<title>Birthday Countdown</title>
1111
</head>

‎Countdown/style.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ h2 {
4848
}
4949

5050
.p-tag {
51-
display: inline-block;
51+
display: flex;
52+
align-items: center;
5253
margin-top: 20px;
5354
right: 0;
5455
bottom: 0;

0 commit comments

Comments
 (0)