Updated test with animate on scroll
Codepen here https://codepen.io/rpg2019/pen/ExKMMBa
CSS
#logo {
margin: 2rem auto;
width: 320px;
height: 160px;
background: #000 url('gamez-gear-sprite-360.jpg') no-repeat 0 0;
box-shadow:
rgba(17, 104, 151, 0.25) -20px 15px 60px,
rgba(201, 113, 12, 0.15) 5px -5px 20px;
}
JS
document.addEventListener('DOMContentLoaded', function (event) {
function elementInViewY (element, height = 0) {
const view = element.getBoundingClientRect()
return (
view.top >= -height && view.bottom <= (window.innerHeight || document.documentElement.clientHeight) + height
)
}
/**
* @param {Function} handler - function for scroll event to call
* @param {Number} wait - milliseconds between each frame on scroll event
*/
function throttle (handler, wait = 60) {
let timer = null
return function (event) {
if (timer !== null) return
timer = setTimeout(() => {
clearTimeout(timer)
timer = null
handler.call(event.target, event)
}, wait)
}
}
/**
* @param {Element} target - element with background to animate
* @param {*} sprite - sprite details e.g. width, height, frameCountX and frameCountY
*/
function getScrollHandler (target, sprite) {
const width = sprite.width
const height = sprite.height
const xOffset = sprite.width / sprite.frameCountX
const yOffset = sprite.height / sprite.frameCountY
// return handler
return function (event) {
if (!elementInViewY(target, height)) return // if element is not coming into view return
const computedStyle = window.getComputedStyle(target)
// parseInt will convert returned pixels to a number e.g. '10px' -> 10
const backgroundPosX = (parseInt(computedStyle.backgroundPositionX, 10) - xOffset) % width
const backgroundPosY = (backgroundPosX !== 0)
? parseInt(computedStyle.backgroundPositionY, 10)
: (parseInt(computedStyle.backgroundPositionY, 10) - yOffset) % height
target.style.backgroundPositionX = `${backgroundPosX}px`
target.style.backgroundPositionY = `${backgroundPosY}px`
}
}
window.addEventListener(
'scroll',
throttle(
getScrollHandler(document.querySelector('#logo'), {
// sprite details
width: 3200,
height: 640,
frameCountX: 10,
frameCountY: 4
})
, 30 /* milliseconds between frame */
)
)
})
HTML
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>
<div id='logo'></div>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat modi, culpa soluta quidem eius itaque, possimus ex enim quam, quas laboriosam voluptate at magni. Obcaecati facere placeat incidunt veniam, aliquam consequuntur amet voluptate, eos veritatis magni dolor nam? Laborum ab sed sint, voluptas nesciunt voluptatum eaque autem nulla quos inventore?</p>
<hr>