Статьи

CSS 3D складной список с социальными кнопками

Ноябрь 14, 2018

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

Итак, в чем идея этой статьи? Допустим, у вас есть блог, я думал о том, чтобы иметь красивый трехмерный список сворачивания, который содержит основные социальные кнопки, и когда люди дойдут до конца статьи, начальный сложенный список будет плавно разворачиваться. Это может быть полезно, если вы хотите привлечь внимание пользователей, например: «Эй, тебе понравилась моя статья? Свяжись со мной! » ,

CSS 3D складной список с социальными кнопками

Посмотреть демо

HTML

Разметка построена с использованием неупорядоченного списка, который содержит фрагменты и ссылки для каждой социальной сети. Кроме того, заголовок сможет переключать список складывания.

Каждый из них liимеет атрибут класса крючка HTML для использования цветовой кодировки: синий для Twitter, оранжевый для RSS и так далее. Они fontawesome-*отвечают за рендеринг социальных иконок с использованием Font Awesome .

<h2 class="connect">Connect with me</h2>
<ul class="folding folded">
	<li class="fb">
		<div class="content">
			[Facebook snippet]
			<a href="" class="fontawesome-facebook"></a>
		</div>
	</li>
	<li class="tw">
		<div class="content">
			[Twitter snippet]
			<a href="" class="fontawesome-twitter"></a> 
		</div>
	</li>
	<li class="gp">
		<div class="content">
			[Google+ snippet]
			<a href="" class="fontawesome-google-plus"></a>
		</div>
	</li>
	<li class="rss">
		<div class="content">
			[Simple RSS link]
			<a href="" class="fontawesome-rss"></a>
		</div>
	</li>
</ul>

JavaScript

Нам понадобится немного jQuery для манипулирования списком сворачивания и Modernizr для обнаружения 3D-преобразований CSS.

Как вы можете видеть ниже, код будет выполняться, только если csstransforms3dкласс HTML добавлен Modernizr. Преимущество здесь в том, что остальная часть кода jQuery не будет выполняться в браузерах, которые не поддерживают CSS 3D-преобразования.

<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,
			// Function responsible for unfolding the list
			unfold = function(){
				setTimeout(function(){
					if (foldingList.hasClass('folded')){
						foldingList.removeClass('folded');
						return;
					}
				}, 500);
			}

		// Fold/Unfold the list
		$('.connect').on("click",function(){
			foldingList.toggleClass('folded');
		})
		// If needed, unfold the list right away
		if (topElemOffset <= $(window).height() - foldingListHeight)
			unfold();
		// Check whether to unfold the list when scrolling/resizing
		$(window).on("scroll resize", function(){
			var th = $(this);				
			if (th.scrollTop() + th.height() - foldingListHeight  >=  topElemOffset)
				unfold();				
		})
	}

})()
</script>

CSS

Если вы хотите узнать больше о CSS 3D-преобразованиях, то вам стоит попробовать 3D-преобразования Intro to 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;
}

/* Folding list heading */
.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;
}

Font Awesome стили

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

Для этого примера я решил включить его с помощью сервиса WeLoveFontIcons, созданного Тимом Пьетруским. Кроме того, учтите, что в прошлый раз, когда я проверял, Firefox по умолчанию не разрешал междоменные шрифты .

[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;
}

Оптимизированная асинхронная загрузка междоменных скриптов

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

(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+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script

JQuery совет

Вы можете связать несколько событий одновременно при использовании jQuery .on(). В этом случае нам приходилось использовать один и тот же код при прокрутке или изменении размера, и этот совет был очень удобен, учитывая принцип DRY.

$(window).on("scroll resize", function(){
	// code here				
})

Check jQuery Fundamentals if you want to read more about Events and Event Delegation.

The future sounds good

Think about the power of Modernizr tool translated to CSS. This is exactly what the upcoming @supports is willing to achieve: native CSS feature detection. Sounds cool, huh?

Graceful degradation

The nice part about this CSS 3D folding list is that it degrades into a simple list when CSS 3D transforms are not available, thanks to Modernizr and its features detection.

CSS 3D сворачивание списка с использованием постепенного ухудшения

Mozilla Firefox

Unfortunately, at this time on Firefox, the sides are a bit jagged when using CSS 3D transforms. Still, I’m very confident this will improve soon.

View demo

That’s it!

I’m thinking to add this piece to the end of my articles too. Until then, I’m looking forward to read your thoughts on this article. Thanks for reading it!

42
Share: