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