1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Create an image-animation using CSS3

Discussion in 'HTML & Website Design' started by PoPSiCLe, Sep 30, 2016.

  1. #1
    Okay. I have a preview-image from a videofile, which is basically one continous (very wide) image, with screenshots of frames from the video.
    SEMrush
    This was part of some complicated javascript BS, and I was thinking - this should be possible to do with CSS alone - at least I think it should.

    On display, the image shows up with the first (leftmost) frame.

    What I want is as soon as you hover over the image, it starts scrolling right, one frame at the time, preferably looping at the end, but that isn't strictly necessary.

    The width of the frames are known, so that's not the issue.

    I'm a little at a loss, though - is this possible with CSS3? If it is, does anyone have anything similar I can read up on? I'm not really fluent in CSS3 animation, so some guides would help.

    I've tried googling, but mostly what I find are regular sliders, based on multiple images - which I don't have.
     
    Solved! View solution.
    PoPSiCLe, Sep 30, 2016 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Are you averse to slicing the image you have to make a series of individual shots?

    gary
     
    kk5st, Sep 30, 2016 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #3
    [addendum] Like you, I'm not proficient with css animation. I did work with it long enough to make it work for me, but the issue is that I find animation to be annoying. By annoying, I mean it sucks hind teat on a boar hog.

    I am reminded of a Heinlein character discussing humor. There are funny always jokes and there are funny once jokes. Animation is a funny once joke.

    gary
     
    kk5st, Sep 30, 2016 IP
  4. #4
    @PoPSiCLe you can try something like this:

    https://jsfiddle.net/wef00gxe/4/

    Setting animation: moveSlideshow 0s linear infinite; to greater than 0s will scroll the frames by default (the greater the number the slower they'll move).

    PS It's using a split image to create that color scroll on hover. When you change it to your own image it will not be doing that, obviously. Why am even explaining this to you? :)
     
    qwikad.com, Sep 30, 2016 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    I would prefer not - this is automated (the generation of the image), and I have no idea how I would do that (splitting it, I mean).
    I do agree with that. The point of this is to create a semi-fluid "animation" / preview of the linked video, without using a smaller video to do that.
    I will have a look :)[/QUOTE]
     
    PoPSiCLe, Sep 30, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Thanks! That was actually a very good starting point. Since I'm gonna be using this on several different images on the same page, I need to make some minor changes, but it seems to be exactly what I need. Need to figure out how to make some of the attributes be dynamically assigned, but that shouldn't be too difficult. Thanks again!
     
    PoPSiCLe, Sep 30, 2016 IP
  7. hdewantara

    hdewantara Well-Known Member

    Messages:
    519
    Likes Received:
    47
    Best Answers:
    23
    Trophy Points:
    130
    #7
    An additional example which looks related:
    http://jsfiddle.net/simurai/CGmCe/

    But CSS animation-play-state needs to be there too, in order to make it hover-based:
    .hi {
        width: 50px;
        height: 72px;
        background-image: url("http://s.cdpn.io/79/sprite-steps.png");
        animation: myanim 5s steps(10) infinite;
        animation-play-state: paused;
    }
    
    @keyframes myanim {
       from { background-position:    0px; }
         to { background-position: -500px; }
    }
    
    .hi:hover{
      animation-play-state:running;
    }
    Code (CSS):
    Refs:
     
    Last edited: Sep 30, 2016
    hdewantara, Sep 30, 2016 IP
    PoPSiCLe likes this.