Эффект отражения для картинок через javascript

Здесь расскажу вам про то как создать замечательный эффект отражения для картинок, изображений, при этом создавать его мы будем с помощью скрипта на языке javascript, по ходу статьи расскажу как данный скрипт подключается в wordpress.

Скачать исходники для статьи можно ниже

Как это будет выглядеть?

Эффект отражения

создаем эффект отражения для изображений

Оказывается это достаточно легко сделать.

Приступим!

1. Скачиваем сам javascript.

В интернете есть много похожих скриптов для осуществления данного эффекта, но в нашем примере я буду использовать следующий скрипт скачать (скачается архив reflex.zip, распаковываем его WInRAR и получаем файлик reflex.js – это и есть скрипт) или же можете скачать его с сайта разработчика “netzgesta.de/reflex” (скачается папочка, внутри нее есть файлик reflex.js).

Далее нам нужно загрузить его на сервер нашего сайта, а для этого открываем программу FileZilla и перекидываем наш файл reflex.js например в корневую папку (в моем примере, а я пользуюсь для теста хостингом hostinger.ru, папка называется public_html), тогда путь до скрита у нас будет следующий: http://название вашего сайта/reflex.js

2. Подключаем данный javascript к wordpress.

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

Для этого открываем его (header.php)  – переходим в панель управления вашим сайтом, в левом меню выбираем пункт “Внешний вид”, далее подпункт “Редактор”, справа – в списке шаблонов находим файл header.php (Шапка) и открываем его.

создаем эффект отражения

Находим в нем тег </head> и вставляем перед ним следующую строчку:

<script type="text/javascript" src="http://mnogoblog2.16mb.com/reflex.js"></script>

Здесь мы подключили javascript с указанием пути до него http://mnogoblog2.16mb.com/reflex.js – я закачал данный скрипт в корневую папку своего “тестого” сайта –  mnogoblog2.16mb.com.

 

Также можно вставить подключение данного скрипта непосредственно в запись или страничку (например если вы хотите использовать данный скрипт только на этой страничке или записи), для этого вам нужно открыть страничку или запись и в HTML редакторе поставить ту же самую строчку:

<script type="text/javascript" src="http://mnogoblog2.16mb.com/reflex.js"></script>

3. Использование:

Далее, к тегу того изображения, которое мы собираемся «отзеркалить» приписываем класс «reflect»:

Допустим у меня на сайте было загружено изображение и путь до него был следующим “http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg”.

Тогда прописываем в нужном нам месте на страничке или записи следующий код:

<img class="reflex" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

С помощью данного кода мы присвоили нужному нам изображению класс “reflex”.

Все теперь готово!

Далее переходим на страничку или запись, где мы вставили изображение с эффектом отражения и обновляем ее.
И у нас получилось следующее изображение:

Изначально оно повернуто немного направо, но это не трудно поправить, так как данный скрипт предусматриваем достаточно большое количество настроек.

4. Настраиваем отображение изображения

 

4.1. Можно изменить высоту отображения в пикселях, если добавить к классу параметр  “idistance”:

Минимальное значение idistance=0 (стоит по умолчанию).

Максимальное значение idistance=100.

Пример при idistance50, код картинки выглядит следующим образом:

<img class="reflex idistance50" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Картинка как будто повисла в воздухе, так как ее отражение отодвинулось от нее.

4.2. Можно изменить высоту отражения в пикселях, если добавить к классу параметр  “iheight”:

Минимальное значение iheight=0.

Максимальное значение iheight=100.

По умолчанию стоит значение iheight=33.

Пример при iheight80, код картинки выглядит следующим образом:

<img class="reflex iheight80" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Отражение увеличило свою высоту.

4.3.  Можно изменить желаемую непрозрачность отражения в процентах, если добавить к классу параметр  “iopacity”:

Минимальное значение iopacity=0.

Максимальное значение iopacity=100.

По умолчанию стоит значение iopacity=33.

Пример при iopacity80, код картинки выглядит следующим образом:

<img class="reflex iopacity80" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Как видите отражение стало более четким.

4.4.  Можно изменить ширину границы картинки в пикселях, если добавить к классу параметр  “iborder“:

Минимальное значение iborder=0.

Максимальное значение iborder=100.

По умолчанию стоит значение iborder=0.

Пример при iborder100, код картинки выглядит следующим образом:

<img class="reflex iborder100" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Как видим появилась рамка, причем данный скрипт можно использовать просто для того чтобы обрамить какое-нибудь изображение.

4.5. Можно задать цвет границы картинки в шестнадцатеричной системе, если добавить к классу параметр  “icolor”:

Минимальное значение icolor=000000.

Максимальное значение icolor=FFFFFF.

По умолчанию стоит значение icolor=f0f4ff.

Пример при icolor0070a4 (границу рамки оставим как в предыдущем примере iborder100), код картинки выглядит следующим образом:

<img class="reflex iborder100 icolor0070a4" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Теперь наша рамка стала синего цвета.

4.6. И последний параметр, который можно регулировать в данном скрипте – это изменять поворот картинки, если добавить к классу параметры “itiltright” или “itiltnone” или “itiltleft”:

Картинка отображаем поворот налево itiltleft.

Картинка отображается в обычном состоянии (без поворота) itiltnone.

Картинка отображает поворот направо itiltright (стоит по умолчанию).

Пример при itiltnone, код картинки выглядит следующим образом:

<img class="reflex itiltnone" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Как видите наша картинка выровнялась! (на месте разработчиков данного скрипта я бы поставил отображение без поворота картинки по умолчанию).

А теперь приведу пример с применением всех 6 параметров:

<img class="reflex idistance10 iheight80 iopacity80 iborder50 icolor0070a4 itiltleft" src="http://mnogoblog2.16mb.com/wp-content/uploads/2012/07/01.jpg" alt="" />

Вы можете сказать: зачем использовать javascript для создания эффекта отражения картинки?
На то есть несколько причин:
1. Вам не нужно тратить свое время на изучения графических редакторов, да и на создание самого эффекта отражения.
2. Один раз подключив данный скрипт в файле header.php, вы сможете использовать его для любого изображения, картинки, фото на вашем сайте – достаточно добавить класс “reflex”.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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