Теория проста. Плавно раскрываем div с изображением в фоне, а в противоположном направлении двигаем растянутое изображение. При этом соотносим граничные пиксели для того, чтобы найти точку соот-ия между последней частью раскрываемого фона и двигающимся изображением.
На практике все еще проще. Liquid-функция принимает следующий конфигурационный объект в качестве аргумента:
var fx = Liquid({
// ссылка на изображение
src:"myimage.png",
// элемент, использующийся в качестве контейнера
target: document.getElementById("fx")
// Направление анимации, по-умолчанию left
// Возможные значения: left, right, bottom, top
direction: "left",
// Масштаб, 2000% по-умолчанию
// задает растягивание изображения
scale: 2000,
// Скорость анимации, по-умолчанию 10
speed: 10,
// Функция обратного вызова, срабатывающая в конце анимации
callback:function(){alert("it's Liquid!")},
// Функция обратного вызова, срабатывающая, когда изображения загружено
// до анимации
onload:function(){/*FX not started yet*/},
reverse:true
});
// fx - объект для вызова двух методов
// fx.pause()
// останавливает анимацию
// fx.play()
// возобновляет анимацию после паузы
// ссылка на изображение
src:"myimage.png",
// элемент, использующийся в качестве контейнера
target: document.getElementById("fx")
// Направление анимации, по-умолчанию left
// Возможные значения: left, right, bottom, top
direction: "left",
// Масштаб, 2000% по-умолчанию
// задает растягивание изображения
scale: 2000,
// Скорость анимации, по-умолчанию 10
speed: 10,
// Функция обратного вызова, срабатывающая в конце анимации
callback:function(){alert("it's Liquid!")},
// Функция обратного вызова, срабатывающая, когда изображения загружено
// до анимации
onload:function(){/*FX not started yet*/},
reverse:true
});
// fx - объект для вызова двух методов
// fx.pause()
// останавливает анимацию
// fx.play()
// возобновляет анимацию после паузы
Так как эффект требует наличие всего двух DOM-узлов, его могут воспроизводить даже мобильные устройства, такие как Android и iPhone.
Здесь вы можете найти исходный код, а также Demo1 с логотипом Firefox и Demo2 с логотипом VAIO. Их гладкие линии идеально подходят для этого эффекта.
