Псевдо 3D: jquery против gif-anim

Программирование

Как то раз, разгребая завалы рабочих файлов я наткнулся на 2 скучноватые, в общем-то, фотографии. А интерес мой к ним вызвало то, что я случайно сделал фото одного и того же объекта с немного разной позиции. И вот, просматривая их подряд я ощутил эффект трехмерности изображения. В порядке эксперимента я тут же создал анимированный gif, который менял эти фотографии по кругу. Результат из 2 фотографий выглядел довольно гротескно и вау-эффект не ощущался. Тогда я решил, что мне нужны промежуточные кадры. Программа для создания gif-анимации предлагала подобный функционал. Но анимация 64 кадра размером 3000х2000 точек, роняла эту программу-редактор в 100% случаев. Я уменьшил количество кадров и их размер, результат меня по прежнему не радовал — хотя дерганность исчезла, размер получившегося файла составлял что-то около 4 с небольшим мегабайт. Очередная светлая мысль — нужно использовать jquery! В сгенерированном gif-anim нет ничего сложного, нужно только использовать анимацию по css-свойству opacity.

<code class="html"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style>
			.layer0 {	background-image: url('img/1.jpg');
						width: 1024px;
						height: 768px;
						margin: auto;
			}
			.layer1 {	opacity: 0;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript">
						function mv(){
							var interval = setInterval(function(){	
								$('.layer1').animate({'opacity':'1'},1500);
								$('.layer1').animate({'opacity':'0'},1500);
							}, 1);
						};
		</script>
	</head>
	<body onmouseover="javascript:mv();">
		<div class="layer0">
			<img class="layer1" src="img/2.jpg" alt="">
		</div>
	</body>
</html>
</code>

Немного кода и 2 картинки по 50 килобайт.

Результат