Автор

Галерея с эффектом скольжения фото на jQuery

Галерея с эффектом скольжения фото на jQuery


 

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

 

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

 

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

Шаг 1. HTML

Нам необходимо, впрочем как всегда, создать список с порядком вывода изображений:

<div class="slider">
 <ul>
 <li class="active">
 <img src="1.jpg" />
 </li>
 <li>
 <img src="2.jpg" />
 </li>
 <li>
 <img src="3.jpg" />
 </li>
 <li>
 <img src="4.jpg" />
 </li>
 <li>
 <img src="5.jpg" />
 </li>
 </ul>
 </div>

У нас есть класс active который будет указывать активное изображение.

Шаг 2. CSS

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

.slider {
 position: relative;
 left: -320px;
 margin-left: 50%;
}
ul {
 white-space: nowrap;
 overflow: visible;
 position: relative;
 left: 0;
 transition: left 1s;
}
li {
 display: inline-block;
 margin: 20px;
 cursor: pointer;
 height: 422px;
}
li img {
 border: 10px solid #FFF;
 box-shadow: 0 3px 6px 0 #999;
 display: block;
 height: 300px;
 opacity: 0.6;
 margin-top: 50px;
 transition: height 1s, opacity 0.5s, margin-top 1s;
}

li:hover img {
 box-shadow: 0 3px 6px 0 #333;
}

li.active img {
 margin-top: 0;
 height: 400px;
 opacity: 1;
}

 

Шаг 3. JavaScript

 

Нам необходимо простые функции для правильного отображения активного изображения и направленного движения галереи:

(function() {

$("li").on("click", function(){

var item = $(this),
 pos = "-"+(item.index() * 515)+"px";

item.addClass("active");
 item.siblings().removeClass("active");

$("ul").css("left", pos);

});

})();

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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

vk.com/club.ssdru

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



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

Галерея с эффектом скольжения фото на jQuery

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.


Галерея с эффектом скольжения фото на jQuery

Есть довольно много методов для <input type="file" /> элемента. Я попробовал большинство из них, но ни один не был достаточно хорош. Вероятно, худшей техникой была та, в которой входной элемент помещается в емкость (которая имитирует кнопки), а на вход следует за курсором, так что, когда вы щелкните в любом месте на контейнере, вы нажимаете на ввод. Звучит интересно и странно одновременно, верно?


Галерея с эффектом скольжения фото на jQuery

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


Галерея с эффектом скольжения фото на jQuery

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close