Складывающийся 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-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.