I am a bit lost i what will be the best way to display moving images on my site. There so many, so you can say just pick the best one for your needs but i dont think i thought yep of the best way. So i hope you can shout out some solutions you found.
What i got:
Gif: only 500kb no sound
html5 video: need to have the video in different formats
flash: bleh
embed: not much control
image sequence: sounds like the best sullotion i can think of but dont really have any reference.
For your image sequence i would use css animations with a javascript fallback
.photoContainer{
background:url('/path/to/you/image');
height:50px;/*size of your image*/
width:50px;
animation:play .5s linear steps(20);
}
@keyframes play{
100% { background-position: -1000px; }
}
in the above code the animation declaration sets the nr of photos in the sequence to 20(steps(20))
the photos will be shown every half a second(.5s) .
You will have to set the container width and height to match those of your photos also the (100% { background-position: -1000px; }) to match the starting x position of your last photo.
so 20 photos times 50px 1000px.
hope it helps
Unfortunately that Codepen tells us nothing...it has one static image that doesn't move.
I still don't understand what it is you are trying to achieve. Do you have an example (not necessarily your own) of what this thing is supposed to look like?
'Moving Images' is just not an adequate description.
I am a bit lost i what will be the best way to display moving images on my site. There so many, so you can say just pick the best one for your needs but i dont think i thought yep of the best way. So i hope you can shout out some solutions you found.
What i got:
hope you can help.
Without knowing how complex this 'moving images' thing is supposed to be it's hard to offer the best solution.
It doesn't sound like it's actually a video....more of an animation.
Could we see it?
What is it supposed to do?
in the above code the animation declaration sets the nr of photos in the sequence to 20(steps(20)) the photos will be shown every half a second(.5s) . You will have to set the container width and height to match those of your photos also the (100% { background-position: -1000px; }) to match the starting x position of your last photo. so 20 photos times 50px 1000px. hope it helps
@Paulie_D i am not asking for the best solutions im looking for any solutions.
@pixelgrid thanks will try this out!
CSS Animation is one option but until we know what the 'video' / 'moving image' is supposed to be we cant state that the above will suit.
Obviously, a CSS animation wouldn't suit a video at all. It's more like replacing an animated GIF.
Here it is with @pixelgrid solution, but i cant seem to get it to work.
http://cdpn.io/HgGIp
No link provided.
i always do that http://cdpn.io/HgGIp
Unfortunately that Codepen tells us nothing...it has one static image that doesn't move.
I still don't understand what it is you are trying to achieve. Do you have an example (not necessarily your own) of what this thing is supposed to look like?
'Moving Images' is just not an adequate description.
i made a mistake writing the linear before
this is your code working