Автор

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

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


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1. HTML

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

<section id="banner">
<div id="intro">
<h1>Заголовок</h1>
<p>Краткое описание.</p>
</div>
<img src="../parallax/images/about.jpg" width="900" />
</section>

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

 

Шаг 2. CSS

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

#banner{
width: 840px;
height: 350px;
margin: 40px auto;
overflow: hidden;
position: relative;
text-align: center;
font-family: 'PT Sans', sans-serif;
z-index: 20;
}
#banner img{
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
#intro{
position: absolute;
height: 100%;
padding: 100px 0;
z-index: 10;
text-align: center;
-moz-box-shadow: inset 0 0 30px #333333;
-webkit-box-shadow: inset 0 0 30px #333333;
box-shadow: inset 0 0 30px #333333;
}
#intro h1{
text-align: center;
width: 840px;
margin: auto;
font-family: 'Rokkitt', serif;
text-transform: uppercase;
color: #333333;
font-size: 28px;
}

Также мы указываем параметры для текстовой надписи, нам необходимо, чтобы она сохраняла свое позиционирование в не зависимости от движения изображения.

 

Шаг 3. JS

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

jQuery("#banner").mousemove(
function(e){
var offset = jQuery(this).offset();
var xPos = e.pageX - offset.left;
var yPos = e.pageY - offset.top;
var mouseXPercent = Math.round(xPos / jQuery(this).width() * 100);
var mouseYPercent = Math.round(yPos / jQuery(this).height() * 100);
jQuery(this).children('img').each(
function(){
var diffX = jQuery('#Parallax').width() - jQuery(this).width();
var diffY = jQuery('#Parallax').height() - jQuery(this).height();
var myX = diffX * (mouseXPercent / 1500);
var myY = diffY * (mouseYPercent / 1080);
var cssObj = {
'left': myX + 'px',
'top': myY + 'px'
}
jQuery(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});
}
);
}
);

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

Вот и все. Готово!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

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


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

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


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

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


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

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close