Анимация непрозрачности с помощью jQuery или MooTools

Довольно не сложная фишка, с помощью которой можно приукрасить собственный сайтик. Смысл заключается в том, что бы при наведении курсором на заранее подготовленный элемент, который стандартно на половину (или больше) прозрачен, сделать его не прозрачным. То есть изменить значение «Opacity» элемента. Прямо как в фотошопе. Пример приведен на банальных фоновых блоках для текста. Делать мы всё это будем либо с помощью jQuery, либо с помощью MooTools. Кому что больше нравиться.

Подключаем или :

Вызов элементов jQuery:

Вызов элементов MooTools:

Значение var opacity отвечает за начальную прозрачность элемента. Можем изменять его как угодно. От 0.0 (не видно вообще — прозрачность ровна 100%) … 0.1, 0.2… и в плоть до 1.0 (прозрачность ровна 0%).
toOpacity — уровень прозрачности при наведении курсором на элемент. Так-же меняем как угодно.
Функция duration (только в jQuery; англ. «длительность») отвечает за скорость перехода от var opacity до toOpacity. Чем выше значение, тем медленнее будет будет преход. (В демке выставлено — 350). Экспериментируйте с настройками и подберите для себя оптимальный вариант.

HTML:

Тайтл

Описание здесь!

Тайтл два

Тут тоже описание.

Тайтл три

И снова любой текст.

CSS:

#jopac { width:800px; height:360px; position:relative; background: url('fon.jpg') 0 bottom no-repeat; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin: 0 auto; top:120px}
.opacity { background:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:20px; }
#jopac-slot-1 { height:260px; position:absolute; top:20px; left:20px; width:340px; }
#jopac-slot-2 { height:120px; position:absolute; top:20px; right:20px; width:310px; }
#jopac-slot-3 { height:80px; position:absolute; top:200px; right:20px; width:310px; }

Посмотреть демо »

Вот и всё. Блоки красивенько то появляются, то исчезают. Применить эффект можно к многим элементам. Например вывод картинок на сайте. (демо »)
Включайте фантазию. ;)

Поездка в маршрутке

На правах рекламы!
Совсем скоро сезон отпусков. Зачем тратить огромные деньги если есть . На Азовском море ничем не хуже чем в Египте.

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Оставить комментарий

Thanks: