Здесь расскажу вам про то как создать замечательный эффект отражения для картинок, изображений, при этом создавать его мы будем с помощью скрипта на языке 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”.
