Animated Jpeg?

Hi

I've prodced an animated GIF for my website banner but some of the image quallity is distorted.

What I want to do is use the original jpegs and animated them. I have tried


 This css3 but it doesn not work in opera or most versions of IE



<div id="cf">
	<img class="bottom" src="/tests/images/Stones.jpg" />
	<img class="top" src="/tests/images/Summit.jpg" />
</div>

Open in new window



@keyframes cf3FadeInOut {
	0% {
		opacity:1;
	}
	45% {
		opacity:1;
	}
	55% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

#cf3 img.top {
	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;
}

Open in new window



Can anyone suggest a cross browser solution to animate 5 jpegs for a website banner?

Thanks
EdAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
you'll need javascript if you need cross-browserablity

Would you like a javascript solution?
0
EdAuthor Commented:
yes please- it doesn't have to be css
0
mizzinessCommented:
jQuery has some really excellent components for doing this.  

http://api.jquery.com/category/effects/

I'd just use this :)
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Kiran Paul VJComputer EngineerCommented:
Try the code mentioned here, you can give the file names in an array.

http://www.computing.net/answers/digitalphoto/can-jpg-or-jpeg-be-animated/1314.html
0
Kyle HamiltonData ScientistCommented:
If you're going to use jquery, here is one I wrote for a continuous fadein/fadeout effect (I made it into a plugin, but right now the plugin only has a reveal effect : http://www.candpgeneration.com/toys/toys-slideshow-reveal-plg.php).

But there's lots of others out there. jquery cycle is a good one.

For this one, you'll want to adjust the width, height, the names of the images, and the image path.

In the html, just add:

<div class="myslideshow"></div> where you want the slide show to appear.

var sw = 400; // slideshow width
   var sh = 300; // slideshow height
   var slideshow = $(".myslideshow"); // slideshow container element
   
   var images = ["img1.jpg", 
                 "img2.jpg",
                 "img3.jpg",
                 "img4.jpg"];
             
   var imagePath = "../images/";   
   var speed = 500; // how quickly it fades
   var slideInterval = 2500; // time between slide fades
   
// no need to edit below this line

   slideshow.css({width: sw, height: sh, "position":"relative", "overflow":"hidden"});
             
   var numImages = images.length;
   
   var slides = [];
   
   // make a slide object
   function Slide(w, h, img){
        var slide = $("<div>", {
            css:{
                    position : "absolute",
                    width    : w,
                    height   : h,
                    opacity  : 0,
                    background: "url("+imagePath+img+") 0px 0px no-repeat"
                },
            rel: img    
                });
                return slide;
   };
   
   for(var i = 0; i < numImages; i++){
   
    slides.push(new Slide(sw, sh, images[i]));
    
   }
   
   slideshow.html(slides[0]);
   slideshow.prepend(slides[1]);
   
   slides[0].css({opacity : 1});
   
   var dotheslide = function(){
       
       slideshow.children("div").first().animate({opacity : 1}, {queue:false});
       slideshow.children("div").last().animate({opacity : 0}, speed, function(){
           
            slides.push(slides[0]);
            slides.shift();
            slideshow.html(slides[0]);
            slideshow.prepend(slides[1]);

            slideshow.children("div").first().css({opacity : 1});
       });   
       
       
   }
   
   
   var inter;
   
   inter = setInterval (function(){
       dotheslide();
   }, slideInterval);
   

// this will pause the slide show on mouse hover:
   slideshow.on("mouseenter", function(){
       clearInterval(inter);
      
   }).mouseleave(function(){
        inter = setInterval (function(){
        dotheslide();
        }, slideInterval);
   });

Open in new window


preview: http://www.candpgeneration.com/toys/toys-slideshow-fade.php
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
EdAuthor Commented:
sorry for the delayed response but I have been ill.

Anyway, back to it now and this solution was perfect, thankyou
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.