- This topic is empty.
-
AuthorPosts
-
March 1, 2013 at 4:10 am #43062mvaneijgenParticipant
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.hope you can help.
March 1, 2013 at 4:40 am #126534Paulie_DMemberWithout 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?
March 1, 2013 at 5:20 am #126536pixelgridParticipantFor 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 helpsMarch 1, 2013 at 8:03 am #90053mvaneijgenParticipant@Paulie_D i am not asking for the best solutions im looking for any solutions.
@pixelgrid thanks will try this out!March 1, 2013 at 8:07 am #126553Paulie_DMemberCSS 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.
March 1, 2013 at 8:35 am #126555mvaneijgenParticipantHere it is with @pixelgrid solution, but i cant seem to get it to work.
March 1, 2013 at 8:39 am #126556Paulie_DMemberNo link provided.
March 1, 2013 at 8:51 am #126559mvaneijgenParticipanti always do that http://cdpn.io/HgGIp
March 1, 2013 at 10:07 am #126567Paulie_DMemberUnfortunately 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.
March 1, 2013 at 12:41 pm #126599pixelgridParticipanti made a mistake writing the linear before
this is your code working
.photoContainer{
background:url(‘http://dl.dropbox.com/u/345640/bg.jpg’);
height:1066px;/*size of your image*/
width:1600px;
-webkit-animation:play .5s steps(5) infinite;
-moz-animation:play .5s steps(5) infinite;
animation:play .5s steps(5) infinite;
}@-webkit-keyframes play {
100% { background-position: -8000px; }
}
@-moz-keyframes play {
100% { background-position: -8000px; }
}
@keyframes play{
100% { background-position: -8000px; }
} -
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.