javascriptcsshtml-framework-7dom7

How to blur on scroll using Dom7?


im having a hard time trying to blur a div on scroll, this is my code so far :

i find dom7 very confusing, note that im a beginner , feel free to roast me

document.addEventListener("DOMContentLoaded", function () {
  var pageBg = Dom7.$(".page-bg");
  var lastScrollTop = 0;
  var blurValue = 0;

  window.addEventListener("scroll", function () {
    var currentScrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;

    if (currentScrollTop > lastScrollTop) {
      // Scrolling down
      blurValue += 0.5;
      if (blurValue > 10) {
        blurValue = 10;
      }
    } else {
      // Scrolling up
      blurValue -= 0.5;
      if (blurValue < 0) {
        blurValue = 0;
      }
    }

    pageBg.style.filter = "blur(" + blurValue + "px)";
    lastScrollTop = currentScrollTop;
  });
});

i tried using console.log to see if its reading the script, this is my conclusion:

document.addEventListener("DOMContentLoaded", function () {

    /CONSOLE LOG HERE WORKS FINE/

  var pageBg = Dom7.$(".page-bg");

/ CONSOLE LOG ANYWHERE PAST HERE DOESNT WORK/

This is my less code :

.page-bg {
  background-image: url("../imgs/hero-bg.jpg");
  background-size: cover;
  position: absolute;
  opacity: 1;
  background-position: center;
  min-height: 70vh;
  top: 0;
  width: 100%;
  background-repeat: no-repeat;
  z-index: -1;
  filter: blur(0);

  &::after {
    content: "";
    height: 100vh;
    width: 100%;
    position: absolute;
    background: #000000;
    background: -webkit-linear-gradient(
      360deg,
      #000000 0%,
      rgba(188, 71, 255, 0) 100%
    );
    background: linear-gradient(360deg, #000000 0%, rgba(188, 71, 255, 0) 100%);
    bottom: 0;
    backdrop-filter: blur(var(--blur)); /* Use CSS variable for blur effect */
  }
}

Solution

  • Well I have constructed a snippet. It works. use document.querySelector to select HTMLElements. If you insist on using the library, then if it's like jQuery I think pageBg[0] would work.

    document.addEventListener("DOMContentLoaded", function() {
      var pageBg = document.querySelector(".page-bg");
      var lastScrollTop = 0;
      var blurValue = 0;
    
      window.addEventListener("scroll", function() {
        var currentScrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
    
        if (currentScrollTop > lastScrollTop) {
          // Scrolling down
          blurValue += 0.5;
          if (blurValue > 10) {
            blurValue = 10;
          }
        } else {
          // Scrolling up
          blurValue -= 0.5;
          if (blurValue < 0) {
            blurValue = 0;
          }
        }
    
        pageBg.style.filter = "blur(" + blurValue + "px)";
        lastScrollTop = currentScrollTop;
      });
    });
    .page-bg {
      background-image: url("../imgs/hero-bg.jpg");
      background-size: cover;
      position: absolute;
      opacity: 1;
      background-position: center;
      min-height: 70vh;
      top: 0;
      width: 100%;
      background-repeat: no-repeat;
      z-index: -1;
      filter: blur(0);
    }
    
    .page-bg::after {
      content: "";
      height: 100vh;
      width: 100%;
      position: absolute;
      background: #000000;
      background: -webkit-linear-gradient( 360deg, #000000 0%, rgba(188, 71, 255, 0) 100%);
      background: linear-gradient(360deg, #000000 0%, rgba(188, 71, 255, 0) 100%);
      bottom: 0;
      backdrop-filter: blur(var(--blur));
      /* Use CSS variable for blur effect */
    }
    <div class="page-bg" style="width: 100px; height: 100px; border: 1px solid red; position:sticky; background: url('https://picsum.photos/100')">
    </div>
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf
    
    <h1>content of page</h1>
    sdflksdjf sldfjsldf