Складывающийся 3D список
3D трансформации CSS - чудесный инструмент. С их помощью можно создавать удивительные эффекты. Какая идея будет реализована в данном уроке? Допустим, у вас есть блог, а внизу записи располагается эффектный складывающийся 3D список кнопок различных социальных сетей, и когда читатель прокручивает страницу вниз до конца список плавно раскрывается. Отличный способ для привлечения внимания.
Разметка HTML
Разметка построена с использованием неупорядоченного списка, который содержит кнопки и ссылки для социальных сетей. Заголовок списка позволяет изменять его состояние.
Каждый элемент li
имеет класс, который используется для установки цвета: голубой для Twitter, оранжевый для RSS и так далее. Классы fontawesome-*
используются для вывода иконок социальных сетей с помощью шрифта Awesome.
<h2 class="connect">Свяжитесь со мной</h2> <ul class="folding folded"> <li class="fb"> <div class="content"> [кнопка Facebook] <a href="/" class="fontawesome-facebook"></a> </div> </li> <li class="tw"> <div class="content"> [кнопка Twitter] <a href="/" class="fontawesome-twitter"></a> </div> </li> <li class="gp"> <div class="content"> [кнопка Google+] <a href="/" class="fontawesome-google-plus"></a> </div> </li> <li class="rss"> <div class="content"> [ссылка на RSS] <a href="/" class="fontawesome-rss"></a> </div> </li> </ul>
JavaScript
Нам нужно использовать jQuery для управления процессом складывания списка и Modernizr для определения поддержки 3D трансформаций CSS.
Код выполняется только если класс csstransforms3d
добавляется скриптом Modernizr. Преимуществом такого подхода является то, что остальной код jQuery не будет выполняться в браузерах, которые не поддерживают 3D трансформации CSS.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> <script> (function(){ if ($('html').hasClass('csstransforms3d')) { var foldingList = $('.folding'), foldingListHeight = $('.folding').height(); topElemOffset = foldingList.offset().top, // Функция для раскладывания списка unfold = function(){ setTimeout(function(){ if (foldingList.hasClass('folded')){ foldingList.removeClass('folded'); return; } }, 500); } // Складываем/раскладываем список $('.connect').on("click",function(){ foldingList.toggleClass('folded'); }) // Если нужно, раскладываем список if (topElemOffset <= $(window).height() - foldingListHeight) unfold(); // Проверка раскладывания списка при прокручивании страницы вниз / изменении размеров $(window).on("scroll resize", function(){ var th = $(this); if (th.scrollTop() + th.height() - foldingListHeight >= topElemOffset) unfold(); }) } })() </script>
CSS
Для упрощения восприятия кода в тексте опущены префиксы браузеров.
.folding { list-style-type: none; margin: 0; padding: 0; } .csstransforms3d .folding { perspective: 700px; } .folding li { height: 50px; color: #fff; padding-left: 30px; border-left: 30px solid rgba(0,0,0,.1); } .csstransforms3d .folding li { transition: ease .15s all; } .csstransforms3d .folding li:nth-child(even) { margin-top: -1px; transform-origin: 50% 100%; transform: rotateX(10deg); } .csstransforms3d .folding li:nth-child(odd) { transform-origin: 50% 0%; transform: rotateX(-10deg); } .folding .fb { background-color: #3959a6; } .folding .tw { background-color: #2fc6ff; } .folding .gp { background-color:#d84d30; } .folding .rss { background-color: #ff7e09; } .rss-link { color: #fff; font: .9em Arial, Helvetica; } .folding .content { position: relative; overflow: hidden; display: block; height: 20px; padding: 15px 0; } .csstransforms3d .folded li:nth-child(even) { margin-top: -75px; transform: rotateX(75deg); background-image: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,.5)); } .csstransforms3d .folded li:nth-child(odd) { transform: rotateX(-75deg); } .csstransforms3d .folded .content { display: none; } .connect { padding: 12px 0 12px 30px; margin: 0 0 1px 0; color: #fff; border-left: 30px solid rgba(0,0,0,.2); cursor: pointer; font: bold .9em 'Lucida sans unicode',Arial, Helvetica; background-color: #555; } .csstransforms3d .connect { background-image: url(data:image/png;base64[shortened]); background-repeat: no-repeat; background-position: -24px center; }
Стили для шрифта Awesome
Кроме выше указанных стилей нужно также добавить несколько правил для шрифта, который используется для иконок социальных сетей. Использование шрифта для иконок может показаться избыточным, но если в проекте уже применяется такой шрифт, то техника может оказаться весьма к месту.
[class*="fontawesome-"]::before { font-family: 'FontAwesome', sans-serif; position: absolute; font-size: 55px; right: 30px; bottom: -15px; color: #fff; } [class*="fontawesome-"]:hover::before { bottom: -10px; }
Оптимизированная асинхронная загрузка скриптов
Когда нужно работать со множеством скриптов для различных инструментов и социальных сетей, использование такой техники может оказаться очень полезной для оптимизации производительности страницы.
<script> (function(doc, script) { var js, fjs = doc.getElementsByTagName(script)[0], add = function(url, id) { if (doc.getElementById(id)) {return;} js = doc.createElement(script); js.src = url; id && (js.id = id); fjs.parentNode.insertBefore(js, fjs); }; // Кнопка Google+ add('https://apis.google.com/js/plusone.js'); // SDK Facebook add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=292896510767559', 'facebook-jssdk'); // SDK Twitter add('//platform.twitter.com/widgets.js', 'twitter-wjs'); }(document, 'script')); </script>
Техника использования jQuery
Можно привязывать несколько событий единственным использованием функции jQuery’s .on()
. В нашем случае одинаковый код применяется при прокручивании страницы и изменении размера окна.
$(window).on("scroll resize", function(){ // код обработчика })
Обратная совместимость
В случае отсутствия поддержки 3D трансформаций CSS в браузере, наш складывающий список выводится в простом виде без эффектов:
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/tCC9jTOYX-k/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.