Автор

18 05.2013
Галерея с эффектом скольжения фото на 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);

});

})();

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

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


vk.com/club.ssdru

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


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

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

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


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

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


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

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


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

Простой шаблон, который использует свойство CSS фона для добавления фиксированного фонового эффекта.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close