JSFiddle - React, Tailwind, and code Playground

by Snj

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

<a href="javascript:void(0)" class="openbtn" onclick="openNavT()">⍽</a>
    <a href="javascript:void(0)" class="openbtn" onclick="openNavT()">⍽</a>
    <div id="mywrapper" class="mywrapper">
      <div id="myNavT" class="overlay">
        <header>
          <div id="header_info" class="header--page-info my-font">
            <p id="header_pagetitle" class="info__pagetitle"></p>
            <p id="header_pagenr" class="info__pagenr"></p>
          </div>
          <nav>
            <div id="inputSlider_div" class="inputslider">
              <input type="range" class="myrange" id="myrange" min="100" max="500" value="380">
              <a href="javascript:void(0)" class="closebtn my-font" onclick="closeNavT()">&times;</a>
            </div>
            <button id="checkButton" class="checkButton my-font">Run/Check</button>
            <input type="checkbox" class="mycheckbox my-font" id="scrollreverse" name="scrollreverse" value="reverse">
            <label for="scrollreverse" class="my-font">Reversed</label>
          </nav>
        </header>
        <div class="overlay-content">
          <div id="mycontainer" class="mycontainer">
        <section id='steezy'>
          <div class="imgbox" id="id_imgbox">
            <div class="box">
              <a href="https://unsplash.it/700/500/?random" target="_blank"><img class="img_div" src="https://unsplash.it/218/225/?random"></a>
            </div>
            <div class="box">
              <a href="https://unsplash.it/700/500/?random" target="_blank"><img class="img_div" src="https://unsplash.it/353/255/?random"></a>  
            </div>
            <div class="box">
              <a href="https://unsplash.it/700/500/?random" target="_blank"><img class="img_div" src="https://unsplash.it/248/435/?random"></a>  
 ...

CSS

:root { --size: 380px; }
*, * ::before, * ::after { box-sizing: border-box; }

body {
  background-color: #ecf0f1;
  font-family: monospace;
  font-size: 16px;
  overflow: hide; }

.my-font {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
  color: rgb(189, 183, 171);
  text-shadow: rgba(51, 40, 39, 0.64) -4px 4px 11px, rgba(94, 47, 55, 0.71) -1px 3px 15px;
  letter-spacing: 0.4px;
  word-spacing: 5.2px;
  color: #888888;
  font-weight: 550;
  font-style: inherit;
  font-variant: normal;
  text-transform: capitalize;
  text-decoration: none;
  transition: 0.3s; }

.openbtn {
  color: rgba(0, 0, 0, 0.48);
  text-decoration: none;
  position: fixed;
  text-align: center;
  cursor: pointer;
  z-index: 6;
  top: 0;
  right: 25px;
  width: 1em;
  font-size: 45px;
  background-color: rgba(125, 125, 125, 0.53); }
  .openbtn a:hover,
  .openbtn a:focus {
    color: #ccc; }
    
.closebtn {
  font-size: 40px;
  line-height: 0;
  padding: 12px 25px 0px 25px; }

.closebtn a:hover,
.closebtn a:focus {
  color: #ccc; }


.inputslider {
  --size: 380px;
  transition: 0.5s filter linear;
  display: flex; }

.myrange {
  flex-grow: 2;
  /*filter: opacity(0) blur(20px) invert(0.9);*/
  transition: 0.5s filter linear; }

.mywrapper {
    position: fixed; 
    overflow: hide;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    font-family: monospace;
    transition: padding-top .5s ease; }
.inputslider {
  display: flex; }
.myrange {
  flex-grow: 2;
  transition: padding-top .5s ease; }

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    padding-top: 33px;
    height: 100%;
    overflow-y: scroll;
    transition: padding-top .3s ease;
    background-color: #383838 !important;
    transition: width 0.2s; }
header {
  width: calc(100% - 1.4rem);
  height: 150px;
  z-index: 5;
  position: relative;
  position: fixed;
  top: 0;
  background-color: rgb(33, 34, 35);
  box-shadow: rgba(80, 60, 59, 0.48) 0px 6px 20px...

JavaScript

$(".openbtn").hide();
$(document).keyup(function(e){ if(e.keyCode === 27) { closeNavT(); } });
$(function(){
  $("#myNavT").scroll(function(){
    var winTop = $("#myNavT").scrollTop();
    if(winTop >= 30){
      $(".overlay").addClass("sticky-header");
    }else{
      $(".overlay").removeClass("sticky-header");
    }//if-else
  });//win func.
});//ready func.
function openNavT() {
    $(".openbtn").hide();
    $("body").css("overflow-y", "hidden");
    $("#mywrapper").show(); 
    $("#myNavT").css("width", "100%");
    //$("#myNavT").prependTo($("#myNavT").parent()); 
    $(".closebtn").show(); }

function closeNavT() {
    $("#myNavT").css("width", "0%");
    $("#mywrapper").hide(); 
    $("body").css("overflow-y", "auto");
    $(".openbtn").show();
    $(".closebtn").hide(); }

$(document).on('input', '#myrange', function() { document.body.style.setProperty("--size", this.value + "px"); });



//const thisimageload = document.getElementsByClassName("img_div");

const loadElement = (item) => {
  setTimeout(() => {
    item.classList.add("show_image");
    //item.setAttribute("src", item.dataset.src);
    //item.parentElement.parentElement.classList.add("imgbox_shadow");
  }, 1000);
};
const unloadElement = (item) => {
  setTimeout(() => {
    item.classList.remove("show_image");
    //item.dataset.src = item.attributes.src.value;
    //item.parentElement.parentElement.classList.remove("imgbox_shadow");
  }, 1000);
};

const intersect = new IntersectionObserver((entries) => {
  entries.forEach((item) => {
    if (item.isIntersecting) {
      loadElement(item.target);
    } else {
    	console.log(item.target);
      unloadElement(item.target);
    }
  });
});

//intersectionObserver.observe(botten);

//asd = document.querySelectorAll(".img_div");
var asd = $(".img_div");
$.each(asd , function(key, value) {
  intersect.observe(value);
});

function buttFunc() {
  var random;
  for (let step = 0; step < 15; step++) {
      random = Math.floor(Math.random() *...