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 в браузере, наш складывающий список выводится в простом виде без эффектов