Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9ea9bc9

Browse files
Create Animated Images Website Using HTML, CSS and JavaScript
1 parent 8da9552 commit 9ea9bc9

File tree

6 files changed

+149
-0
lines changed

6 files changed

+149
-0
lines changed

‎81. Animated Images Website/app.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
let btns = document.querySelectorAll(".btn");
2+
let banner = document.getElementById("banner");
3+
4+
btns.forEach((btn, index) => {
5+
btn.addEventListener("click", () => {
6+
banner.src = `images/${index}.jpg`;
7+
animation();
8+
btn.classList.add("active");
9+
});
10+
});
11+
12+
function animation() {
13+
banner.classList.add("zoom");
14+
15+
setTimeout(() => {
16+
banner.classList.remove("zoom");
17+
}, 1000);
18+
19+
for (b of btns) {
20+
b.classList.remove("active");
21+
}
22+
}
1.12 MB
Loading[フレーム]
1.69 MB
Loading[フレーム]
1.08 MB
Loading[フレーム]
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Animated Images</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="row">
12+
<div class="col-1">
13+
<h1>Explore Best Properties</h1>
14+
<p>
15+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
16+
saepe voluptatem iusto cupiditate iure qui quas natus facere
17+
voluptates. Recusandae dicta quae doloribus repellat. A
18+
reprehenderit mollitia incidunt vitae nihil.
19+
</p>
20+
<button>More Properties</button>
21+
22+
<ul>
23+
<li class="btn active"></li>
24+
<li class="btn"></li>
25+
<li class="btn"></li>
26+
</ul>
27+
</div>
28+
29+
<div class="col-2">
30+
<img src="images/0.jpg" id="banner" />
31+
</div>
32+
</div>
33+
</div>
34+
35+
<script src="app.js"></script>
36+
</body>
37+
</html>
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
button {
9+
margin-right: -20px;
10+
padding: 15px 40px;
11+
border: 0;
12+
outline: none;
13+
border-radius: 25px;
14+
background: #333;
15+
color: #fff;
16+
font-size: 14px;
17+
cursor: pointer;
18+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
19+
}
20+
21+
.row {
22+
width: 100%;
23+
display: flex;
24+
justify-content: space-between;
25+
background: #fff;
26+
border-radius: 15px;
27+
overflow: hidden;
28+
}
29+
30+
.col-1 .col2 {
31+
overflow: hidden;
32+
}
33+
34+
.col-1 {
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: space-around;
38+
}
39+
40+
.col-2 img {
41+
width: 35rem;
42+
height: 100vh;
43+
margin-bottom: -5px;
44+
}
45+
46+
.col-1 {
47+
padding: 8% 5%;
48+
position: relative;
49+
}
50+
51+
.col-1 p {
52+
color: #777;
53+
line-height: 22px;
54+
margin: 15px 0 30px;
55+
max-width: 500px;
56+
}
57+
58+
ul {
59+
position: absolute;
60+
bottom: 30px;
61+
}
62+
63+
ul li {
64+
list-style: none;
65+
width: 15px;
66+
height: 15px;
67+
display: inline-block;
68+
background: #bfbfbf;
69+
border-radius: 50%;
70+
margin-right: 15px;
71+
cursor: pointer;
72+
}
73+
74+
ul .active {
75+
background: #333;
76+
}
77+
78+
/* JavaScript */
79+
.zoom {
80+
animation: zoom 1s;
81+
}
82+
83+
@keyframes zoom {
84+
0% {
85+
transform: scale(1.2);
86+
}
87+
100% {
88+
transform: scale(1);
89+
}
90+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /