Demo 198 intersection observer

src/modules/apis/data.ts

@@ -457,22 +457,44 @@ export const data: Array<Demo> = [
       apiDocURL: '',
       canIUseURL: 'https://caniuse.com/rtcpeerconnection',
     },
-  }, {
-  id: 'beacon-api', 
-  emoji: '📡',
-  title: 'Beacon API', 
-  description: 'The Beacon API is used to send an asynchronous and non-blocking request to a web server. The request does not expect a response. This demo shows how it works using an example.', 
-  meta: {
-    author: { 
-      name: 'Raúl',
-      social: {
-        email: '[email protected]', 
-        github: 'raulfb',
-        twitter: 'raulfb28',
+  },
+  {
+    id: 'beacon-api',
+    emoji: '📡',
+    title: 'Beacon API',
+    description:
+      'The Beacon API is used to send an asynchronous and non-blocking request to a web server. The request does not expect a response. This demo shows how it works using an example.',
+    meta: {
+      author: {
+        name: 'Raúl',
+        social: {
+          email: '[email protected]',
+          github: 'raulfb',
+          twitter: 'raulfb28',
+        },
       },
+      apiDocURL: '',
+      canIUseURL: 'https://caniuse.com/?search&#x3D;beacon%20api',
     },
-    apiDocURL: '',
-    canIUseURL: 'https://caniuse.com/?search&#x3D;beacon%20api', 
   },
-}, //replace item here
+  {
+    id: 'intersection-observer',
+    emoji: '👀 + 📡',
+    title: 'Intersection Observer Api',
+    description:
+      'The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document&#x27;s',
+    meta: {
+      author: {
+        name: 'Saad Srabon',
+        social: {
+          email: '[email protected]',
+          github: 'saadsrabon',
+          twitter: '',
+        },
+      },
+      apiDocURL:
+        'https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API',
+      canIUseURL: 'https://caniuse.com/intersectionobserver',
+    },
+  }, //replace item here
 ];

src/modules/apis/intersection-observer/index.ts

@@ -0,0 +1,49 @@
+export const hasSupport = (): boolean => {
+  /**
+   * Check if the `API` has support
+   */
+  return typeof window !== 'undefined' && 'IntersectionObserver' in window;
+};
+
+function init() {
+  const images = document.querySelectorAll('img[data-src]');
+
+  if (!hasSupport()) {
+    console.log('IntersectionObserver API is Not Supported');
+    return;
+  }
+
+  // Create an instance of IntersectionObserver API
+  const observer = new IntersectionObserver(
+    entries => {
+      //you can addobserver herefor line 25
+      entries.forEach(item => {
+        if (item.isIntersecting) {
+          let img = item.target as HTMLImageElement; // get each image
+          img.src = img.dataset.src || ''; // change the image src
+          img.style.width = '300px'; // added little bit animation
+          // observer.unobserve(img); // if we don't want once
+        } else {
+          let img = item.target as HTMLImageElement;
+          img.src = '';
+          img.style.width = '100px';
+        }
+      });
+    },
+    {
+      root: null,
+      threshold: 0.9,
+    }
+  );
+
+  // Observe all images
+  images.forEach(img => {
+    observer.observe(img);
+  });
+}
+
+const run = {
+  init,
+};
+
+export default run;

src/modules/demos/intersection-observer/index.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+
+import { NotSupported } from 'components';
+
+import run, { hasSupport } from '../../apis/intersection-observer';
+
+function IntersectionObserver() {
+  React.useEffect(() => {
+    run.init();
+  }, []);
+
+  if (!hasSupport()) {
+    return <NotSupported />;
+  }
+
+  return (
+    <div
+      className="
+        tw-flex
+        tw-flex-col
+        tw-items-center
+      "
+    >
+      <h2> Scroll To See the image Animations</h2>
+      <div
+        id="space"
+        className="
+          tw-h-[50px]
+          tw-mb-[50px]
+        "
+      />
+
+      <h1
+        className="
+          tw-text-2xl
+          tw-font-bold
+          tw-mb-8
+        "
+      >
+        Lazy Loading Images Demo
+      </h1>
+
+      <div
+        className="
+          tw-flex
+          tw-flex-col
+          tw-space-y-[50px]
+          tw-items-center
+        "
+      >
+        <div
+          className="
+            tw-flex
+            tw-flex-col
+            tw-items-center
+          "
+        >
+          <img
+            data-src="https://vondy-images.com/image-proxy?url=https://protoinfrastack.ivondy.com/media/2IH5BW6uYsXcPcTSRBeuYTv1WfD2MgimxWKc.png&water=true"
+            alt="Image 1"
+            className="
+              tw-w-[100px]
+              tw-h-[200px]
+              tw-block
+              tw-mx-auto
+              tw-bg-gray-100
+              tw-transition-all
+              tw-duration-1000
+              tw-ease-in-out
+              tw-delay-200
+            "
+          />
+        </div>
+
+        <div
+          className="
+            tw-flex
+            tw-flex-col
+            tw-items-center
+          "
+        >
+          <img
+            data-src="https://vondy-images.com/image-proxy?url=https://protoinfrastack.ivondy.com/media/yLmXod1IIg15ELpgNQ23XunuK3nbnEyaXxcz.png&water=true"
+            alt="Image 2"
+            className="
+              tw-w-[100px]
+              tw-h-[200px]
+              tw-block
+              tw-mx-auto
+              tw-bg-gray-100
+              tw-transition-all
+              tw-duration-1000
+              tw-ease-in-out
+              tw-delay-200
+            "
+          />
+        </div>
+
+        <div
+          className="
+            tw-flex
+            tw-flex-col
+            tw-items-center
+          "
+        >
+          <img
+            data-src="https://vondy-images.com/image-proxy?url=https://protoinfrastack.ivondy.com/media/OG3bgF9GOS4RKOjd52sGvdIPve0KzunDTnQQ.png&water=true"
+            alt="Image 3"
+            className="
+              tw-w-[100px]
+              tw-h-[200px]
+              tw-block
+              tw-mx-auto
+              tw-bg-gray-100
+              tw-transition-all
+              tw-duration-1000
+              tw-ease-in-out
+              tw-delay-200
+            "
+          />
+        </div>
+
+        <div
+          className="
+            tw-flex
+            tw-flex-col
+            tw-items-center
+          "
+        >
+          <img
+            data-src="https://vondy-images.com/image-proxy?url=https://protoinfrastack.ivondy.com/media/2IH5BW6uYsXcPcTSRBeuYTv1WfD2MgimxWKc.png&water=true"
+            alt="Image 4"
+            className="
+              tw-w-[100px]
+              tw-h-[200px]
+              tw-block
+              tw-mx-auto
+              tw-bg-gray-100
+              tw-transition-all
+              tw-duration-1000
+              tw-ease-in-out
+              tw-delay-200
+            "
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default IntersectionObserver;