Timeline on scroll

Developer
Kevin
Size
4,307 Kb
Views
20,240
  1. Timeline on scroll Previews
  2. Timeline on scroll HTML Codes
  3. Timeline on scroll CSS Codes
  4. Timeline on scroll JS Codes

How do I make an timeline on scroll?

What is a timeline on scroll? How do you make a timeline on scroll? This script and codes were developed by Kevin on 13 October 2022, Thursday.

Timeline on scroll Previews
IQ Test

Timeline on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>timeline on scroll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="timeline">	<ul class="steps">	<li>	<div class="accordian">	<h5>Cloud</h5>	<ul id="accord1" class="accordian">	<li>	<header>Determination of Dust Classification (OSHA)</header>	<section>	<p>This procedure is used to determination of whether a combustible dust meets the criteria of a Class II dust as defined by OSHA Explosion Severity criteria. Sample size: 200 g.</p>	</section>	</li>	<li>	<header>Maximum Deflagration Pressure and KST for Combustible Dusts</header>	<section>	<p>ASTM E 1226 Standard Test Method for Pressure and Rate of Pressure Rise for Combustible Dusts is used to determine maximum deflagration pressure, rate of pressure rise, and KST. This information is required to design explosion protection systems	such as pressure relief vents (per NFPA 68) and suppression systems. Sample size: 1000 g</p>	</section>	</li>	<li>	<header>Minimum Explosible Dust Cloud Concentration, MEC</header>	<section>	<p>ASTM E 1515 Standard Test Method for Explosible Concentration of Combustible Dusts is used. Dust samples are ignited at progressively reduced dust cloud concentrations until the concentration is reached at which flame propagation will no longer	occur. Sample size: 500 g</p>	</section>	</li>	<li>	<header>Limiting Oxygen Concentration for Dust Cloud Combustion, LOC (Dusts)</header>	<section>	<p>Conducted in a manner similar to ASTM E2931. Dust cloud deflagration tests are carried out in a 20 liter spherical vessel in which the partial pressure of oxygen is progressively reduced (by partial evacuation and back filling with nitrogen) until	combustion can not be initiated. Sample size: 500 g</p>	</section>	</li>	<li>	<header>Minimum Ignition Energy, MIE, Dust Cloud</header>	<section>	<p>ASTM E 2019 Standard Test Method for Minimum Ignition Energy of a Dust Cloud in Air . Also IEC 1241-2-3. Small quantities of dust are pneumatically thrown into suspension and ignited with an electric spark. The energy content of the spark is progressively	reduced until the dust will no longer ignite. Minimum ignition energy is reported in mJ. Sample size: 200 g</p>	</section>	</li>	<li>	<header>Minimum Dust Cloud Ignition Temperature, TC</header>	<section>	<p>ASTM E 1491 Standard Test Method for Minimum Ignition Temperature of Dust Clouds. Also to IEC 1241-2-1 method B. The minimum temperature at which a dust cloud will ignite is measured by pneumatically conveying a dust sample through a vertically-oriented	cylindrical electric furnace. The minimum ignition temperature is the lowest furnace temperature that results in propagation of flames from the bottom of the furnace. Sample size: 100 g</p>	</section>	</li>	</ul>	</div>	</li>	<li>	<div class="accordian">	<h5>Layer</h5>	<ul>	<li>Hot Surface Ignition Temperature of a Dust Layer, Ts</li>	<li>Auto-Ignition Temperature (Immersion) of a Dust Layer, TL</li>	<li>Spontaneous Ignition of Dusts - Department of Transportation Packaging Classification Test (49 CFR 173), DOT</li>	<li>Packaging Classification of Dust (Flame Propagation)</li>	<li>Volume Resistivity &amp; Volume Resistance of Powders, ASTM D257</li>	</ul>	</div>	</li>	<li>	<div class="accordian">	<h5>Dust Characterization Tests</h5>	<ul>	<li>Percent Combustible Material, Dusts (OSHA)</li>	<li>Particle size (sieve) analysis</li>	<li>Moisture Content</li>	<li>Bulk Density Determination – ASTM D1895 Method A</li>	</ul>	</div>	</li>	<li>	<div class="accordian">	<h5>Liquid Testing</h5>	<ul>	<li>Closed Cup Flash Point</li>	<li>Open Cup Flash Point and Fire Point</li>	<li>ASTM D 4206 Standard Test Method for Sustained Burning of Liquid Mixtures Using the Small Scale Open-Cup Apparatus</li>	<li>Sustained burning of liquids by procedure 49 CFR 173 Appx. H</li>	</ul>	</div>	</li>	</ul> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Timeline on scroll - Script Codes CSS Codes

.timeline .steps {	background: #456990;	margin-left: 0px;	color: #fff;	padding: 20px;
}
.steps > li {	list-style-type: none;	position: relative;	width: 6px;	margin: 0 auto;	padding-top: 50px;	background: #fff;
}
.steps > li:after {	content: '';	position: absolute;	left: 50%;	bottom: 0;	transform: translateX(-50%);	width: 30px;	height: 30px;	border-radius: 50%;	background: inherit;
}
.steps > li div {	position: relative;	bottom: 0;	width: 400px;	padding: 15px 0;	background: #DA9332;
}
.steps > li div:before {	content: '';	position: absolute;	bottom: 7px;	width: 0;	height: 0;	border-style: solid;
}
.steps > li:nth-child(even) div {	left: 45px;
}
.steps > li:nth-child(even) div:before {	left: -15px;	border-width: 8px 16px 8px 0;	border-color: transparent #DA9332 transparent transparent;
}
.steps > li:nth-child(odd) div {	left: -439px;
}
.steps > li:nth-child(odd) div:before {	right: -15px;	border-width: 8px 0 8px 16px;	border-color: transparent transparent transparent #DA9332;
}
/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.steps >li:after {	transition: background .5s ease-in-out;
}
.steps >li.in-view:after {	background: #C85641;
}
.steps >li div {	visibility: hidden;	opacity: 0;	transition: all .5s ease-in-out;
}
.steps >li:nth-child(odd) div {	transform: translate3d(200px, 0, 0);
}
.steps > li:nth-child(even) div {	transform: translate3d(-200px, 0, 0);
}
.steps > li.in-view div {	transform: none;	visibility: visible;	opacity: 1;
}
/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 898px) {	.steps > li div {	width: 250px;	}	.steps > li:nth-child(odd) div {	left: 45px;	}	.steps > li:nth-child(even) div {	right: 289px;	/*250+45-6*/	}	.steps > li:nth-child(odd) div:before {	border-width: 8px 16px 8px 0;	border-color: transparent #C85641 transparent transparent;	}
}
@media screen and (max-width: 600px) {	.steps > li {	margin-left: 20px;	}	.steps >li div {	width: calc(100vw - 91px);	}	.steps > li:nth-child(odd) div {	left: 45px;	}	.steps > li:nth-child(even) div:before,	.steps > li:nth-child(odd) div:before {	left: -15px;	border-width: 8px 16px 8px 0;	border-color: transparent #C85641 transparent transparent;	}
}
.accordian h5 {	display: block;	font-size: 2rem;	margin-bottom: 8px;	color: #fff;	text-align: center;	border-bottom: 3px solid #Da9332;
}
/** ACCORDIAN **/
.accordian {	list-style: none;	margin: 0 auto;	padding: 0.5em;	border-top: 0;	border-radius: 5px;
}
.accordian header {	display: block;	cursor: pointer;	display: block;	font-size: 1rem;	color: #fff;	text-align: left;	border-top: 1px solid #da9332;	border-bottom: 1px solid #da9332;
}
.accordian section {	display: none;	background: #c85641;	border-top: 1px solid #ddd;
}
.accordian section.active {	display: block;
}

Timeline on scroll - Script Codes JS Codes

$(document).ready(function() {	$.fn.ashCordian = function() {	var container = $(this);	container.find('header').click(function() {	if ($(this).siblings('section').css('display') == 'block') {	container.find('section').slideUp(150);	} else {	container.find('section').slideUp(150);	$(this).siblings('section').slideDown(150);	}	});	};	$('#accord1').ashCordian();	$('#accord2').ashCordian();
});
(function() {	'use strict';	// define variables	var items = document.querySelectorAll(".timeline .steps li");	// check if an element is in viewport	function isElementInViewport(el) {	var rect = el.getBoundingClientRect();	return (	rect.top >= 0 &&	rect.left >= 0 &&	rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&	rect.right <= (window.innerWidth || document.documentElement.clientWidth)	);	}	function callbackFunc() {	for (var i = 0; i < items.length; i++) {	if (isElementInViewport(items[i])) {	items[i].classList.add("in-view");	}	}	}	// listen for events	window.addEventListener("load", callbackFunc);	window.addEventListener("resize", callbackFunc);	window.addEventListener("scroll", callbackFunc);
})();
Timeline on scroll - Script Codes
Timeline on scroll - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 13, 2022
Rating 3
Size 4,307 Kb
Views 20,240
Do you need developer help for Timeline on scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (gnarfugh) Script Codes
Name
Fluid Typography
Vertical rhythm less mixin
Highlight table
Hover icon link over image
React Scoreboard
Flex dropdown nav
Final responsive typography forever
Old calculator
Image slider
Hover tabs with column wrapper
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!