Слайдер вертикальный – Уроки веб-дизайна. Как сделать вертикальный слайдер с параллакс-скроллингом с помощью CSS3 / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Leave a Comment / Разное / By /

Содержание

Вертикальный анимированный слайдер для сайта на JS

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

 

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

Вертикальный анимированный слайдер для сайта на JS

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

Шаг 1. HTML

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

<div>

<div>

<ul>

<li>

<div>

<svg viewBox=»0 0 32 32″>

<g filter=»»>

<use xlink:href=»#shopping-cart»></use>

</g>

</svg>

</div>

</li>

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

Вертикальный анимированный слайдер для сайта на JS

Шаг 2. CSS

Теперь нам необходимо добавить неcколько стилей, они помогут стилизовать наш слайдер и придать тот вид, который вы можете наблюдать в демонстрации, мы показали несколько стилей для левой и для правой части, если вы хоть немного разбираетесь с CSS, то вам будет все понятно, так как ничего сложного мы здесь не использовали:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

#left-side {

height: 70%;

width: 25%;

display: flex;

align-items: center;

justify-content: center;

li {

padding-top: 10px;

padding-bottom: 10px;

display: flex;

line-height: 34px;

color: rgba($black, .5);

font-weight: 500;

cursor: pointer;

transition: all .2s ease-out;

 

#border {

height: 288px;

width: 1px;

background-color: rgba($black, .2);

 

#line.one {

width: 5px;

height: 54px;

background-color: $active;

margin-left: -2px;

margin-top: 35px;

transition: all .4s ease-in-out;

}

}

 

#right-side {

height: 300px;

width: 75%;

overflow: hidden;

Шаг 3. JS

Теперь нам необходимо добавить немного магии, которая позволит нам правильно и с приятной анимацией отображать наш слайдер с вертикальной навигацией:

$(«.choose»).click(function () {

$(«.choose»).addClass(«active»);

$(«.choose > .icon»).addClass(«active»);

$(«.pay»).removeClass(«active»);

$(«.wrap»).removeClass(«active»);

$(«.ship»).removeClass(«active»);

$(«.pay > .icon»).removeClass(«active»);

$(«.wrap > .icon»).removeClass(«active»);

$(«.ship > .icon»).removeClass(«active»);

$(«#line»).addClass(«one»);

$(«#line»).removeClass(«two»);

$(«#line»).removeClass(«three»);

$(«#line»).removeClass(«four»);

})

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

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

Читайте также:

Интересный вертикальный слайдер с помощью jQuery

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

При этом остальные секции становятся более прозрачными и сужаются. При навигации с помощью кнопок следующая секции сдвигается в основное положение. Также используется плагин

jQuery Mousewheel (автор Brandon Aaron), который обеспечивает навигацию по слайдеру с помощью колесика мыши. Для начала нам необходимо подключить следующие скрипты:

<script type=»text/javascript» src=»js/jquery.min.js»></script>

<script type=»text/javascript» src=»js/jquery.easing.1.3.js»></script>

<script type=»text/javascript» src=»js/jquery.mousewheel.js»></script>

<script type=»text/javascript» src=»js/jquery.vaccordion.js»></script>

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<div>

<div>

<span>Назад</span>

<span>Дальше</span>

</div>

<div>

<div>

<h4>Маркетинг</h4>

<div>

<p>Женя Ватсонов</p>

<ul>

<li><a href=»#»>Кто такой</a></li>

<li><a href=»#»>Портфолио</a></li>

<li><a href=»#»>Контакт</a></li>

</ul>

</div>

</div>

<div>

. . .

</div>

</div>

. . .

</div>

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

$(‘#va-accordion’).vaccordion({

expandedHeight : 350,

animSpeed : 400,

animOpacity : 0.7,

visibleSlices : 2

});

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

// ширина аккордеона

accordionW : 1000,

// высота аккордеона

accordionH : 450,

// количество видимых слайдов

visibleSlices : 3,

// высота открытого слайда,

// не должна превышать высоты аккордеона

expandedHeight : 350,

// скорость открытия / закрытия слайда

animSpeed : 250,

// эффект, используемый при открытии / закрытии слайда

animEasing : ‘jswing’,

// значение непрозрачности для сжатых слайдов

animOpacity : 0.2,

// время затухания содержания слайда

contentAnimSpeed: 900,

// если данная опция имеет значение false,

// все открытие слайды будут сворачиваться перед перемещением

savePositions : true

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

Читайте также:

Слайдер на CSS без Javascript! 5 разных слайдеров на CSS