Skip to content

Commit bccba4c

Browse files
harshita2216harshita2216
authored
Merge pull request #159 from Atif0604/main
Double Vertical Slider
2 parents 798981b + 9e4c20b commit bccba4c

File tree

6 files changed

+238
-1
lines changed

6 files changed

+238
-1
lines changed

‎Double Vertical Slider/Double-Vertical-Slider.png

538 KB
Loading

‎Double Vertical Slider/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<h1>Double Vertical Slider App</h1>
2+
3+
<p>A Simple Double Vertical Slider App written in HTML, CSS and JavaScript .</p>
4+
5+
### Use of the Project:
6+
7+
<p>This App helps to Slide the two different parts of the webpage content at the same time </p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Scrolling!!!
29+
30+
<h3> ScreenShots </h3>
31+
32+
<img width="960" alt="Double-Vertical-Slider" src="https://user-images.githubusercontent.com/64218887/124983592-c660b280-e055-11eb-8569-21918d77552e.png">
33+
34+
<br>
35+

‎Double Vertical Slider/index.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
/>
10+
<link rel="stylesheet" href="./style.css" />
11+
<title>Vertical Slider</title>
12+
</head>
13+
<body>
14+
<div class="slider-container">
15+
<div class="left-slide">
16+
<div style="background-color: #fd3555">
17+
<h1>Nature flower</h1>
18+
<p>all in pink</p>
19+
</div>
20+
<div style="background-color: #2a86ba">
21+
<h1>Bluuue Sky</h1>
22+
<p>with it's mountains</p>
23+
</div>
24+
<div style="background-color: #252e33">
25+
<h1>Lonely castle</h1>
26+
<p>in the wilderness</p>
27+
</div>
28+
<div style="background-color: #ffb866">
29+
<h1>Flying eagle</h1>
30+
<p>in the sunset</p>
31+
</div>
32+
</div>
33+
<div class="right-slide">
34+
<div
35+
style="
36+
background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80');
37+
"
38+
></div>
39+
<div
40+
style="
41+
background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80');
42+
"
43+
></div>
44+
<div
45+
style="
46+
background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80');
47+
"
48+
></div>
49+
<div
50+
style="
51+
background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80');
52+
"
53+
></div>
54+
</div>
55+
<div class="action-buttons">
56+
<button class="down-button">
57+
<i class="fas fa-arrow-down"></i>
58+
</button>
59+
<button class="up-button">
60+
<i class="fas fa-arrow-up"></i>
61+
</button>
62+
</div>
63+
</div>
64+
65+
<script src="./script.js"></script>
66+
</body>
67+
</html>

‎Double Vertical Slider/script.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 slideRight = document.querySelector('.right-slide');
3+
const slideLeft = document.querySelector('.left-slide');
4+
const upButton = document.querySelector('.up-button');
5+
const downButton = document.querySelector('.down-button');
6+
const slidesLength = slideRight.querySelectorAll('div').length;
7+
8+
let activeSlideIndex = 0;
9+
10+
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
11+
12+
upButton.addEventListener('click', () => changeSlide('up'));
13+
downButton.addEventListener('click', () => changeSlide('down'));
14+
15+
const changeSlide = (direction) => {
16+
const sliderHeight = sliderContainer.clientHeight;
17+
if (direction === 'up') {
18+
activeSlideIndex++;
19+
if (activeSlideIndex > slidesLength - 1) {
20+
activeSlideIndex = 0;
21+
}
22+
} else if (direction === 'down') {
23+
activeSlideIndex--;
24+
if (activeSlideIndex < 0) {
25+
activeSlideIndex = slidesLength - 1;
26+
}
27+
}
28+
29+
slideRight.style.transform = `translateY(-${
30+
activeSlideIndex * sliderHeight
31+
}px)`;
32+
slideLeft.style.transform = `translateY(${
33+
activeSlideIndex * sliderHeight
34+
}px)`;
35+
};

‎Double Vertical Slider/style.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
font-family: 'Open Sans', sans-serif;
11+
height: 100vh;
12+
}
13+
14+
.slider-container {
15+
position: relative;
16+
overflow: hidden;
17+
width: 100vw;
18+
height: 100vh;
19+
}
20+
21+
.left-slide {
22+
height: 100%;
23+
width: 35%;
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
transition: transform 0.5s ease-in-out;
28+
}
29+
30+
.left-slide > div {
31+
height: 100%;
32+
width: 100%;
33+
display: flex;
34+
flex-direction: column;
35+
align-items: center;
36+
justify-content: center;
37+
color: #fff;
38+
}
39+
40+
.left-slide h1 {
41+
font-size: 40px;
42+
margin-bottom: 10px;
43+
margin-top: -30px;
44+
}
45+
46+
.right-slide {
47+
height: 100%;
48+
position: absolute;
49+
top: 0;
50+
left: 35%;
51+
width: 65%;
52+
transition: transform 0.5s ease-in-out;
53+
}
54+
55+
.right-slide > div {
56+
background-repeat: no-repeat;
57+
background-size: cover;
58+
background-position: center center;
59+
height: 100%;
60+
width: 100%;
61+
}
62+
63+
button {
64+
background-color: #fff;
65+
border: none;
66+
color: #aaa;
67+
cursor: pointer;
68+
font-size: 16px;
69+
padding: 15px;
70+
}
71+
72+
button:hover {
73+
color: #222;
74+
}
75+
76+
button:focus {
77+
outline: none;
78+
}
79+
80+
.slider-container .action-buttons button {
81+
position: absolute;
82+
left: 35%;
83+
top: 50%;
84+
z-index: 100;
85+
}
86+
87+
.slider-container .action-buttons .down-button {
88+
transform: translateX(-100%);
89+
border-top-left-radius: 5px;
90+
border-bottom-left-radius: 5px;
91+
}
92+
93+
.slider-container .action-buttons .up-button {
94+
transform: translateY(-100%);
95+
border-top-right-radius: 5px;
96+
border-bottom-right-radius: 5px;
97+
}

‎Index.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
| [Weather-App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weather-App) | Simple Weather app written in HTML, CSS, and JavaScript using the APIs for fetching weather and geolocation information |
5050
| [News Webapp](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/flask_news_project) | A web app for searching news made using flask |
5151
| [Score Keeper](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Score-Keeper) |A web Page where user can keep a count of their scores and will tell which player won.|
52-
| [Image Filter App]() |An Awesome Image Filter App written in Html,Css,Javascript and CamanJS.|
52+
| [Image Filter App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Image-Filter-App) |An Awesome Image Filter App written in Html,Css,Javascript and CamanJS.|
5353
| [Form Validation](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/form-validation) |A basic sign up page with all the validations in javascript. |
5454
| [Age Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/age-calculator) | A website which can be used to calculate age of a person in days,months and years . |
5555
| [BMI Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/bmi-calculator) | A basic website which can be used to calculate body mass index |
@@ -58,3 +58,6 @@
5858
| [ConnectFour](https://github.com/Shauryaditya/Web-dev-mini-projects/tree/main/ConnectFour) | This is a simple game which can be played between two players.The player who connects the four bubbles first wins the game . The bubbles could be connected horizontally , vertically or diagonally.The players have to be together since multiplayer feature is not available .|
5959
| [Expand Button](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Expand-Button) |It is a basic website with an expanding button on it. As we click on the button it expands and shrinks after 5 seconds. |
6060
| [Color Guessing Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/color-guessor) |It is a basic color guessing game where the player is given a rgb value and he has to guess the color from that.|
61+
| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider) | This App helps to Slide the two different parts of the webpage content at the same time . |
62+
63+

0 commit comments

Comments
 (0)