Здесь расскажу вам про эффекты для сайтов (параллакс, эффект лупы, загнутых уголков, перелистывание картинки), которые заинтересовали меня, приведу наглядные примеры и ресурсы, где рассказано как их создать.

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

1. Эффект Parallax

Параллакс (c греч.  «смена, чередование») — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

Пример можно посмотреть по следующей ссылке (при наведении на данную картинку двигайте мышку влево-вправо и вверх-вниз):

Трава, бабочки и лягушка на тростинке будут двигаться относительно фона при перемещении мышки по картинке.

http://www.jquery4u.com/demos/jquery4u-parallax-demo/

Как его осуществить? – можно посмотреть на этом же сайте (на английском языке, но подробно и не так сложно как кажется на первый взгляд):

http://www.jquery4u.com/animation/jquery-parallax-tutorial

На сайте wordpress.org есть 2-а плагина, позволяющих осуществить данный эффект:

Image Parallax

Наглядный пример данного плагина можно увидеть тут (официальный сайт самого плагина):

http://webmaestro.fr/blog/2012/image-parallax-plugin-for-wordpress/

WP Parallax Content Slider – больше напоминает обычный, но впечатляющий слайдер.

Наглядный пример данного плагина можно увидеть тут (официальный сайт самого плагина):

http://jltweb.info/realisations/wp-parallax-content-plugin/

(также с помощью данного плагина можно сделать что-то вроде такого:

http://ruseller.com/lessons/les826/demo/index.html

, только не нужно будет копаться в коде.)

2. Эффект лупы

Раньше на disqus.com стояло изображение, в котором с помощью лупы можно было рассмотреть мелкие детали, помню сам провел несколько минут в исследовании мелких деталей данной картинки. Сейчас дизайн сайта поменялся.

Другой наглядный пример можно увидеть по следующей ссылке:

http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html

Как все это сделать написано тут:

http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

А делается это через плагин  Imagelens, который есть на wordpress.org.

Аналог вышеуказанного примера:

http://www.htmldrive.net/items/show/864/useful-zoom-into-picture-with-jquery

3. Эффект загнутых уголков сайта

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

Наглядный пример можно увидеть тут:

http://rabvsety.ru/sozday-svoy-site/plaginy-dlya-wordpress/plagin-page-peel-uglovaya-reklama-na-sajte/

Данный эффект осуществляется с помощью плагина Page Peel, который есть на wordpress.org, сделать данный информационный уголок достаточно легко.

Инструкция по созданию уголка:

http://www.wordpressplugins.ru/look/page-peel.html

4. Листаем картинку мышкой

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

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

http://code.ovidiu.ch/dragdealer/

Аналог вышеуказанного примера:

http://www.htmldrive.net/items/show/882/Simple-Image-Scroller-with-jQuery

PS: Данную статью постараюсь со временем дополнять.

Также думаю, что вас заинтересует следующая интересная статья:

– 80 удивительных слайдеров на  JQuery и Карусель плагинов: 

http://creativecan.com/2012/06/jquery-slider/