Преобразуем аккордеон на jQuery в аккордеон на CSS3

Главная Создать свой сайт и продвинуть его Создание сайтов Преобразуем аккордеон на jQuery в аккордеон на CSS3
14 ответ(ов) в теме
moto
не в сети 2 часа
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
13:58

Приходилось ли вам использовать аккордеон в своем проекте? Обычно, для таких задач используется какой-нибудь плагин jQuery или вариант на чистом JavaScript. Назначение аккордеона - демонстрация изображений или списка свойств и особенностей продукта. В таком случае можно легко обойтись только возможностями CSS3? которые позволят обрабатывать событие OnClick и построить анимацию для смены слайдов.

Версия jQuery

Первая демонстрация нашего урока содержит аккордеон, построенный на плагине jQuery liteAccordion:
<!DOCTYPE HTML><br><html lang="ru"><br> <head><br> <meta charset="utf-8" /><br> <title>Преобразуем аккордеон jQuery в аккордеон CSS3 | Материалы сайта RUSELLER.COM</title><br><br> <!-- Файлы CSS --><br> <link href="css/layout.css" rel="stylesheet" /><br> <link href="css/liteaccordion.css" rel="stylesheet" /><br><br> <!-- jQuery --> <br> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br><br> <!-- jQuery easing --><br> <script src="js/jquery.easing.1.3.js"></script><br><br> <!-- Бибилиотека liteAccordion для jQuery --><br> <script src="js/liteaccordion.jquery.js"></script><br><br> <script><br> $(document).ready(function(){<br> $('#js_version').liteAccordion({<br> theme : 'dark',<br> rounded : true,<br> enumerateSlides : true,<br> firstSlide : 1,<br> linkable : true,<br> easing: 'easeInOutSine'<br> });<br> });<br> </script><br> </head><br> <body><br> <header><br> <h2>Преобразуем аккордеон jQuery в аккордеон CSS3</h2><br> </header><br><br> <h1>Аккордеон jQuery (с использованием liteAccordion)</h1><br> <div id="js_version" class="accordion"><br> <ol><br> <li data-slide-name="slide1"><br> <h2><span>Слайд Один</span></h2><br> <div><br> <img src="images/1.jpg" alt="Slide One" /><br> </div><br> </li><br> <li data-slide-name="slide2"><br> <h2><span>Слайд Два</span></h2><br> <div><br> <img src="images/2.jpg" alt="Slide Two" /><br> </div><br> </li><br> <li data-slide-name="slide3"><br> <h2><span>Слайд Три</span></h2><br> <div><br> <img src="images/3.jpg" alt="Slide Three" /><br> </div><br> </li><br> <li data-slide-name="slide4"><br> <h2><span>Слайд Четыре</span></h2><br> <div><br> <img src="images/4.jpg" width="768" alt="Slide Four" /><br> </div><br> </li><br> <li data-slide-name="slide5"><br> <h2><span>Слайд Пять</span></h2><br> <div><br> <img src="images/5.jpg" alt="Slide Five" /><br> </div><br> </li><br> </ol><br> <noscript><br> <p>Для работы приложения требуется JavaScript</p><br> </noscript><br> </div><br> <a href="index2.html#slide1"><h2>Версия аккордеона на CSS3</h2></a><br><br> </body><br></html><br>

В заголовке добавляются все необходимые библиотеки и стили (jQuery, jquery.easing и liteAccordion), а также инициализация плагина. А в теле документа представлена структура аккордеона (упорядоченный список) со слайдами. Типовая структура для аккордеонов.

Аккордеон на CSS3

Теперь построим аккордеон на CSS3. Для начала удалим весь код JavaScript и файл стилей liteaccordion.css. Подготовим собственные стили для нашего проекта. Также добавим ссылки в заголовки слайдов, чтобы получить возможность переключать слайды. в результате изменений структура документа станет следующей:
<!DOCTYPE HTML><br><html lang="ru"><br> <head><br> <meta charset="utf-8" /><br> <title>Преобразуем аккордеон jQuery в аккордеон на CSS3 | Материалы сайта RUSELLER.COM</title><br><br> <!-- Файлы CSS --><br> <link href="css/layout.css" rel="stylesheet" /><br> <link href="css/main.css" rel="stylesheet" /><br> </head><br> <body><br> <header><br> <h2>Преобразуем аккордеон jQuery в аккордеон на CSS3</h2><br> </header><br><br> <h1>Версия на CSS3</h1><br> <div class="accordion css3accordion"><br> <span id="slide1"></span><br> <span id="slide2"></span><br> <span id="slide3"></span><br> <span id="slide4"></span><br> <span id="slide5"></span><br> <ol><br> <li class="slide1"><br> <a href="#slide1"><h2><span>Слайд Один</span></h2></a><br> <div><br> <img src="images/1.jpg" alt="Слайд Один" /><br> </div><br> </li><br> <li class="slide2"><br> <a href="#slide2"><h2><span>Слайд Два</span></h2></a><br> <div><br> <img src="images/2.jpg" alt="Слайд Два" /><br> </div><br> </li><br> <li class="slide3"><br> <a href="#slide3"><h2><span>Слайд Три</span></h2></a><br> <div><br> <img src="images/3.jpg" alt="Слайд Три" /><br> </div><br> </li><br> <li class="slide4"><br> <a href="#slide4"><h2><span>Слайд Четыре</span></h2></a><br> <div><br> <img src="images/4.jpg" alt="Слайд Четыре" /><br> </div><br> </li><br> <li class="slide5"><br> <a href="#slide5"><h2><span>Слайд Пять</span></h2></a><br> <div><br> <img src="images/5.jpg" alt="Слайд Пять" /><br> </div><br> </li><br> </ol><br> </div><br> <a href="index3.html"><h2>Версия аккордеона на CSS3 с автоматическим проигрыванием</h2></a><br><br> </body><br></html><br>

Также добавим несколько элементов span. По умолчанию они будут скрыты, но мы будем использовать их для обработки события Onclick. Теперь создадим стили для аккордеона CSS3 - сначала для внешнего контейнера и внутренних элементов span:
/* Аккордеон CSS3 */<br>.css3accordion {<br> border: 9px solid #353535; <br> border-radius: 6px;<br> padding: 5px 5px 6px 0; <br> background: #030303; <br> height: 320px;<br> width: 960px;<br><br> /* Тени CSS3 */<br> -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); <br> -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5); <br> -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);<br> -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);<br> box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);<br>}<br><br>/* Скрываем первый уровень */<br>.css3accordion > span {<br> display: none<br>}

И затем определяем стили для остальных элементов:

/* Основные стили и слайды аккордеона */<br>.css3accordion ol {<br> height: 100%;<br> list-style: none;<br> overflow: hidden;<br> position: relative;<br>}<br>.css3accordion li {<br> float: left;<br> height: 100%;<br> overflow: hidden;<br> position: relative;<br> width: 48px;<br><br> /* Переходы CSS3 для слайдов */<br> -webkit-transition: all 0.9s ease-in-out;<br> -moz-transition: all 0.9s ease-in-out;<br> -ms-transition: all 0.9s ease-in-out;<br> -o-transition: all 0.9s ease-in-out;<br> transition: all 0.9s ease-in-out;<br>}<br><br>.css3accordion li a {<br> display: block;<br> float: left;<br> height: 320px;<br> position: relative;<br> width: 48px;<br>}<br><br>/* Заголовки слайдов */<br>.css3accordion h2 {<br> font-size: 16px;<br> font-weight: normal;<br> height: 48px;<br> left: 0;<br> line-height: 265%;<br> margin: 0;<br> position: absolute;<br> top: 0;<br> width: 320px;<br> z-index: 1;<br><br> -webkit-backface-visibility: hidden;<br> -webkit-transform: translateX(-100%) rotate(-90deg); <br> -webkit-transform-origin: right top; <br> -moz-transform: translateX(-100%) rotate(-90deg);<br> -moz-transform-origin: right top; <br> -ms-transform: translateX(-100%) rotate(-90deg);<br> -ms-transform-origin: right top; <br> -o-transform: translateX(-100%) rotate(-90deg); <br> -o-transform-origin: right top; <br> transform: translateX(-100%) rotate(-90deg); <br> transform-origin: right top; <br>}<br>.css3accordion h2 span { <br> background-color: #353535;<br> border-radius: 4px;<br> color: #fff;<br> display: block;<br> margin-top: 5px;<br> padding-right: 10%;<br> text-align: right;<br><br> -webkit-user-select: none;<br> -moz-user-select: none;<br> -ms-user-select: none;<br> -o-user-select: none;<br> user-select: none; <br>}<br>.css3accordion h2 span:hover { <br> background-color: #353535;<br> background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));<br> background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);<br> background: -moz-linear-gradient(left, #353535 0%, #555555 100%);<br> background: -ms-linear-gradient(left, #353535 0%,#555555 100%);<br> background: -o-linear-gradient(left, #353535 0%,#555555 100%);<br> background: linear-gradient(left, #353535 0%,#555555 100%);<br> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );<br>}<br><br>/* Внутреннее содержание слайда */<br>.css3accordion li div {<br> margin-left: 5px;<br> padding-left: 48px;<br>}

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

/* Объект-счетчика */<br>.css3accordion h2 span:after { <br> color: #080808;<br> font-weight: bold;<br> left: 10%;<br> position: absolute;<br> text-shadow: -1px 1px 0 #555555;<br> top: 10%;<br><br> /* Вращение CSS3 для счетчика */<br> -webkit-transform: rotate(90deg); <br> -moz-transform: rotate(90deg); <br> -ms-transform: rotate(90deg); <br> -o-transform: rotate(90deg); <br> transform: rotate(90deg);<br>}<br>/* Значения счетчика */<br>li.slide1 h2 span:after {<br> content: "1";<br>}<br>li.slide2 h2 span:after {<br> content: "2";<br>}<br>li.slide3 h2 span:after {<br> content: "3";<br>}<br>li.slide4 h2 span:after {<br> content: "4";<br>}<br>li.slide5 h2 span:after {<br> content: "5";<br>}

И в завершении реализуем обработку события Onclick:

/* Действия по нажатию кнопки мыши */<br>#slide1:target ~ ol li.slide1,<br>#slide2:target ~ ol li.slide2,<br>#slide3:target ~ ol li.slide3,<br>#slide4:target ~ ol li.slide4,<br>#slide5:target ~ ol li.slide5 {<br> width: 768px;<br>}<br>#slide1:target ~ ol li.slide1 span,<br>#slide2:target ~ ol li.slide2 span,<br>#slide3:target ~ ol li.slide3 span,<br>#slide4:target ~ ol li.slide4 span,<br>#slide5:target ~ ol li.slide5 span { <br> background: #353535;<br> background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));<br> background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);<br> background: -moz-linear-gradient(left, #353535 0%, #555555 100%);<br> background: -ms-linear-gradient(left, #353535 0%,#555555 100%);<br> background: -o-linear-gradient(left, #353535 0%,#555555 100%);<br> background: linear-gradient(left, #353535 0%,#555555 100%);<br> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );<br>}

Автоматическое проигрывание

Для реализации автоматического проигрывания отключим обработку события Onclick и изменим анимацию:

/* Автоматическая анимация */<br>.css3accordion li {<br> -webkit-animation-name: anim_slides;<br> -webkit-animation-duration: 25.0s;<br> -webkit-animation-timing-function: ease-in-out;<br> -webkit-animation-iteration-count: infinite;<br> -webkit-animation-direction: normal;<br> -webkit-animation-delay: 0;<br> -webkit-animation-play-state: running;<br> -webkit-animation-fill-mode: forwards;<br><br> -moz-animation-name: anim_slides;<br> -moz-animation-duration: 25.0s;<br> -moz-animation-timing-function: ease-in-out;<br> -moz-animation-iteration-count: infinite;<br> -moz-animation-direction: normal;<br> -moz-animation-delay: 0;<br> -moz-animation-play-state: running;<br> -moz-animation-fill-mode: forwards;<br>}<br><br>.css3accordion li:nth-child(2) {<br> -webkit-animation-delay: 5.0s;<br> -moz-animation-delay: 5.0s;<br>}<br>.css3accordion li:nth-child(3) {<br> -webkit-animation-delay: 10.0s;<br> -moz-animation-delay: 10.0s;<br>}<br>.css3accordion li:nth-child(4) {<br> -webkit-animation-delay: 15.0s;<br> -moz-animation-delay: 15.0s;<br>}<br><br>.css3accordion li:nth-child(5) {<br> -webkit-animation-delay: 20.0s;<br> -moz-animation-delay: 20.0s;<br>}<br><br>@-webkit-keyframes anim_slides {<br> 0% {<br> width: 48px;<br> }<br> 20% {<br> width: 768px;<br> }<br> 40% {<br> width: 48px;<br> }<br> 100% {<br> width: 48px;<br> }<br>}<br>@-moz-keyframes anim_slides {<br> 0% {<br> width: 48px;<br> }<br> 20% {<br> width: 768px;<br> }<br> 40% {<br> width: 48px;<br> }<br> 100% {<br> width: 48px;<br> }<br>}

Источник

Редакции сообщения
0
Teresa
не в сети давно
На сайте с 14.06.2012
Участник
0
09:19

А где образец результата для чайников? 🙂

Редакции сообщения
0
moto
не в сети 2 часа
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
09:26

Вот он 🙂

Редакции сообщения
0
Teresa
не в сети давно
На сайте с 14.06.2012
Участник
0
09:37

Красиво!!! 🙂

Редакции сообщения
0
moto
не в сети 2 часа
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
09:40

Teresa, ты на свой сайт можешь поставить и jquery плагин, для вордпресса их полно, через админку просто добавишь фотки и все

Редакции сообщения
0
Teresa
не в сети давно
На сайте с 14.06.2012
Участник
0
09:43

А он потом не будет долго открываться???

Редакции сообщения
0
moto
не в сети 2 часа
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
09:49

А почему он должен долго открываться? 🙂

Редакции сообщения
0
ksr123
не в сети давно
На сайте с 25.09.2012
Участник
0
03:29

Первый раз слышу такое название... 🙂 Вообще не особо удобнеая штука.

Редакции сообщения
0
Cergo
не в сети давно
На сайте с 06.06.2012
Участник
0
00:40

Красиво, и код валидный, что бывает редко.
А кто нибудь встречал слайдер, с переворачивающимися страницами?

Редакции сообщения
0
moto
не в сети 2 часа
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
23:09

Cergo сказал(а)
А кто нибудь встречал слайдер, с переворачивающимися страницами?

11 пункт

Редакции сообщения
0
Cergo
не в сети давно
На сайте с 06.06.2012
Участник
0
00:26

Я имел ввиду, как сделано на гифке

Форум

Редакции сообщения
0
moto
не в сети 2 часа
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
00:41

Такое подойдет?

Редакции сообщения
0
Cergo
не в сети давно
На сайте с 06.06.2012
Участник
0
11:29

Не совсем.
Хочу сделать в .html слайдер зацикленный при помощи jquery.cycle.all.min.js
Надо описать функцию типа fx: 'fade' только перелистывание с угла.
Может, соберусь и сделаю, но думаю, кто то уже сделал.

Редакции сообщения
0
moto
не в сети 2 часа
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
11:30

видел где то, как найду выложу.

Редакции сообщения
0

Ваше имя *

Ваш E-mail *

не публикуется

Текст сообщения *