Skip to content

Completed Timeine onScroll Animation #42

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

Merged
merged 7 commits into from
Dec 28, 2021
Merged

Completed Timeine onScroll Animation #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
59122e4
Completed Timeine onScroll Animation
sohan9819 Dec 24, 2021
4759fb7
Merge branch 'main' of https://github.com/Dezenix/frontend-html-css-j…
sohan9819 Dec 25, 2021
4d9d692
completed corrections
sohan9819 Dec 25, 2021
6f24252
Added readme.md file
sohan9819 Dec 26, 2021
4400fcd
add alt to images
bhaveyx Dec 27, 2021
87f5111
added comments , changed some syntaxes and added classes to html tags
sohan9819 Dec 27, 2021
b76f1ad
Merge branch 'Timeline_onScrollAnimation' of https://github.com/sohan…
sohan9819 Dec 27, 2021
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
Binary file added Timelines/Timeline_onScroll_Animation_1/Priview_timeline.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions Timelines/Timeline_onScroll_Animation_1/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## Timeline

<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>

### Preview

![timeline](https://user-images.githubusercontent.com/64985447/147419238-c9c3c195-ed42-4c43-9d70-ec0bd0b2c091.gif)
26 changes: 26 additions & 0 deletions Timelines/Timeline_onScroll_Animation_1/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// listening for the scroll event
window.addEventListener('scroll', () => {
Copy link
Member

@Ovenoboyo Ovenoboyo Dec 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try adding comments wherever possible so that it makes your code flow clear to the reader.

Copy link
Contributor Author

@sohan9819 sohan9819 Dec 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I will try to add comments

const contents = document.querySelectorAll('.child-container'); // selecting all the div with text contents
const logoImages = document.querySelectorAll('.logoImage'); // selecting all logo images
const screenPosition = window.innerHeight; // taking the scroll postion

// checking the content position on scroll event to trigger the animation of the content box
contents.forEach((content) => {
const contentPosition = content.getBoundingClientRect().top;
if (contentPosition < screenPosition) {
content.classList.add('active');
} else {
content.classList.remove('active');
}
});

// checking the logo images position on scroll event to trigger the animation of the logo images
logoImages.forEach((logoImage) => {
const logoImagePosition = logoImage.getBoundingClientRect().top;
if (logoImagePosition < screenPosition) {
logoImage.classList.add('active');
} else {
logoImage.classList.remove('active');
}
});
});
Binary file added Timelines/Timeline_onScroll_Animation_1/images/logoImage_1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Timelines/Timeline_onScroll_Animation_1/images/logoImage_2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Timelines/Timeline_onScroll_Animation_1/images/logoImage_3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Timelines/Timeline_onScroll_Animation_1/images/logoImage_4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 95 additions & 0 deletions Timelines/Timeline_onScroll_Animation_1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Timeline</title>
</head>
<body>
<!-- header added just for demo to user -->
<header class="demoBoxHeader"></header>

<!-- # When ever you need to add a new timeline try to follow to markup format
of the timeline or else you may need to tweak the css a lot -->
<!-- The pattern is like :
<div/><img/><img/><div/> <div/><img/><img/><div/> <div/><img/><img/><div/> -->

<!-- Main timeline markup -->
<div class="container">
<div class="child-container">
<div class="message">
<h1>EXERCISE</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti
mollitia nesciunt vel consequatur ea est quisquam quos eum. Corrupti
ullam placeat nobis eius quia. Quo qui eum quaerat veniam maiores.
</p>
</div>
<div class="date">10-07-2010</div>
</div>
<img
class="logoImage"
src="./images/logoImage_1.png"
alt="image1"
id="logoImage_1"
/>
<img
class="logoImage"
src="./images/logoImage_2.png"
alt="image2"
id="logoImage_2"
/>
<div class="child-container">
<div class="message">
<h1>EXERCISE</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti
mollitia nesciunt vel consequatur ea est quisquam quos eum. Corrupti
ullam placeat nobis eius quia. Quo qui eum quaerat veniam maiores.
</p>
</div>
<div class="date">10-07-2010</div>
</div>
<div class="child-container">
<div class="message">
<h1>EXERCISE</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti
mollitia nesciunt vel consequatur ea est quisquam quos eum. Corrupti
ullam placeat nobis eius quia. Quo qui eum quaerat veniam maiores.
</p>
</div>
<div class="date">10-07-2010</div>
</div>
<img
class="logoImage"
src="./images/logoImage_3.png"
alt="image3"
id="logoImage_3"
/>
<img
class="logoImage"
src="./images/logoImage_4.png"
alt="image4"
id="logoImage_4"
/>
<div class="child-container">
<div class="message">
<h1>EXERCISE</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti
mollitia nesciunt vel consequatur ea est quisquam quos eum. Corrupti
ullam placeat nobis eius quia. Quo qui eum quaerat veniam maiores.
</p>
</div>
<div class="date">10-07-2010</div>
</div>
</div>

<!-- footer added just for demo to user -->
<footer class="demoBoxFooter"></footer>
<script src="./app.js"></script>
</body>
</html>
Loading