Skip to content

Commit 9835688

Browse files
HuXn-WebDevHuXn-WebDev
committed
Two Sided Scroll Project Using HTML CSS and JavaScript
1 parent 418c7e8 commit 9835688

File tree

3 files changed

+179
-0
lines changed

3 files changed

+179
-0
lines changed

‎55. Two Sides Scroll/app.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const sliderContainer = document.querySelector(".slider-container");
2+
const slidRight = document.querySelector(".right-slid");
3+
const slidLeft = document.querySelector(".left-slid");
4+
const upButton = document.getElementById("up-btn");
5+
const downButton = document.getElementById("down-btn");
6+
const sliderLength = slidRight.querySelectorAll("div").length;
7+
8+
let activeSlideIndex = 0;
9+
slidLeft.style.top = `-${(sliderLength - 1) * 100}vh`;
10+
11+
downButton.addEventListener("click", () => nextSlide("up"));
12+
upButton.addEventListener("click", () => nextSlide("down"));
13+
14+
function nextSlide(params) {
15+
const sliderHeight = sliderContainer.clientHeight;
16+
17+
if (params === "up") {
18+
activeSlideIndex++;
19+
if (activeSlideIndex > sliderLength - 1) {
20+
activeSlideIndex = 0;
21+
}
22+
}
23+
24+
if (params === "down") {
25+
activeSlideIndex--;
26+
if (activeSlideIndex < 0) {
27+
activeSlideIndex = sliderLength - 1;
28+
}
29+
}
30+
31+
slidRight.style.transform = `translateY(-${
32+
activeSlideIndex * sliderHeight
33+
}px)`;
34+
slidLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`;
35+
}

‎55. Two Sides Scroll/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>Two Side Scroll</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="slider-container">
11+
<section class="left-slid">
12+
<div class="game-one">
13+
<h1>God Of War</h1>
14+
</div>
15+
<div class="game-two">
16+
<h1>The Witcher</h1>
17+
</div>
18+
<div class="game-three">
19+
<h1>Watch Dogs 2</h1>
20+
</div>
21+
<div class="game-four">
22+
<h1>Assassin's Creed</h1>
23+
</div>
24+
</section>
25+
26+
<section class="right-slid">
27+
<div class="img img-one"></div>
28+
<div class="img img-two"></div>
29+
<div class="img img-three"></div>
30+
<div class="img img-four"></div>
31+
</section>
32+
33+
<section class="buttons-container">
34+
<button id="down-btn">&#8595;</button>
35+
<button id="up-btn">&#8593;</button>
36+
</section>
37+
</section>
38+
39+
<script src="app.js"></script>
40+
</body>
41+
</html>

‎55. Two Sides Scroll/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.slider-container {
8+
position: relative;
9+
overflow: hidden;
10+
width: 100vw;
11+
height: 100vh;
12+
}
13+
14+
.left-slid {
15+
height: 100%;
16+
width: 35%;
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
transition: transfrom 0.8s ease-in-out;
21+
}
22+
23+
.left-slid > div {
24+
height: 100%;
25+
width: 100%;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
color: #fff;
30+
}
31+
32+
.left-slid h1 {
33+
font-size: 2.5rem;
34+
}
35+
36+
.right-slid {
37+
height: 100%;
38+
position: absolute;
39+
top: 0;
40+
left: 35%;
41+
width: 65%;
42+
transition: transform 0.8s ease-in-out;
43+
}
44+
45+
.right-slid > div {
46+
background-size: cover;
47+
background-repeat: no-repeat;
48+
background-position: center;
49+
}
50+
51+
.buttons-container button {
52+
position: absolute;
53+
left: 35%;
54+
top: 50%;
55+
}
56+
57+
button {
58+
border: none;
59+
cursor: pointer;
60+
padding: 10px;
61+
background: transparent;
62+
color: #fff;
63+
font-size: 2.2rem;
64+
}
65+
66+
#down-btn {
67+
transform: translateX(-100%);
68+
}
69+
70+
#up-btn {
71+
transform: translateY(-100%);
72+
}
73+
74+
.game-one {
75+
background-color: #1d1815;
76+
}
77+
.game-two {
78+
background-color: #405260;
79+
}
80+
.game-three {
81+
background-color: #73a91d;
82+
}
83+
.game-four {
84+
background-color: #223941;
85+
}
86+
87+
.img {
88+
width: 100%;
89+
height: 100%;
90+
}
91+
92+
.img-one {
93+
background: url(https://images3.alphacoders.com/601/thumb-1920-601862.jpg);
94+
}
95+
.img-two {
96+
background: url(https://images6.alphacoders.com/709/thumb-1920-709832.jpg);
97+
}
98+
.img-three {
99+
background: url(https://images3.alphacoders.com/608/thumb-1920-608887.jpg);
100+
}
101+
.img-four {
102+
background: url(https://images7.alphacoders.com/714/thumb-1920-714040.jpg);
103+
}

0 commit comments

Comments
 (0)