Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="dammy"><div>Find the share button to scroll up & down</div></div>
<div id="sns-group-top" class="sns-group sns-group-top">
		<div class="sns-buttons sns-buttons-pc">
				<p class="sns-share-msg">Share</p>
				<ul class="snsb snsb-balloon clearfix">
						<li class="balloon-btn twitter-balloon-btn">
								<span class="balloon-btn-set">
	<span class="arrow-box">
	<a href="//twitter.com/search?q=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" target="blank" class="arrow-box-link twitter-arrow-box-link" rel="nofollow">
	<span class="social-count twitter-count">2</span>
								</a>
								</span>
								<a href="//twitter.com/share?text=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82&amp;url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F&amp;related=MrYhira"
								target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow">
										<span class="fa fa-twitter"></span>
								</a>
								</span>
						</li>
						<li class="balloon-btn facebook-balloon-btn">
								<span class="balloon-btn-set">
	<span class="arrow-box">
	<a href="//www.facebook.com/sharer/sharer.php?u=//wp-simplicity.com/simplicity1-8-4/&amp;t=Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。" target="blank" class="arrow-box-link facebook-arrow-box-link" rel="nofollow">
	<span class="social-count facebook-count">5</span>
								</a>
								</span>
								<a href="//www.facebook.com/sharer/sharer.php?u=//wp-simplicity.com/simplicity1-8-4/&amp;t=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82"
								target="blank" class="balloon-btn-link facebook-balloon-btn-link" rel="nofollow">
										<span class="fa fa-facebook"></span>
								</a>
								</span>
						</li>
						<li class="balloon-btn googleplus-balloon-btn">
								<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//plus.google.com/share?url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="arrow-box-link googleplus-arrow-box-link" rel="nofollow">
<span class="social-count googleplus-count">1</span>
								</a>
								</span>
								<a href="//plus.google.com/share?url=http%3A%2F%2Fwp-simplicity.com%2Fsimplicity1-8-4%2F" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="balloon-btn-link googleplus-balloon-btn-link"
								rel="nofollow">
										<span class="fa fa-google-plus"></span>
								</a>
								</span>
						</li>
						<li class="balloon-btn hatena-balloon-btn">
								<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//b.hatena.ne.jp/entry/wp-simplicity.com/simplicity1-8-4/" target="blank" class="arrow-box-link hatena-arrow-box-link" rel="nofollow">
<span class="social-count hatebu-count">0</span>
								</a>
								</span>
								<a href="//b.hatena.ne.jp/add?mode=confirm&amp;url=//wp-simplicity.com/simplicity1-8-4/&amp;title=Simplicity1.8.4%E5%85%AC%E9%96%8B%E3%80%82%E8%A8%98%E4%BA%8B%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E6%A9%9F%E8%83%BD%E8%BF%BD%E5%8A%A0%E3%80%81%E3%81%82%E3%81%A8%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E4%BF%AE%E6%AD%A3%E3%81%AA%E3%81%A9%E3%80%82"
								target="blank" class="balloon-btn-link hatena-balloon-btn-link" rel="nofollow">
										<span class="icon-hatena"></span>
								</a>
								</span>
						</li>
						<li class="balloon-btn pocket-balloon-btn">
								<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//getpocket.com/edit?url=//wp-simplicity.com/simplicity1-8-4/" target="blank" class="arrow-box-link pocket-arrow-box-link" rel="nofollow">
<span class="social-count pocket-count">3</span>
								</a>
								</span>
								<a href="//getpocket.com/edit?url=//wp-simplicity.com/simplicity1-8-4/" target="blank" class="balloon-btn-link pocket-balloon-btn-link" rel="nofollow">
										<span class="fa fa-get-pocket"></span>
								</a>
								</span>
						</li>
						<li class="balloon-btn evernote-balloon-btn">
								<span class="balloon-btn-set">
<span class="arrow-box">
<a href="#" onclick="Evernote.doClip({url:'//wp-simplicity.com/simplicity1-8-4/',
providerName:'Simplicity',
title:'Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。',
contentId:'the-content',
}); return false;" target="blank" class="arrow-box-link evernote-arrow-box-link" rel="nofollow">
CLIP!
</a>
</span>
								<a href="#" onclick="Evernote.doClip({url:'//wp-simplicity.com/simplicity1-8-4/',
providerName:'Simplicity',
title:'Simplicity1.8.4公開。記事公開前にアラートで確認できる機能追加、あとは不具合修正など。',
contentId:'the-content',
}); return false;" target="blank" class="balloon-btn-link evernote-balloon-btn-link" rel="nofollow">
										<span class="icon-evernote"></span>
								</a>
								</span>
						</li>
						<li class="balloon-btn feedly-balloon-btn">
								<span class="balloon-btn-set">
<span class="arrow-box">
<a href="//feedly.com/index.html#subscription%2Ffeed%2F//wp-simplicity.com/feed/" target="blank" class="arrow-box-link feedly-arrow-box-link" rel="nofollow">
<span class="social-count feedly-count">273</span>
								</a>
								</span>
								<a href="//feedly.com/index.html#subscription%2Ffeed%2F//wp-simplicity.com/feed/" target="blank" class="balloon-btn-link feedly-balloon-btn-link" rel="nofollow">
										<span class="icon-feedly"></span>
								</a>
								</span>
						</li>
				</ul>
		</div>
</div>
<div class="dammy"></div>
              
            
!

CSS

              
                #sns-group-top {
	
	ul {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		position: relative;
		
		width: 32px;
		height: 2rem;
		padding: 0;
		margin: 0;
		list-style: none;
		border-radius: 30px;
		color: #fff;
		z-index: 9999;
		
		transition: .3s ease;
		
		i {
			display: block;
			position: absolute;
			top: 50%;
			transform: translate3d(50%, -50%, 0);
			z-index: 10;
		}
		
		.sns-share-msg {
			display: none;
			position: absolute;
			top: 50%;
			left: -500px;
			opacity: 0;
			font-weight: bold;
			z-index: 5;
			transition: .3s ease;
			overflow: hidden;
			visibility: hidden;
			
			&.onclick {
				display: block;
				opacity: 1;
				visibility: visible;
				//transform: translate3d(530px, -50%, 0);
			}
		}
		
		&.onclick {
			width: 100px;
		}
		
		li {
			position: relative;
			color: #fff;
			flex: 1 auto;
			top: 50%;
			//left: 100px;
			transform: translate3d(0,-50%,0);
			//width: 100px;
			
			opacity: 0;
			
			div {
				position: absolute;
				top: 50%;
				transform: translate3d(0, -50%, 0);
			}
			div:last-child {
				margin-left: 25px;
				font-size: 12px;
			}
			
		} //li
		
		
		
	} //ul
	
}

.red {
	background-color: #f00;
	color: #fff;
	
	li {
		div {
			color: #f00;
			
			a {
				color: #f00;
			}
		}
		div:last-child {
			color: #900;
			
			a:last-child {
				color: #900;
			}
		}
	}
}

.black {
	background-color: #333;
	color: #ccc;
	
	li {
		
		div {
			color: #666;
			
			a {
				color: #666;
			}
		}
		div:last-child {
			color: #000;
			
			a {
				color: #000;
			}
		}
	}
}

.tip {
	div {
		position: absolute;
		top: 50%;
		transform: translate3d(0px, -50%, 0px);
		background-color: #333;
		color: rgb(255, 255, 255);
		padding: 0px 7px;
		font-size: 14px;
		border-radius: 4px;
		width: 85px;
		transition: .3s ease;
		animation: swing linear 0.8s infinite;
		
		&::before {
			content: "";
			position: absolute;
			left: -5px;
			top: 50%;
			transform: translate3d(0,-50%,0);
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-right: 10px solid #333;
		}
	}
}

@keyframes swing {
	0% { transform: translate3d(0,-50%,0); }
	30% { transform: translate3d(7px,-50%,0); }
	60% { transform: translate3d(10px,-50%,0); }
	100% { transform: translate3d(-5px,-50%,0); }
}

.dammy {
	height: 1500px;
	position: relative;
	
	div {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%,-50%,0);
	}
}

              
            
!

JS

              
                jQuery(function($) {
		/*
		 *		色の選択 : black or red。色のスタイルはcss
		 */
		var color = "black";

		//aタグのリンク有効・無効切り替え用関数
		function disable_a(e) {
				e.preventDefault();
		}

		/*
		 *		画面内に目的の要素があるか判別する関数
		 */
		function view(target) {
				var wHeight = $(window).height(),
						tgtOffset = $(target).offset().top,
						tgtHeight = $(target).height(),
						hitover = tgtOffset + tgtHeight,
						timer = null;

				//ウィンドウがロード・スクロール・リサイズの時に発動
				$(window).on("load scroll resize", function() {
						var st = $(window).scrollTop(),
								hit = st + wHeight;

						if (timer) clearTimeout(timer);

						timer = setTimeout(function() {

								//目的の要素が画面内にある時
								if (tgtOffset < hit && hitover > st) {

										if ($(".tip").size() === 0) {
												setTimeout(function() {
														tip(target);
												}, 100);

										} else if ($(".tip").size() > 0 && $(".tip").is(":hidden")) {
												setTimeout(function() {
														showLimit(".tip");
												}, 100);

										}

								} else {
										$(".tip").stop().fadeOut().remove();
								}

						}, 200);

				}); //scroll end
		}

		/*
		 *		画面内に目的の要素がある時にメッセージを表示する関数
		 */
		function tip(target) {
				var x = $(target).find("ul").width(),
						y = $(target).find("ul").height(),
						oft = $(target).find("ul").offset().top,
						ofl = $(target).find("ul").offset().left,
						mes = "click to open",
						intip = "<div class='tip'><div>" + mes + "</div></div>",
						targetHasOnclick = $(target).find("ul").hasClass("onclick");

				//tipの入る座標
				if (!targetHasOnclick) {
						$("body").prepend(intip);
						$(".tip").css({
								position: "absolute",
								top: oft + "px",
								left: ofl + x + 10 + "px",
								height: y
						});
						showLimit(".tip");
				}
		}

		//limitミリ秒間だけ表示する関数
		function showLimit(target) {
				var limit = 2000;
				$(target).fadeIn().queue(function() {
						setTimeout(function() {
								$(target).dequeue();
						}, limit);
				});
				$(target).fadeOut();
		}

		$(function() {
				var snsTopUl = $("#sns-group-top ul");

				/*
				 *		前準備。
				 *		元々のSimplicityのhtmlの構造をjQueryで書き換える
				 */

				//ulに.red(or black)追加	
				snsTopUl.removeClass().addClass(color);

				//メッセージ部分のタグ付け替え
				$(".sns-share-msg")
						.replaceWith(function() {
								var cls = $(this).attr("class");
								var txt = $(this).text();
								$(this)
										.replaceWith("<span class='" + cls + "'>" + txt + "</span>");
						});

				/*
				 *		icon-がついている以外の全クラス削除
				 *		codepenではアイコンが表示できないのでhtmlを
				 *		fontAwesomeに変更している
				 *		//で切り替え
				 */
				//snsTopUl.find("*").not("[class^=icon-]").removeClass();
				snsTopUl.find("*").not("[class^='fa fa-']").removeClass();

				//シェアアイコン追加
				snsTopUl.prepend("<i class='fa fa-share-alt'></i>");

				//ul li のaを囲むspan?解除
				snsTopUl.find("a").unwrap();

				//カウントとアイコンの順番入れ替え
				$("#sns-group-top li").each(function() {
						var first_a = $(this).children("a:first"),
								last_a = $(this).children("a:last");
						first_a.before(last_a);
				});

				//シェアメッセージを ulの先頭に移動
				$(".sns-share-msg").prependTo(snsTopUl);
				var ssMes = $(".sns-share-msg"),
						tWidth = ssMes.width(),
						tOfsl = ssMes.offset().left;
				ssMes.css({
						left: tOfsl + tWidth * -1
				});

				//.arrow-boxを囲むタグを解除
				$("#sns-group-top .arrow-box").each(function() {
						$(this).unwrap();
				});

				//liの中のaをdivで囲む
				$("#sns-group-top li").children("a").wrap("<div></div>");

				//デフォルトでリストアイテムのaタグを無効化
				$("#sns-group-top li").find("a").each(function() {
						$(this).on("click", disable_a);
				});

				/*	-----------------------------------------------
				 *		画面内に目的の要素があるか判断する関数の呼び出し
				 */
				view("#sns-group-top");

				//ボタンをホバーした時の動作
				snsTopUl.hover(function() {
						if ($(".tip").size() !== 0) {
								$(".tip").remove();
						}
				});

				//シェアボタンをクリックした時の動作
				snsTopUl.on("click", function() {
						$(this).toggleClass("onclick");

						if ($(this).hasClass("onclick")) {
								/*
								 *		#sns-group-top ulがonclickを持っている時の処理
								 */

								//#sns-group-op ulがonclickを持っていたらリンク有効
								$("#sns-group-top li").find("a").each(function() {
										$(this).off("click", disable_a);
								});

								//シェアメッセージをアニメーションさせるためにclass追加
								$(".sns-share-msg").addClass("onclick");

								//シェアメッセージのcssの配置を自動計算させる&アニメーション
								var ulOffset = snsTopUl.offset().left,
										ulWidth = snsTopUl.width(),
										ssMsgOffsetLeft = $(".sns-share-msg").offset().left,
										ssMsgMovePosition = (ssMsgOffsetLeft * -1) + ulOffset + ulWidth;
								$(".sns-share-msg").css({
										transform: "translate3d(" + ssMsgMovePosition + "px,-50%,0)"
								});

								//リストアイテムのアニメーション処理
								snsTopUl
										.find("li")
										.css({
												opacity: 0,
												left: 120 + "px"
										})
										.each(function(i, value) {
												$(this).delay(i * 80).animate({
														left: i * 80 + 120,
														opacity: 1
												})
										});

						} else {
								/*
								 *		#sns-group-top ulがonclickを持っていない時の処理
								 */

								//.onclickとstyleからtransformを消す
								$(".sns-share-msg").removeClass("onclick").removeAttr("style", "transform");

								//リストアイテムのaリンク無効化
								$("#sns-group-top li").find("a").each(function() {
										$(this).on("click", disable_a);
								});

								//リストアイテムの数を数えて、アニメーションで消す処理
								var childs = $("#sns-group-top ul li").length;
								for (var j = childs * -1; j < 1; j++) {
										$("#sns-group-top ul li").eq(j).delay(80).animate({
												left: j * 80,
												opacity: 0
										});
								} //for end
						} // if end

				}); //onclick		
		});

});
              
            
!
999px

Console