add onscreen function

src/js/index.js

@@ -1,5 +1,22 @@
 (function() {
-  window.addEventListener("DOMContentLoaded", event => {
+	window.addEventListener('DOMContentLoaded', event => {
-    // TODO
+		function onScreenHandler(entries) {
+			entries.forEach(entry => {
+				if (entry.intersectionRatio > 0) {
+					entry.target.classList.add('is-showing', 'has-shown');
+				} else {
+					entry.target.classList.remove('is-showing');
+				}
+			});
+		}
+
+		document.querySelectorAll('.js-onscreen').forEach(el => {
+			const options = {
+				rootMargin: '0px',
+				threshold: [0, 1],
+			};
+			const observer = new IntersectionObserver(onScreenHandler, options);
+			observer.observe(el);
+		});
 	});
 })();