Hey guys, basically I have a tile-able background pattern which is 345pixels in height. I'm trying to animate it moving upwards for a cool effect. Problem is, it gets my laptops fans going! Is there a less intensive way to do this? At first I used Javascript only, something like this: var count = 0 setInterval(function() { if (count == -345) { count = 0 } $('.hero-image').css('background-position', "0 " + count + "px") count -= 1 }, 15) Code (markup): Then I thought maybe css would make it better, so I tried it like this: .pattern { background-image: url('pattern.png'); background-size: auto 345px; transition: 5175ms background-position; transition-timing-function: linear; } Code (markup): var count = 0 setInterval(function() { $('.hero-image').css('background-position', "0 " + count + "px") count -= 345 }, 5175) Code (markup): Is there a better less-demanding way to handle this? Thanks
You mean CSS animation? #ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations #demo: https://jsfiddle.net/2oLsen5k/ This won't guarantee your laptop fan going slower Like JS, I believe CSS requires some CPU processing too.
Thank you soo much hdewantara!!! This is perfect, seem's a lot less demanding to me and eliminates the need for js all together. Really appreciate it man!