javascript-inviewport
Version:
A simple to use, light weight, zero dependency, pure JavaScript and TypeScript ready plugin that uses the intersection observer to determine whether an element has entered within the windows viewport.
129 lines (118 loc) • 3.87 kB
HTML
<!-- @format -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="A light weight, pure javascript plugin used to determine whether an element is in the viewport."
/>
<meta
name="keywords"
content="inViewport, javascript inViewport, javascript-inViewport, viewport, js viewport plugin, js-inViewport, Ian Rogren, ianrogren, javascript, viewport"
/>
<meta name="robots" content="index, follow" />
<title>inViewport</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="stylesheets/viewport-example.css" />
<link
href="https://fonts.googleapis.com/css2?family=Muli:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/nord-highlightjs@0.1.0/dist/nord.css"
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
/>
<!-- Scritps -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script type="text/javascript" src="./viewport-example.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<header>
<h1><i class="far fa-eye"></i> inViewport</h1>
<p>
A light weight, simple, pure javascript plugin used to determine whether
an element is in the viewport.
</p>
</header>
<main>
<h2>Using inViewport</h2>
<p>
The following are two examples of how to apply inviewport to an element.
Feel free to hop on over to the
<a href="https://github.com/ianrogren/javascript-inViewport/"
>inViewport github</a
>
page for more information.
</p>
<pre>
<code class="javascript">
/**
* Toggle example.
* The threshold is set to one in this example so once the element
* is fully visible the first callback is fired. The second callback
* is then fired if the element is no longer fully visible.
*/
const selectorA = document.getElementById('selector-a');
inViewport(selectorA, 1,
[
() => {
selectorA.classList.add('visible');
console.log('The element is now visible!');
},
() => {
selectorA.classList.remove('visible');
console.log('The element is now hidden.')
},
]
);
/**
* Static example.
* The threshold in this example is set to 0.5 so once the element
* is 50% visible, the callback is fired.
*/
const selectorB = document.getElementById('selector-b');
inViewport(selectorB, 0.5, () => {
selectorB.classList.add('visible');
console.log('The element is now visible!');
});
</code>
</pre>
<!-- Vertical Example -->
<div class="example-wrapper">
<div class="arrow-container">
<h2>Scroll down to test.</h2>
<p>Toggle Example</p>
<i class="far fa-arrow-alt-circle-down"></i>
</div>
<section class="vertical-scroll-example"></section>
</div>
<!-- Horizontal Example -->
<div class="example-wrapper">
<section class="horizontal-scroll-example"></section>
</div>
<!-- Horizontal Notification -->
<div class="example-wrapper horizontal-notification">
<div class="arrow-container">
<h2>Scroll right to test.</h2>
<p>Static example</p>
<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<!-- ¯\_(ツ)_/¯ -->
<div class="shrug">
<i class="far fa-grimace"></i>
</div>
</main>
</body>
</html>