javascript-inviewport/viewport-example.min.js

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.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("javascript-inviewport",[],t):"object"==typeof exports?exports["javascript-inviewport"]=t():e["javascript-inviewport"]=t()}(this,(function(){return(()=>{var e,t={635:(e,t,r)=>{"use strict";function o(e,t,r){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if("IntersectionObserver"in window&&e){var i=o&&o.root?o.root:null,n=o&&o.rootMargin?o.rootMargin:"0px",s={root:i,rootMargin:n,threshold:Array.isArray(t)&&t.length>0||t>=0&&t<=1?t:.5},a=new IntersectionObserver((function(e,t){e.forEach((function(e){e.intersectionRatio>0&&(Array.isArray(r)?(r[0](),1===r.length&&t.unobserve(e.target)):r()),!1===e.isIntersecting&&Array.isArray(r)&&"function"==typeof r[1]&&r[1]()}))}),s);a.observe(e)}}r.d(t,{default:()=>o})}},r={};function o(e){var i=r[e];if(void 0!==i)return i.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,o),n.exports}return o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e=o(635).default,document.addEventListener("DOMContentLoaded",(function(){var t=document.querySelector(".vertical-scroll-example"),r=document.querySelector(".horizontal-scroll-example"),o=document.querySelector(".shrug"),i=function(t,r){for(var o=function(o){var i=document.createElement("div");i.classList.add(t),r.appendChild(i),"vertical-tile"===t?e(i,1,[function(){i.classList.add("visible")},function(){i.classList.remove("visible")}]):e(i,.5,(function(){i.classList.add("visible")}))},i=0;i<9;i++)o()};t&&i("vertical-tile",t),r&&(i("horizontal-tile",r),e(r,.01,(function(){r.classList.add("visible")}))),o&&e(o,.5,[function(){o.classList.add("visible")},function(){o.classList.remove("visible")}])})),{}})()}));
//# sourceMappingURL=viewport-example.min.js.map