[CSS]ソーシャルボタンのリストが蛇腹状に折り畳まれるスタイルシート

サイト構築 -CSS

Post on:2013年1月29日

sponsorsr

ソーシャルサービスのボタンを配置したリストがアニメーションで蛇腹状に折り畳まれるスタイルシートを紹介します。

CSS 3D folding list with social buttons

デモ
実装

デモ

デモページを下にスクロールすると、デモがあります。
デモはCSSの3D変形に対応したブラウザでご覧ください。

CSSの3D変形に対応したブラウザ一覧

デモページ：閉じた状態

スクロールすると開いた状態になり、閉じるのは一番上のグレーのバーをクリックします。

デモページ：開いた状態

実装

外部ファイル

jQueryとModernizrを</body>の上に外部ファイルとして記述します。

<script src="https://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>

HTML

一番上のグレーはh2要素で、各ソーシャルボタンを配置するパネルはリスト要素で実装します。

<h2 class="connect">Connect with me:</h2>
<ul class="folding folded">
	<li class="fb">
		<div class="content">
			<div id="fb-root"></div>
			<div class="fb-like" data-href="https://www.facebook.com/RedTeamDesign" data-send="false" data-layout="button_count" data-show-faces="false"></div>
			<a href="https://www.facebook.com/RedTeamDesign" class="fontawesome-facebook"></a>
		</div>
	</li>
	<li class="tw">...</li>
	<li class="gp">...</li>
	<li class="rss">...</li>
</ul>

JavaScript

Modernizrの使用により、CSSの3Dアニメーションをサポートするブラウザに折り畳みのアニメーションを適用します。

<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

リストのスタイルや折り畳みのアニメーションは下記のスタイルシートを使用しています。
※ベンダープレフィックスは省略

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

複数のドメインをまたがるスクリプトの利用

各ソーシャルサービスのボタンを設置する際に、複数のドメインをまたがるスクリプトを利用します。その際に下記のスニペットを使用し、各スクリプトをロードします。

(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