Home Web Development JavaScript jQuery Scroll Timeline Section Animation | Scrolling Timeline Contents

jQuery Scroll Timeline Section Animation | Scrolling Timeline Contents

January 14, 2020

3580

How we can create a scrolling timeline feed using HTML CSS JS? Solution: See this jQuery Scroll Timeline Section Animation, Scrolling Timeline Contents.

Previously I have shared some Timeline programs, but this is a scrolling timeline feed. You have to navigate or scroll to check all contents. Basically, Timeline a sequence of events or anything else in the step method. Timelines provide a logical, easy way to tell your story. That can be skills, life events, experience, etc. Most of the websites use a timeline for showing events and own skills or experience.

Today you will learn to create Scrolling Timeline Contents Feed. Basically, there are many paragraph block which belongs to a specific year, and on the left side, there are years navigations. The navigation contains the years 2000-2020, and each year has its own text block. When you will scroll the paragraph block will change, also the active year will change according to the present text section. Also, you can jump to any section by clicking on the navigation items.

So, Today I am sharing jQuery Scroll Timeline Section Animation. There I have used CSS for styling and jQuery for functioning. As we know jQuery is a JS library, that’s why I am putting this post in the JavaScript section. This is a dynamic program, you can change, remove, and insert contents easily just by doing copy paste. You can use this program on your website for multiple purposes.

If you are thinking now how this timeline program actually is, then see the preview given below.

Preview Of Scrolling Timeline Contents Feed

See this video preview to getting an idea of how this program looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Scroll Timeline Section Animation Source Code

Before sharing source code, let’s talk about it. First I have created an article section as the main element and put a list, headings, and text inside it. The list is for the navigation items, by clicking on these you can directly navigate to a specific section. I have placed a heading and 3 paragraph blocks of a single section.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS I gave basic values to elements like size, position, margin, padding, color, etc. The program is not much stylish, that is the reason why there are fewer custom CSS codes. Also, I have used a google font for applying all the text.

jQuery handling here the functions of the program. The function is not based on any ID values, because I had not placed any ID or class to identify a specific section. There I have used JS if{} else{} statements to create the functions. The program is based on jQuery .scroll(function()) command.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>jQuery Scroll Timeline | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">

</head>
<body>
  <article class="timeline">
  <nav class="navigations">
    <ul>
      <li><span>2000</span></li>
      <li><span>2001</span></li>
      <li><span>2002</span></li>
      <li><span>2003</span></li>
      <li><span>2004</span></li>
      <li><span>2005</span></li>
      <li><span>2006</span></li>
      <li><span>2007</span></li>
      <li><span>2008</span></li>
      <li><span>2009</span></li>
      <li><span>2010</span></li>
      <li><span>2011</span></li>
      <li><span>2012</span></li>
      <li><span>2013</span></li>
      <li><span>2014</span></li>
      <li><span>2015</span></li>
      <li><span>2016</span></li>
      <li><span>2017</span></li>
      <li><span>2018</span></li>
      <li><span>2019</span></li>
      <li><span>2020</span></li>
    </ul>
  </nav>
  <section class="sections">
    <div class="wrapper">
      <h2 class="singleSEC">2000</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2001</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2002</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2003</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2004</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2005</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2006</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2007</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2008</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2009</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2010</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2011</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2012</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2013</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2014</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2015</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2016</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2017</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2018</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2019</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
      <h2 class="singleSEC">2020</h2>
      <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>
      <p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>
      <p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>
    </div>
  </section>
</article>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

<!DOCTYPE html>

<head>

<title>jQuery Scroll Timeline | Webdevtrick.com</title>

</head>

<body>

<ul>

</ul>

</nav>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lectus auctor nisi porttitor semper ut vitae augue. Suspendisse egestas pharetra lacinia. Donec sollicitudin velit eget leo cursus, vitae molestie risus posuere.</p>

<p>Suspendisse ac turpis eleifend, dapibus eros sit amet, imperdiet mi. Praesent vitae enim nibh. Etiam eu metus ipsum. Donec rhoncus nunc sed orci consequat consectetur. Sed id varius felis. Sed et lorem ut nisi luctus blandit eget in lacus. Sed ut sapien eu odio ultricies vestibulum.</p>

<p>In non sapien varius, finibus tellus eu, scelerisque mauris. Vivamus ultricies, mi sed rutrum elementum, enim arcu vehicula justo, non rhoncus magna dolor in mauris. Curabitur quis congue metus, sed sollicitudin nibh. Pellentesque felis orci, efficitur ut nunc id, dignissim ultrices tellus.</p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

<p>

</div>

</section>

</article>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/*  Code By Webdevtrick ( https://webdevtrick.com )  */
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: 'Nunito Sans', sans-serif;
  line-height: 1.5;
}

.wrapper {
  margin: 0 auto;
  padding: 0 16.66% 50px;
  width: 100%;
}

article {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

.navigations {
  position: fixed;
  z-index: 99;
  top: 0;
  transition: top .3s ease-out;
}
.navigations ul {
  list-style: none;
  list-style-position: inside;
  margin: 15px 0;
}
.navigations ul li {
  margin: 15px 0;
  padding-left: 0;
  list-style-type: none;
  color: #bfc1c3;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all .3s ease-out;
}
.navigations ul li.active {
  font-weight: bold;
  color: #f94125;
  border-bottom: 1px dotted transparent;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.navigations ul li:hover {
  color: #000;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');

html {

box-sizing: border-box;

}

*::before,

*::after {

box-sizing: inherit;

}

body {

font-family: 'Nunito Sans', sans-serif;

line-height: 1.5;

}

.wrapper {

margin: 0 auto;

padding: 0 16.66% 50px;

width: 100%;

}

article {

position: relative;

max-width: 980px;

margin: 0 auto;

}

.navigations {

position: fixed;

z-index: 99;

top: 0;

transition: top .3s ease-out;

}

.navigations ul {

list-style: none;

list-style-position: inside;

margin: 15px 0;

}

.navigations ul li {

margin: 15px 0;

padding-left: 0;

list-style-type: none;

color: #bfc1c3;

border-bottom: 1px dotted rgba(0, 0, 0, 0.3);

cursor: pointer;

transition: all .3s ease-out;

}

.navigations ul li.active {

font-weight: bold;

color: #f94125;

border-bottom: 1px dotted transparent;

-webkit-transform: scale(1.2);

transform: scale(1.2);

}

.navigations ul li:hover {

color: #000;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

//  Code By Webdevtrick ( https://webdevtrick.com ) 
$(() => {
  let stickyTop = 0,
  scrollTarget = false;

  let timeline = $('.navigations'),
  items = $('li', timeline),
  singleSECs = $('.sections .singleSEC'),
  offsetTop = parseInt(timeline.css('top'));

  const TIMELINE_VALUES = {
    start: 190,
    step: 30 };


  $(window).resize(function () {
    timeline.removeClass('fixed');

    stickyTop = timeline.offset().top - offsetTop;

    $(window).trigger('scroll');
  }).trigger('resize');

  $(window).scroll(function () {
    if ($(window).scrollTop() > stickyTop) {
      timeline.addClass('fixed');
    } else {
      timeline.removeClass('fixed');
    }
  }).trigger('scroll');

  items.find('span').click(function () {
    let li = $(this).parent(),
    index = li.index(),
    singleSEC = singleSECs.eq(index);

    if (!li.hasClass('active') && singleSEC.length) {
      scrollTarget = index;

      let scrollTargetTop = singleSEC.offset().top - 80;

      $('html, body').animate({ scrollTop: scrollTargetTop }, {
        duration: 400,
        complete: function complete() {
          scrollTarget = false;
        } });

    }
  });

  $(window).scroll(function () {
    let viewLine = $(window).scrollTop() + $(window).height() / 3,
    active = -1;

    if (scrollTarget === false) {
      singleSECs.each(function () {
        if ($(this).offset().top - viewLine > 0) {
          return false;
        }

        active++;
      });
    } else {
      active = scrollTarget;
    }

    timeline.css('top', -1 * active * TIMELINE_VALUES.step + TIMELINE_VALUES.start + 'px');

    items.filter('.active').removeClass('active');

    items.eq(active != -1 ? active : 0).addClass('active');
  }).trigger('scroll');
});

// Code By Webdevtrick ( https://webdevtrick.com )

$(() => {

let stickyTop = 0,

scrollTarget = false;

let timeline = $('.navigations'),

items = $('li', timeline),

singleSECs = $('.sections .singleSEC'),

offsetTop = parseInt(timeline.css('top'));

const TIMELINE_VALUES = {

start: 190,

step: 30 };

$(window).resize(function () {

timeline.removeClass('fixed');

stickyTop = timeline.offset().top - offsetTop;

$(window).trigger('scroll');

}).trigger('resize');

$(window).scroll(function () {

if ($(window).scrollTop() > stickyTop) {

timeline.addClass('fixed');

} else {

timeline.removeClass('fixed');

}

}).trigger('scroll');

items.find('span').click(function () {

let li = $(this).parent(),

index = li.index(),

singleSEC = singleSECs.eq(index);

if (!li.hasClass('active') && singleSEC.length) {

scrollTarget = index;

let scrollTargetTop = singleSEC.offset().top - 80;

$('html, body').animate({ scrollTop: scrollTargetTop }, {

duration: 400,

complete: function complete() {

scrollTarget = false;

} });

}

});

$(window).scroll(function () {

let viewLine = $(window).scrollTop() + $(window).height() / 3,

active = -1;

if (scrollTarget === false) {

singleSECs.each(function () {

if ($(this).offset().top - viewLine > 0) {

return false;

}

active++;

});

} else {

active = scrollTarget;

}

timeline.css('top', -1 * active * TIMELINE_VALUES.step + TIMELINE_VALUES.start + 'px');

items.filter('.active').removeClass('active');

items.eq(active != -1 ? active : 0).addClass('active');

}).trigger('scroll');

});

That’s It. Now you have successfully created jQuery Scroll Timeline Section Animation, Scrolling Timeline Contents Feed. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

Ngô Thoại Van February 25, 2020 At 3:56 am

Hello,
Thanks for your guide.
But this code not work correct.
You can test it by add a paragaraph to header of this timeline .
Col timeline is over.
I thinks you can fix this bug .
Regard,

Reply

jQuery Scroll Timeline Section Animation | Scrolling Timeline Contents

Preview Of Scrolling Timeline Contents Feed

jQuery Scroll Timeline Section Animation Source Code

1 COMMENT

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY