Skip to content

Added some cool animations #229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Added some cool animations #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
66fa8ad
modified by Mayank
mayank-0103 Mar 12, 2025
45b1577
Added animations
mayank-0103 Mar 12, 2025
cf0e273
Updated animations
mayank-0103 Mar 12, 2025
8443497
modified code
mayank-0103 Mar 12, 2025
64c2616
updated code
mayank-0103 Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 18 additions & 15 deletions auto-text-effect/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Auto Text Effect</title>
</head>
<body>
<h1 id="text">Starting...</h1>

<div>
<label for="speed">Speed:</label>
<input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Auto Text Effect</title>
</head>

<script src="script.js"></script>
</body>
</html>
<body>
<h1 id="text">Starting...</h1>

<div>
<label for="speed">Speed:</label>
<input type="number" name="speed" id="speed" value="5" min="1" max="10" step="1">
</div>

<script src="script.js"></script>
</body>

</html>
23 changes: 11 additions & 12 deletions auto-text-effect/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'We Love Programming!'
let idx = 1
let speed = 300 / speedEl.value
const textEl = document.getElementById('text');
const speedEl = document.getElementById('speed');
const text = 'xAI is an AI company with the mission of advancing scientific discovery and gaining a deeper understanding of our universe.';
let idx = 1;
let speed = 300 / speedEl.value;

writeText()
writeText();

function writeText() {
textEl.innerText = text.slice(0, idx)
textEl.innerText = text.slice(0, idx);

idx++
idx++;

if(idx > text.length) {
idx = 1
idx = 1;
}

setTimeout(writeText, speed)
setTimeout(writeText, speed);
}


speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value);
16 changes: 11 additions & 5 deletions auto-text-effect/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,27 @@
}

body {
background-color: darksalmon;
background-color: rgb(234, 255, 217);
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
width: 80vw;
margin: auto;
}


#text {
text-align: center;
}

div {
position: absolute;
bottom: 20px;
background: rgba(0, 0, 0, 0.1);
background: rgba(9, 105, 31, 0.1);
padding: 10px 20px;
font-size: 18px;
}
Expand All @@ -28,11 +34,11 @@ input {
width: 50px;
padding: 5px;
font-size: 18px;
background-color: darksalmon;
background-color: rgb(172, 234, 201);
border: none;
text-align: center;
}

input:focus {
outline: none;
}
}
60 changes: 34 additions & 26 deletions expanding-cards/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Expanding Cards</title>
</head>
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Explore The World</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Wild Forest</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
<h3>Sunny Beach</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
<h3>City on Winter</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Mountains - Clouds</h3>
</div>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Expanding Cards</title>
</head>

<body>
<div class="container">
<div class="panel active"
style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Explore The World</h3>
</div>
<div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Wild Forest</h3>
</div>
<div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
<h3>Sunny Beach</h3>
</div>
<div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
<h3>City on Winter</h3>
</div>
<div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Mountains - Clouds</h3>
</div>

</div>

<script src="script.js"></script>
</body>

<script src="script.js"></script>
</body>
</html>
</html>
6 changes: 3 additions & 3 deletions expanding-cards/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
panel.addEventListener('click', () => {
removeActiveClasses()
panel.classList.add('active')
removeActiveClasses();
panel.classList.add('active');
})
})

function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
panel.classList.remove('active');
})
}
11 changes: 6 additions & 5 deletions expanding-cards/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ body {
align-items: center;
justify-content: center;
height: 100vh;
/* width is 100vw by default*/
overflow: hidden;
margin: 0;
}
Expand All @@ -25,19 +26,19 @@ body {
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
color: #ffffff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
-webkit-transition: all 700ms ease-in;
transition: all 700ms ease-in;
}

.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
bottom: 30px;
left: 30px;
margin: 0;
opacity: 0;
}
Expand All @@ -60,4 +61,4 @@ body {
.panel:nth-of-type(5) {
display: none;
}
}
}
43 changes: 23 additions & 20 deletions progress-steps/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>

<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>Progress Steps</title>
</head>

<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<script src="script.js"></script>
</body>
</html>

<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
<script src="script.js"></script>
</body>

</html>
53 changes: 24 additions & 29 deletions progress-steps/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,44 @@
const progress = document.getElementById('progress')
const prev = document.getElementById('prev')
const next = document.getElementById('next')
const circles = document.querySelectorAll('.circle')
const progress = document.getElementById('progress');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const circles = document.querySelectorAll('.circle');

let currentActive = 1
let currentActive = 1;

next.addEventListener('click', () => {
currentActive++

if(currentActive > circles.length) {
currentActive = circles.length
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}

update()
update();
})

prev.addEventListener('click', () => {
currentActive--

if(currentActive < 1) {
currentActive = 1
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}

update()
update();
})

function update() {
circles.forEach((circle, idx) => {
if(idx < currentActive) {
circle.classList.add('active')
if (idx < currentActive) {
circle.classList.add('active');
} else {
circle.classList.remove('active')
circle.classList.remove('active');
}
})

const actives = document.querySelectorAll('.active')

progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'
const actives = document.querySelectorAll('.active');
progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + '%';

if(currentActive === 1) {
prev.disabled = true
} else if(currentActive === circles.length) {
next.disabled = true
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false
next.disabled = false
prev.disabled = false;
next.disabled = false;
}
}
Loading