Прозрачность изображения

Поздравляю всех с наступившим годом дракона! Говорят, этот год будет тяжелым, т.к. високосный! Я особо не принимаю это во внимание, потому что иду по жизни смело и легко, чего и вам советую! Я верю, что этот год будет намного легче и продуктивнее, чем год ушедший.

Следующим нашим шагом в изучении будет знакомство с вордпресс (подпишитесь, чтобы ни чего не пропустить). Я начну серию уроков по WordPress. Сколько их будет я не знаю! Поэтому, ждем!

Вы, наверное, уже замечали, что на каких-то сайтах некоторые изображения, например кнопки социальных сетей, как бы приглушены, полупрозрачные? А при наведении курсора мыши на любую кнопку оно вдруг набирает полную контрастность и насыщенность. Т.е. прозрачность исчезает. Довольно-таки неплохой эффект, не правда ли?

В этом уроке я расскажу, как добиться прозрачности изображения с помощью технологии HTML5, CSS3 и JQuery. Последнее мы будем применять для более плавного перехода от полупрозрачности к полному отображению изображения и наоборот.

Просмотреть демонстрацию того что мы будем делать. ДЕМО

Для прохождения урока, вам понадобятся следующие файлы: 4 изображения социальных кнопок, библиотека JQuery 1.7 файл «jquery.js», файлы «index.html», «style.css» и еще один файл для наших скриптов, которые будут задавать ту самую плавность «script.js». Скачать необходимые файлы к уроку можете здесь.

Итак, наши файлы имеют следующий код:

Мы имеем 4 подключенных изображения выровненных по левому краю, подключенную библиотеку и файл, в котором будут храниться наши скрипты. Для плавности изменения прозрачности мы будем использовать функцию «animate ();» и свойство CSS opacity.

Сделаем выборку элементов c классом «images» в HTML документе с помощью JQuery и установим для всех социальных кнопок прозрачность равную половине. Выборку будем делать непосредственно уже в самом файле «script.js».

На данном этапе можно уже запустить файл «index.html» и посмотреть, что прозрачность изображений изменилась, но ни чего еще не происходит при наведении курсора мыши. Для этого эффекта воспользуемся функцией «mouseover ();» и «mouseuot ();».

Функция «animate ();» содержит параметр «opacity» равный «1» (это примерно 40% прозрачности) и время в миллисекундах, за которое значение прозрачности будет выполнено, т.е. отталкиваясь от основного значения прозрачности «css ({'opacity' : '0.4'})» анимация будет длиться половину секунды и за эту половину секунды прозрачность поменяется со значения 1 на значение 0.4. Все достаточно просто. И при снятии курсора мыши с изображения оно принимает исходное значение прозрачности.

На этом все, вот таким простым способом у нас получился красивый плавный переход прозрачности изображения при наведении курсора мыши. Вы также можете попробовать сделать это с горизонтальным меню для сайта, о котором я писал не так давно.

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 35 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили Один комментарий к этой статье:
  • Enigma05.01.2012 в 00:59

    А я всё голову ломала, как с помощью таблиц стилей этот эффект сделать! Спасибо, буду пробовать!

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter