Catching panels on scroll

Developer
Nicolas Udy
Size
5,530 Kb
Views
10,120
  1. Catching panels on scroll Previews
  2. Catching panels on scroll HTML Codes
  3. Catching panels on scroll CSS Codes
  4. Catching panels on scroll JS Codes

How do I make an catching panels on scroll?

JS Controlled panel catching on scroll.For more info on requestAnimationFrame: https://css-tricks.com/using-requestanimationframe/. What is a catching panels on scroll? How do you make a catching panels on scroll? This script and codes were developed by Nicolas Udy on 12 January 2023, Thursday.

Catching panels on scroll Previews
IQ Test

Catching panels on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Catching panels on scroll</title> <link rel='stylesheet prefetch' href='css/wxxzbj.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main class="catch prompt"> <header class="header">	<h1 class="text">NICE<br>catch</h1> </header> <section class="catch__section info"> <aside class="catch__box">	<p class="text">Repellat voluptatibus, id cumque deleniti autem expedita sit, nemo suscipit quibusdam magni, odit sed et iste repudiandae?</p>	<p class="text">Nemo quae pariatur earum nisi vel officiis praesentium delectus dicta sunt vero mollitia illo, eveniet, reiciendis blanditiis molestias at explicabo. Velit ea saepe quam non itaque reprehenderit consequatur ipsam fugiat?</p>	<p class="text">Optio dolore, consequuntur temporibus possimus ipsam eveniet, fugit voluptates eos, iusto neque hic cupiditate.</p>	</aside>	<aside class="catch__box catch__box--dynamic js-catch">	<h2 class="text">insert some sort of<br>big bold statement here</h2>	</aside> </section> <section class="catch__section catch__section--static static"> <aside class="catch__box">	<h2 class="text">i think<br>it's time</h2>	</aside> <aside class="catch__box">	<h2 class="text">we take<br>a break</h2>	</aside> </section> <section class="catch__section catch__section--right long"> <aside class="catch__box catch__box--small">	<p class="text">Praesentium facere quidem blanditiis, corporis in enim aliquam iure molestias pariatur rem expedita est dolorem error quia veniam cum sequi reiciendis impedit dicta, alias et temporibus repellendus.</p>	</aside> <aside class="catch__box">	<h2 class="text">insert some inspiring quote from somebody who probably isn't actually the person who said it in the first place</h2>	</aside> <aside class="catch__box catch__box--dynamic js-catch">	<p class="text">Odit nesciunt blanditiis, itaque deleniti magni corporis minus, in placeat veritatis cum vero reprehenderit.</p>	<h2 class="text">Nemo!</h2>	</aside> </section> <section class="footer">	<h3 class="text">kbye</h3>	<h3 class="text">theEnd</h3> </section>
</main> <script src="js/index.js"></script>
</body>
</html>

Catching panels on scroll - Script Codes CSS Codes

.catch { padding-bottom: 101vh;
}
.catch__section { position: relative; padding-left: 50vw; background-color: #edf1f1;
}
.catch__section--right { padding-left: 0; padding-right: 50vw;
}
.catch__section--right .catch__box--dynamic { left: 50vw;
}
.catch__section--static { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0;
}
.catch__section--static .catch__box { min-height: 0; height: 100vh;
}
.catch__box { width: 50vw; min-height: 200vh; padding: 5vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
}
.catch__box--small { min-height: 0;
}
.catch__box--dynamic { min-height: 0; height: 100vh; padding: 0 5vw; position: absolute; bottom: 100%; left: 0; -webkit-transform: translateY(100%); transform: translateY(100%);
}
.catch__box--dynamic.catch { position: fixed;
}
.catch__box--dynamic.release { position: absolute; bottom: 0; -webkit-transform: translateY(0); transform: translateY(0);
}
.text { font-weight: 900; text-align: center;
}
.header,
.footer { font-size: 4rem; line-height: .875;
}
.header { height: 96vh; color: #edf1f1; background-color: #2b303b; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.info .catch__box:first-child { color: #2b303b; background-color: #39b08d; font-size: 2rem; line-height: 1.25;
}
.info .catch__box:last-child { color: #2b303b; font-size: 3rem; text-transform: uppercase; line-height: .875;
}
.static { font-size: 3rem; line-height: .875;
}
.static .catch__box:first-child { color: #edf1f1; background-color: #2b303b; text-transform: uppercase;
}
.static .catch__box:last-child { color: #2b303b;
}
.long .catch__box:first-child { color: #39b08d; background: #fff; font-size: 2rem; line-height: 1.25;
}
.long .catch__box:nth-child(2) { position: relative; color: #000; font-size: 3.25rem; line-height: .875; text-transform: uppercase;
}
.long .catch__box:nth-child(2)::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: -webkit-linear-gradient(bottom, #4e5863, #edf1f1); background: linear-gradient(to top, #4e5863, #edf1f1); mix-blend-mode: screen;
}
.long .catch__box:last-child { color: #4e5863; background-color: #edf1f1; font-size: 2rem;
}
.long .catch__box:last-child .text:last-child { margin-top: .75rem; color: #39b08d; font-size: 2.75rem; text-transform: uppercase;
}
.footer { width: 100%; height: 102vh; position: fixed; bottom: -2vh; left: 0; z-index: -1;
}
.footer .text { line-height: 51vh; color: #edf1f1;
}
.footer .text:first-child { background-color: #2b303b;
}
.footer .text:last-child { background-color: #cf4646;
}
p + p { margin-top: 1em;
}

Catching panels on scroll - Script Codes JS Codes

(function scrollCatch() { var catchNodes = document.querySelectorAll('.js-catch'); if (catchNodes.length) {	/*# setup #*/	// initialize debounce var buffer;	var parentNodes = [];	// store the parent nodes for faster access	[].forEach.call(catchNodes, function(node) {	parentNodes.push(node.parentNode);	}); /*# update styles #*/ var updateNodes = function() {	// store static values outside loop var vh = window.innerHeight; [].forEach.call(parentNodes, function(node, i) {	// store repeat access values var catchNode = catchNodes[i]; var classList = catchNode.classList; var offset = node.getBoundingClientRect();	// set conditions var top = offset.top < 0; var bottom = offset.bottom < vh; var caught = classList.contains('catch');	// parent's top is above viewport top if (top && !bottom && !caught) { classList.add('catch'); if (classList.contains('release')) classList.remove('release');	// parent's bottom is above viewport bottom } else if (top && bottom && caught) { classList.add('release'); classList.remove('catch');	// parent's top is below viewport top } else if (!top && caught) { classList.remove('catch'); } });	// reset debounce buffer = false; }; // debounce updates var requestUpdate = function() {	// only trigger if no update is in progress if (!buffer) requestAnimationFrame(updateNodes); buffer = true; };	document.addEventListener('scroll', requestUpdate); }
})();
Catching panels on scroll - Script Codes
Catching panels on scroll - Script Codes
Home Page Home
Developer Nicolas Udy
Username udyux
Uploaded January 12, 2023
Rating 3
Size 5,530 Kb
Views 10,120
Do you need developer help for Catching panels 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!

Nicolas Udy (udyux) Script Codes
Name
CSSkateboard loading screen
Flipping ring buttons
Pure CSS Gallery hover effect
CSS only Select
ES6 Game of Snek
Cursor based dynamic perspective logo
Gradient Grid Lines
Snipcart CSS Animations
Pure CSS mountains
Automatic SVG Pie-Charts
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!