Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>
 <header>Scroll Down</header>
 <article>
  <section>
   <h1>Title</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit. Cursus sit amet dictum sit amet justo donec. Sed ullamcorper morbi tincidunt ornare massa.
    Dolor sit amet consectetur adipiscing elit. Lacus sed turpis tincidunt id aliquet. Vivamus arcu felis bibendum ut tristique et egestas quis. Quis lectus nulla at volutpat diam ut venenatis tellus. Dolor sed viverra ipsum nunc aliquet bibendum enim.
    Sed euismod nisi porta lorem mollis aliquam. Ultricies lacus sed turpis tincidunt. Hac habitasse platea dictumst vestibulum. Maecenas accumsan lacus vel facilisis. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Sed sed risus pretium
    quam vulputate. Aenean et tortor at risus viverra adipiscing at in. A cras semper auctor neque.</p>
   <p>Cras adipiscing enim eu turpis egestas pretium aenean. Nulla facilisi etiam dignissim diam quis enim. Nec ultrices dui sapien eget mi proin sed. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Nec dui nunc mattis enim ut tellus. Pellentesque
    nec nam aliquam sem et. Ac turpis egestas sed tempus urna et. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Maecenas ultricies mi eget mauris.</p>
   <p>Purus in mollis nunc sed. Turpis egestas sed tempus urna et. Sit amet risus nullam eget felis eget. At tellus at urna condimentum mattis pellentesque id nibh tortor. Id diam vel quam elementum pulvinar etiam non quam lacus. Nec sagittis aliquam malesuada
    bibendum arcu. Enim diam vulputate ut pharetra sit amet. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Pellentesque massa placerat duis ultricies. Quisque id diam vel quam elementum pulvinar etiam non quam. Cras tincidunt lobortis feugiat
    vivamus at augue eget. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Condimentum lacinia quis vel eros donec ac odio tempor. Proin nibh nisl condimentum id venenatis a condimentum. Proin sed libero enim sed. Cras tincidunt lobortis feugiat
    vivamus at augue eget arcu.</p>
   <p>Ullamcorper dignissim cras tincidunt lobortis. Diam phasellus vestibulum lorem sed. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. In nibh mauris cursus mattis. Risus viverra adipiscing at in tellus integer feugiat scelerisque
    varius. Tempor nec feugiat nisl pretium fusce id velit ut. Odio eu feugiat pretium nibh ipsum consequat. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet. Ultricies mi eget mauris pharetra et ultrices. Non pulvinar neque laoreet
    suspendisse interdum. Sed elementum tempus egestas sed sed risus pretium quam. Condimentum id venenatis a condimentum vitae. Neque convallis a cras semper auctor neque.</p>
   <p>Lacus vel facilisis volutpat est. Quam quisque id diam vel quam elementum pulvinar. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Lectus vestibulum mattis ullamcorper velit sed. Faucibus pulvinar elementum integer enim neque. Quam
    quisque id diam vel quam elementum pulvinar. Donec adipiscing tristique risus nec. Tincidunt praesent semper feugiat nibh. Volutpat odio facilisis mauris sit amet massa. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Euismod nisi
    porta lorem mollis aliquam ut porttitor leo. Ut tortor pretium viverra suspendisse potenti.</p>
  </section>
  <section>
   <h1>Title</h1>
   <p>Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Elementum curabitur vitae nunc sed velit. Dis parturient montes nascetur ridiculus mus. Sit amet nisl purus in. Dictumst quisque sagittis purus sit amet volutpat. Justo nec ultrices dui
    sapien eget mi proin sed. Magna sit amet purus gravida. Rhoncus urna neque viverra justo nec ultrices dui sapien. Nam aliquam sem et tortor consequat id. Tortor consequat id porta nibh venenatis. Eget felis eget nunc lobortis mattis aliquam faucibus
    purus in. Rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit massa enim nec. Et netus et malesuada fames ac turpis egestas integer. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Aliquet nec ullamcorper sit amet
    risus nullam eget felis. Quam viverra orci sagittis eu.</p>
   <p>Sagittis purus sit amet volutpat consequat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Orci eu lobortis elementum nibh tellus molestie nunc non blandit. Lectus mauris ultrices eros in cursus. Mattis aliquam faucibus purus in massa tempor.
    Viverra orci sagittis eu volutpat odio facilisis mauris sit amet. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Amet facilisis magna etiam tempor orci eu lobortis.
    In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Malesuada pellentesque elit eget gravida cum sociis. Faucibus purus in massa tempor nec. Quam viverra orci sagittis
    eu.
   </p>
  </section>
  <section>
   <h1>Title</h1>
   <p>Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Lacus vestibulum sed arcu non odio euismod lacinia. Eget gravida cum sociis natoque. Dolor sed viverra ipsum nunc aliquet bibendum enim. Quam pellentesque nec nam aliquam. Ac turpis
    egestas maecenas pharetra convallis posuere morbi leo. Facilisi nullam vehicula ipsum a arcu cursus vitae. Urna neque viverra justo nec ultrices dui. Imperdiet proin fermentum leo vel orci. At lectus urna duis convallis convallis tellus id interdum
    velit. Aliquet sagittis id consectetur purus ut.</p>
   <p>In hac habitasse platea dictumst quisque. Neque viverra justo nec ultrices dui sapien eget mi proin. Risus sed vulputate odio ut enim blandit volutpat maecenas. Arcu dictum varius duis at consectetur lorem. In nibh mauris cursus mattis molestie a iaculis
    at. Lacus viverra vitae congue eu consequat ac felis donec et. Non odio euismod lacinia at quis risus sed vulputate odio. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. A scelerisque purus semper eget duis at. Scelerisque
    varius morbi enim nunc faucibus a pellentesque. Risus viverra adipiscing at in tellus. Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Ornare lectus sit amet est. Interdum velit laoreet id donec ultrices tincidunt arcu non sodales. Placerat
    vestibulum lectus mauris ultrices eros in cursus turpis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Placerat in egestas erat imperdiet sed euismod.</p>
   <p>Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. In nulla posuere sollicitudin aliquam. Nibh praesent tristique magna sit amet purus gravida quis. Elementum integer enim neque volutpat ac. Arcu ac tortor dignissim convallis aenean.
    Ullamcorper eget nulla facilisi etiam. Aliquet risus feugiat in ante metus. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus. Lacus vestibulum sed arcu non. Dui faucibus in ornare quam viverra orci sagittis. Donec pretium
    vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Facilisis volutpat est velit egestas dui id ornare. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend.</p>
   <p>Senectus et netus et malesuada. Id interdum velit laoreet id donec ultrices tincidunt. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Quam lacus suspendisse faucibus interdum.
    Nulla facilisi etiam dignissim diam quis. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Odio pellentesque diam volutpat commodo sed egestas egestas. Sit amet
    risus nullam eget felis eget nunc. Nulla pellentesque dignissim enim sit amet. Enim eu turpis egestas pretium. Sit amet cursus sit amet dictum sit amet justo. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Neque laoreet suspendisse
    interdum consectetur libero id faucibus nisl tincidunt. Metus dictum at tempor commodo ullamcorper.</p>
  </section>
  <section>
   <h1>Title</h1>
   <p>Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Amet porttitor eget dolor morbi non arcu risus. Magna fermentum iaculis eu non diam phasellus. Senectus et netus et malesuada fames ac. Magna fermentum iaculis eu non diam. Id
    semper risus in hendrerit gravida rutrum quisque. Eget mauris pharetra et ultrices neque. Urna condimentum mattis pellentesque id. Aenean sed adipiscing diam donec adipiscing. Amet consectetur adipiscing elit duis. Eu lobortis elementum nibh tellus
    molestie nunc. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Ut sem viverra aliquet eget sit amet tellus cras. Magna ac placerat vestibulum lectus mauris ultrices eros. Sed libero enim sed faucibus turpis in. Donec enim diam vulputate
    ut pharetra sit. Purus in massa tempor nec feugiat nisl. At erat pellentesque adipiscing commodo elit at.</p>
   <p>Fermentum posuere urna nec tincidunt praesent semper feugiat. Bibendum arcu vitae elementum curabitur vitae nunc. Est ante in nibh mauris cursus mattis. Non quam lacus suspendisse faucibus. Imperdiet dui accumsan sit amet nulla facilisi. Neque gravida
    in fermentum et sollicitudin ac orci phasellus egestas. Sed egestas egestas fringilla phasellus faucibus scelerisque. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Amet luctus venenatis lectus magna fringilla urna. Urna id volutpat
    lacus laoreet non curabitur gravida arcu ac. Sagittis purus sit amet volutpat consequat mauris nunc. Sapien faucibus et molestie ac feugiat sed lectus vestibulum. Eu facilisis sed odio morbi. Neque ornare aenean euismod elementum nisi quis eleifend.
    Dolor sit amet consectetur adipiscing. Odio ut sem nulla pharetra. Consectetur adipiscing elit duis tristique sollicitudin nibh. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Eget mauris pharetra et ultrices neque. Nisi lacus
    sed viverra tellus in.</p>
   <p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Nulla aliquet enim tortor at auctor urna. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Hac habitasse platea dictumst quisque sagittis purus sit amet. Quis viverra
    nibh cras pulvinar mattis nunc sed blandit. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Magna etiam tempor orci eu lobortis. Facilisi etiam dignissim diam quis enim. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Egestas
    egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Adipiscing vitae proin sagittis nisl rhoncus mattis. Nisl vel pretium lectus quam. Leo duis ut diam quam nulla porttitor massa id neque. Accumsan lacus vel facilisis volutpat
    est velit egestas dui id. In est ante in nibh mauris cursus mattis molestie. Sollicitudin tempor id eu nisl nunc. Pellentesque id nibh tortor id aliquet lectus. Volutpat maecenas volutpat blandit aliquam.</p>
  </section>
  <section>
   <h1>Title</h1>
   <p>Sit amet consectetur adipiscing elit ut aliquam. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Quisque egestas diam in arcu. In hendrerit gravida rutrum quisque non. Diam maecenas sed enim ut sem. Magna fringilla urna porttitor rhoncus
    dolor purus non. Ut consequat semper viverra nam libero. Amet purus gravida quis blandit turpis cursus in hac. Rhoncus mattis rhoncus urna neque viverra. Sit amet tellus cras adipiscing enim eu. Donec ultrices tincidunt arcu non sodales neque sodales
    ut. Imperdiet massa tincidunt nunc pulvinar sapien. Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Morbi tristique senectus et netus et malesuada fames. Turpis egestas maecenas pharetra convallis posuere. Diam volutpat commodo sed egestas
    egestas fringilla phasellus. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Tempor commodo ullamcorper a lacus vestibulum sed arcu non.</p>
   <p>Cursus vitae congue mauris rhoncus aenean vel. Cum sociis natoque penatibus et magnis dis. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Urna molestie at elementum eu facilisis sed odio morbi. Senectus et netus et malesuada fames ac.
    Turpis tincidunt id aliquet risus feugiat. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Libero volutpat sed cras ornare arcu. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Ac turpis egestas integer eget
    aliquet nibh praesent tristique. Scelerisque felis imperdiet proin fermentum leo vel orci. Convallis convallis tellus id interdum velit laoreet id.</p>
   <p>Amet porttitor eget dolor morbi non arcu risus quis varius. Mattis enim ut tellus elementum sagittis vitae et. Non diam phasellus vestibulum lorem sed risus ultricies. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Dolor sit amet
    consectetur adipiscing elit duis tristique sollicitudin nibh. Diam maecenas ultricies mi eget. Gravida cum sociis natoque penatibus et magnis. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Eu mi bibendum neque egestas congue
    quisque egestas. Viverra ipsum nunc aliquet bibendum enim facilisis. Phasellus vestibulum lorem sed risus.</p>
   <p>Metus vulputate eu scelerisque felis imperdiet proin. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Dui accumsan sit amet nulla. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Nunc eget lorem dolor
    sed viverra ipsum nunc. Dignissim suspendisse in est ante in nibh mauris cursus. Facilisis gravida neque convallis a cras semper auctor. Sagittis vitae et leo duis ut. Ornare lectus sit amet est. Dui ut ornare lectus sit amet est placerat in. Habitant
    morbi tristique senectus et netus. Libero nunc consequat interdum varius sit amet mattis vulputate. Quam vulputate dignissim suspendisse in est ante in. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Mi proin sed libero enim
    sed faucibus turpis in. Sit amet luctus venenatis lectus magna. Dui accumsan sit amet nulla facilisi. Sit amet aliquam id diam maecenas ultricies mi eget mauris.</p>
  </section>
  <section>
   <h1>Title</h1>
   <p>Feugiat vivamus at augue eget arcu dictum varius duis at. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Semper quis lectus nulla at volutpat diam ut. Condimentum lacinia quis vel eros donec ac. Pretium viverra suspendisse
    potenti nullam ac tortor vitae purus. Auctor augue mauris augue neque gravida in fermentum et. Sagittis aliquam malesuada bibendum arcu. Netus et malesuada fames ac turpis egestas integer eget. Morbi tincidunt ornare massa eget egestas purus. Egestas
    diam in arcu cursus euismod quis viverra nibh cras. Cursus sit amet dictum sit amet. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Aliquet lectus proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque non tellus.</p>
   <p>Metus aliquam eleifend mi in nulla posuere sollicitudin. Est velit egestas dui id ornare arcu. Nisl rhoncus mattis rhoncus urna neque viverra justo. Dui faucibus in ornare quam viverra orci. Fringilla urna porttitor rhoncus dolor purus non. Tempus
    quam pellentesque nec nam aliquam sem et tortor. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Ultrices vitae auctor eu augue ut lectus arcu. Mattis rhoncus urna neque viverra justo nec ultrices dui. Vitae congue mauris rhoncus
    aenean vel. Pulvinar sapien et ligula ullamcorper malesuada proin libero. Rutrum tellus pellentesque eu tincidunt tortor.</p>
  </section>
 </article>
</main>
              
            
!

CSS

              
                $primary: #2c3e50;
$secondary: #ccc;

body {
	margin: 0;
	width: 100vw;
	height: 400vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	font-family: "Lato";
}

* {
	box-sizing: border-box;
}

h1 {
	font-family: "Montserrat";
	text-transform: uppercase;
	position: relative;
	
	&::before {
		content: "";
		position: absolute;
		left: -86px;
		top: 3px;
		width: 15px;
		height: 15px;
		border: 6px solid $secondary;
		border-radius: 50%;
		z-index: 11;
		background-color: #fff;
	}	
	
	&.active {
		&::before {
			border-color: $primary;
			animation: 250ms ease 0ms forwards 1 pulse;
		}
	}
}

main {
	position: relative;
	width: 100%;
	height: 100%;
}

header {
	width: 100%;
	height: 100vh;
	position: relative;
	z-index: 10;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	background-color: $primary;
	color: #fff;
	
	font-family: "Montserrat";
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: 10px;
}

article {
	padding: 50px 150px;		
	
	// timeline
	&::before, &::after {
		position: fixed;
		left: 75px;
		top: 0;
		width: 5px;
		content: "";
		z-index: 9;
	}
	
	// progress background
	&::before {
		height: 100vh;
		background-color: $secondary;
	}
	
	// progress bar
	&::after {
		height: 50vh;
		background-color: $primary;
	}
	
	&:last-child {
		padding-bottom: 300px;
	}
}

@keyframes pulse {
	0% {
		transform: scale(1,1);
	}
	50% {
		transform: scale(1.5,1.5);
	}
	100% {
		transform: scale(1,1);
	}		
}
              
            
!

JS

              
                const nodes = Array.from(document.getElementsByTagName("h1"));
const cache = {
	viewport: {},
	rects: []
};

// init
window.addEventListener("load", init);

function init() {
	// update the cache and check scroll position
	recache();
	
	// throttle the scroll callback for performance
	document.addEventListener("scroll", throttle(scrollCheck, 10));
	
	// debounce the resize callback for performance
	window.addEventListener("resize", debounce(recache, 50));
};

// update the cache and check scroll position
function recache() {
	// cache the viewport dimensions
	cache.viewport = {
			width: window.innerWidth,
			height: window.innerHeight
	};
	
	// cache node dimensions because we don't really want to 
	// call getBoundingClientRect() during scroll - even when throttled
	nodes.forEach((node, i) => {
		cache.rects[i] = rect(node);
	});	
	
	scrollCheck();
}

// check whether a node is at or above the horizontal halfway mark
function scrollCheck() {
	// instead of relying on calling getBoundingClientRect() everytime,
	// let's just take the cached value and subtract the pageYOffset value
	// and see if the result is at or above the horizontal midline of the window
	const offset = getScrollOffset();
	const midline = cache.viewport.height * 0.5;
	
	cache.rects.forEach((rect, i) => {
		nodes[i].classList.toggle("active", rect.y - offset.y < midline);
	});		
};

// get the scroll offsets
function getScrollOffset() {
	return {
		x: window.pageXOffset,
		y: window.pageYOffset
	};
};

// throttler
function throttle(fn, limit, context) {
	let wait;
	return function() {
		context = context || this;
		if (!wait) {
			fn.apply(context, arguments);
			wait = true;
			return setTimeout(function() {
				wait = false;
			}, limit);
		}
	};
};

// debouncer
function debounce(fn, limit, u) {
	let e;
	return function() {
		const i = this;
		const o = arguments;
		const a = u && !e;
		clearTimeout(e),
			(e = setTimeout(function() {
			(e = null), u || fn.apply(i, o);
		}, limit)),
			a && fn.apply(i, o);
	};

}

// getBoundingClientRect with offsets
function rect(e) {
	const o = getScrollOffset();
	const r = e.getBoundingClientRect();
	
	return {
			x: r.left + o.x,
			y: r.top + o.y
	};
};
              
            
!
999px

Console