Better css animation

Discussion in 'HTML & Website Design' started by KewL, Jul 5, 2016.

  1. #1
    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
     
    KewL, Jul 5, 2016 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    hdewantara, Jul 5, 2016 IP
  3. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #3
    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!
     
    KewL, Jul 5, 2016 IP