Обзоры, статьи, исследования



5 интересных способов применения fading-эффекта


Одним из интересных визуальных эффектов является fading-эффект (по-русски - эффект затухания?). Хотя судя по практическому употреблению - чаще применяется обратный эффект: проявление цветов блёклой картинки. Эффект при правильном применении очень уместен и может применяться для страниц с лёгким, неагрессивным дизайном с целью привлечения внимания к выбранному элементу страницы - например, фото новинок продукции.

1. Довольно подробное описание реализации fading-эффекта можно найти на странице Javascript fading - плавное изменение цветов.
В этой статье Цыгырлаш Игорь привёл довольно детальное описание подхода расчёта изменения цвета, что будет весьма полезно в плане понимания того, что происходит в процессе работы скрипта.
Javascript fading - плавное изменение цветов

2. Пример применения fading-эффекта для показа увеличенной фотографии при наведении курсора мыши на миниатюрное изображение предложил Stu Nicholls - Before your very eyes - a fade-in image. Весьма оригинальный способ для реализации в каталоге продукции, списке миниатюр в галерее изображений и т.д.
fade-in image 1 fade-in image 2 fade-in image 3

3. Fade Out Bottom - весьма эффектное применение полупрозрачного PNG в фиксировано позиционированном внизу страницы слое.
Fade Out Bottom

4. Image Cross Fader Redux - последовательная смена изображений с применением эффекта затухания

На этом эксперименте хотелось бы остановиться подробнее - думаю, что этот эксперимент весьма стоит продвигать в массы по причине элегантности решения и довольно неплохой поддержки браузерами (тест был проведён в IE6, FF2, Opera9). Недостаток метода в том, что картинки вначале подгружаются в поток, а уже потом выстраиваются одна под другой. Но это можно доработать. Сфера применения - например, разные баннеры; показ нескольких фото к статье, когда надо сэкономить место и т.д.

5. Onload image fades without Flash - интересный эффект загрузки картинки, особенно для "тяжёлых" картинок - в галерее, детальной странице продукции и др., т.е. везде, где необходимо высокое качество графики и её эффектное появление на странице. При этом пока картинка не появилась, до применения fading-эффекта, посетитель видит не пустое место, отведённое под картинку, а надпись "Loading...".