r2d2 of Speak Creative
1/31/2019 - 2:51 AM

Simple Parallax Effect

Simple Parallax script to offset page scroll. If content is overlapping in some cases make sure to assign position: relative; as well as correct z-index.

parallax
content_copyfile_download
// Absolute Positioned Item
window.addEventListener('scroll', function(e) {
  var parallaxFactor = 0.2;
  var scrolled = window.pageYOffset;
  var background = document.querySelector('.background');
  background.style.top = (scrolled * parallaxFactor) + 'px';
});

// Transform Position Item
window.addEventListener('scroll', function(e) {
  var parallaxFactor = 0.2;
  var scrolled = window.pageYOffset;
  var background = document.querySelector('.background');
  background.style.transform = 'translateY(' + (scrolled * parallaxFactor) + 'px)';
});

// Transform based off container element
window.addEventListener('scroll', function(e) {
  var parallaxFactor = 0.2;
  var container = document.querySelector('.container');
  var scrolled = container.pageYOffset;
  var background = document.querySelector('.item');
  background.style.transform = 'translateY(' + (scrolled * parallaxFactor) + 'px)';
});