JS / JQuery эффекты перехода изображения - жалюзи?
Мне нужен эффект перехода между двумя или более изображениями. Я знаю, что простые переходы можно легко сделать в JQuery, особенно с плагином Цикл, но мне нужно что-то более сложное. Как это, хотя это плохой пример. Эффект в стиле «жалюзи», при котором вы можете видеть одно изображение сквозь другое по мере его изменения. Надеюсь, мне понятно.
Мне бы очень хотелось по возможности избегать использования Flash.
Я уже несколько раз пользовался animate. Мне нужен способ реализовать стиль перехода, с которым я связался, либо в готовом виде, либо с небольшой помощью. Моя проблема в том, что изображение по сути разбито, а не просто перемещено. Может есть способ использовать маски?
Ответы 2
Диагональные жалюзи будут практически невозможны с одним только javascript. Я могу придумать несколько способов сделать это с файлами изображений, но это был бы святой хакер, и анимация вряд ли будет гладкой. Вероятно, есть способы сделать это с помощью Canvas, но это также будет головной болью, потому что вам нужно использовать canvas-> vml, чтобы заставить его работать с IE.
Если вас устраивают горизонтальные / вертикальные жалюзи, просто добавьте кучу div и анимируйте ширину / высоту.
Если вас устраивает вариант с вертикальными жалюзи, сейчас есть очень удобный плагин jQuery, который даст желаемый эффект: http://nivo.dev7studios.com
Установить диагональные жалюзи +1 будет практически невозможно, особенно если они будут кроссбраузерными. Однако вертикальные или горизонтальные жалюзи вполне подойдут. Обязательно сместите новое изображение на соответствующую величину в каждом из дочерних div и просто уменьшите / увеличьте их.