Snippets Collections
window.onscroll = function() {
2
    var header = document.getElementById('header-1');
3
    if (window.pageYOffset > 100) {
4
        header.style.backgroundColor = '#015478';
5
    } else {
6
        header.style.backgroundColor = 'transparent';
7
    }
8
}
9
function elementInViewport(myElement) {
  const myElementHeight = myElement.offsetHeight;
  const myElementWidth = myElement.offsetWidth;

  const bounding = myElement.getBoundingClientRect();

  if (
    bounding.top >= -myElementHeight &&
    bounding.left >= -myElementWidth &&
    bounding.right <=
      (window.innerWidth || document.documentElement.clientWidth) +
        myElementWidth &&
    bounding.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) +
        myElementHeight
  ) {
    return true;
  } else {
    return false;
  }
}
const images = document.querySelectorAll('.slide-in');

// debounce function for scrolling
function debounce(func, wait = 20, immediate = true) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};


function checkSlide(e){
  images.forEach((image) => {
    const slideInAt = (window.scrollY + window.innerHeight) - image.height / 2;
    console.log(slideInAt)
  })
}



window.addEventListener('scroll', debounce(checkSlide))
.sqs-announcement-bar {

  overflow: hidden;

}

.sqs-announcement-bar-text {

  -moz-transform: translateX(100%);

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

  -moz-animation: scroll 15s linear infinite;

  -webkit-animation: scroll 15s linear infinite;

  animation: scroll 15s linear infinite;

}

@-moz-keyframes scroll {

  from { -moz-transform: translateX(100%); }

  to { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes scroll {

  from { -webkit-transform: translateX(100%); }

  to { -webkit-transform: translateX(-100%); }

}

@keyframes scroll {

  from {

    -moz-transform: translateX(100%);

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

  }

  to {

    -moz-transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%);

  }

}

.sqs-announcement-bar-close {display:none}

.sqs-announcement-bar-text a {
    text-decoration: none !important;
}
star

Sun Feb 11 2024 21:33:31 GMT+0000 (Coordinated Universal Time)

#change-background #scrolling #header
star

Thu Mar 30 2023 14:40:56 GMT+0000 (Coordinated Universal Time)

#viewport #scrolling
star

Tue Mar 21 2023 23:59:48 GMT+0000 (Coordinated Universal Time)

#scrolling #debounce
star

Tue Dec 28 2021 14:20:32 GMT+0000 (Coordinated Universal Time) https://insidethesquare.co/squarespace-tutorials/scrolling-announcement-bar

#announcement #bar #scrolling #underline #link-text

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension