Skip to content

Commit 0b22e49

Browse files
Mahitej28ClasherKasten
Mahitej28
authored and
ClasherKasten
committed
Typing Animation Javascript Added
1 parent b43a764 commit 0b22e49

File tree

12 files changed

+199
-0
lines changed

12 files changed

+199
-0
lines changed

‎JavaScript/Image_Slider/Image1.png

90.6 KB
Loading

‎JavaScript/Image_Slider/Image2.jpg

13 KB
Loading

‎JavaScript/Image_Slider/Image3.png

20.1 KB
Loading

‎JavaScript/Image_Slider/Index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
<title>Image Slider</title>
7+
<link rel="stylesheet" href="style.css"> <!--Styles and layout of the page can be changed from here -->
8+
</head>
9+
<body>
10+
11+
<div class="ImageSlides">
12+
<div class="Images">
13+
<img src="Image1.png"> <!--Images can be added as per users choice here-->
14+
</div>
15+
<div class="Images">
16+
<img src="Image2.jpg">
17+
</div>
18+
<div class="Images">
19+
<img src="Image3.png">
20+
</div>
21+
22+
<a class="prev-btn slider-btn" onclick="setSlides(-1)"><</a>
23+
<a class="next-btn slider-btn" onclick="setSlides(1)">></a>
24+
</div>
25+
26+
27+
<script src="slider.js"></script>
28+
</body>
29+
</html>

‎JavaScript/Image_Slider/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Image Slider using JavaScript
2+
3+
This script creates an image slider that automatically cycles through a set of images. It's a great way to showcase a series of images or create a banner on your website.
4+
5+
6+
## Setup instructions
7+
8+
- Open the `Image_Slider` directory and run the `index.html` file in the web browser.
9+
- Images can be updated as per users choice
10+
11+
12+
## Output
13+
14+
Video of output is [here](https://www.veed.io/view/ce5cd8e2-1c07-43f8-b76a-1aedf11b8f1f?panel=share)
15+
16+
## Author
17+
18+
Mahima Churi

‎JavaScript/Image_Slider/slider.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
var currentindex = 1
3+
displaySlides(currentindex); //Displaying the first slide
4+
5+
function setSlides(num){
6+
7+
displaySlides(currentindex+=num) //updating which slides to display
8+
9+
}
10+
11+
function displaySlides(num){
12+
var x;
13+
var slides = document.getElementsByClassName("Images");
14+
if (num > slides.length){ //Looping back to first slide
15+
currentindex = 1
16+
}
17+
if (num < 1){ //looping back to last slide
18+
currentindex = slides.length
19+
}
20+
for(x =0 ; x <slides.length ; x++){ //hiding all slides
21+
slides[x].style.display = "none";
22+
23+
}
24+
25+
slides[currentindex - 1].style.display = "block"; //making only one slide visible
26+
}

‎JavaScript/Image_Slider/style.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
*{
2+
overflow: hidden;
3+
}
4+
.Images {
5+
display: none
6+
}
7+
8+
img {
9+
margin: auto;
10+
display: block;
11+
width: 100%;
12+
}
13+
14+
/* Our main images-slideshow container */
15+
.ImageSlides {
16+
max-width: 612px;
17+
position: relative;
18+
margin: auto;
19+
}
20+
21+
/*Style for ">" next and "<" previous buttons */
22+
.slider-btn{
23+
cursor: pointer;
24+
position: fixed;
25+
top: 50%;
26+
width: auto;
27+
padding: 8px 16px;
28+
margin-top: -22px;
29+
color: rgb(0, 0, 0);
30+
font-weight: bold;
31+
font-size: 18px;
32+
transition: 0.6s ease;
33+
border-radius: 0 3px 3px 0;
34+
user-select: none;
35+
background-color: rgba(201, 201, 201, 0.932);
36+
border-radius: 50%;
37+
}
38+
39+
/* setting the position of the previous button towards left */
40+
.prev-btn {
41+
left: 10px;
42+
}
43+
/* setting the position of the next button towards right */
44+
.next-btn {
45+
right: 10px;
46+
}
47+
48+
/* On hover, adding a background color */
49+
.prev-btn:hover,
50+
.next-btn:hover {
51+
color: rgb(0, 0, 0);
52+
background-color: rgba(0, 0, 0, 0.8);
53+
}

‎JavaScript/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,5 @@
3030
- [Who don't follow you on Instagram](Who_Don't_Follow_You)
3131
- [Who unfollowed you on Github](Github_Unfollowers)
3232
- [LinkedIn endorsements](LinkedIn_Endorsements)
33+
- [Type Writer Animation](Typewriter_Animation)
34+
- [Image Slider](Image_Slider)

‎JavaScript/Typewriter_Animation/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Typing Animation using JavaScript
2+
3+
This script creates a typing effect where text is gradually displayed on the screen, as if it's being typed.
4+
It is used to make websites more engaging.
5+
6+
7+
## Setup instructions
8+
9+
- Open the `Typewriter_Animation` directory and run the `index.html` file in the web browser.
10+
- The text content in `typeWriter.js` can be updated as per user's choice
11+
12+
13+
## Output
14+
15+
Video of output is [here](https://www.veed.io/view/04495b8a-6cd6-4683-84fd-b5e01ac74232?panel=share)
16+
17+
## Author
18+
19+
Mahima Churi

‎JavaScript/Typewriter_Animation/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
<title>Typing Animation</title>
6+
</head>
7+
<body>
8+
<div class="typewriter">
9+
<h2 id="text"></h2>
10+
</div>
11+
12+
<script src="typeWriter.js"></script>
13+
</body>
14+
</html>

‎JavaScript/Typewriter_Animation/style.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
*{
2+
overflow: hidden;
3+
background-color: bisque;
4+
}
5+
.typewriter {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
width: 100vw;
11+
}
12+
13+
#text {
14+
font-family: monospace;
15+
font-size: 20px;
16+
white-space: nowrap;
17+
overflow: hidden;
18+
text-align: center;
19+
border-right: 2px solid #000;
20+
}
21+

‎JavaScript/Typewriter_Animation/typeWriter.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const text = "Hello, World..!!";
2+
let index = 0;
3+
const textElement = document.getElementById("text");
4+
5+
function typeWriter() {
6+
textElement.textContent = text.substring(0, index);
7+
8+
if (index < text.length) {
9+
index++;
10+
} else {
11+
index = 0; // Reset index to 0 once it reaches the end of the text
12+
}
13+
14+
setTimeout(typeWriter, 300);
15+
}
16+
17+
typeWriter();

0 commit comments

Comments
 (0)