Solved

Animated Jpeg?

Posted on 2012-06-25
6
670 Views
Last Modified: 2012-07-03
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
0
Comment
Question by:Ed
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38120990
you'll need javascript if you need cross-browserablity

Would you like a javascript solution?
0
 

Author Comment

by:Ed
ID: 38120998
yes please- it doesn't have to be css
0
 
LVL 5

Expert Comment

by:mizziness
ID: 38121017
jQuery has some really excellent components for doing this.  

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

I'd just use this :)
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 16

Expert Comment

by:Kiran Paul VJ
ID: 38121052
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38121072
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
 

Author Closing Comment

by:Ed
ID: 38149512
sorry for the delayed response but I have been ill.

Anyway, back to it now and this solution was perfect, thankyou
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question