Tarokenlog

Contact

hrでグラデーション付きの線をニョーンっと表示する方法

ポートフォリオサイト的なのを作ってた時にhrにグラデーションを付けてページが読み込まれたらニョーンっと表示されるようにしました。

こんな感じです。
Demo


hrタグを入れる

まずは、普通にhrタグを好きなとこに入れます。
＊今回はhrのみ

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>demo</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<!-- jqueryCDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<hr>
</body>
</html>

CSSでスタイリングする

body {
	margin: 0 auto;
	text-align: center;
}

hr {
	margin-top: 40%;
	border: none;
	width: 0%;
	height: 3px;
	background-image: -webkit-linear-gradient(-45deg, rgba(4, 191, 207, 0.7), rgba(191, 25, 203, 0.7));
	background-image: -moz-linear-gradient(-45deg, rgba(4, 191, 207, 0.7), rgba(191, 25, 203, 0.7));
	background-image: -ms-linear-gradient(-45deg, rgba(4, 191, 207, 0.7), rgba(191, 25, 203, 0.7));
	background-image: -o-linear-gradient(-45deg, rgba(4, 191, 207, 0.7), rgba(191, 25, 203, 0.7));
	transition: 2s;
}

borderをnoneにしないと黒い枠みたいなのが表示されます。
こんな感じ

noneにするとこんな感じ

heightで線の太さ
backgroundのliner-gradientでグラデーション
transitionでニョーンっとなるまでの時間
withを0にして後からjqueryで50%にしてニョーンっとします。

jqueryでニョーン

jqueryでhrが可視範囲に入った時にCSSのwithを50％に変えます。

$(function(){
	$("hr").css('width', '50%');
});

以上でページが読み込まれた時にニョーンっと表示されるようになります。

firefoxだとちょっと細くなるのでheightが1pxでborderをnoneにしてないとグラデーションが見えなくなります。(borderの色になります。なにも設定してないと黒)

ちなみにポートフォリオサイトはこちら
Portfolio
＊まだ未完成ですww

以上です〜

以下の記事と組み合わせると可視範囲にきた時にニョーンっと表示できます。

jqueryとcssで画面をスクロール時にフワッと文字や要素が現れるやつ

今回はjqueryとcssと使って、画面をスクロールした時にフワッと文字や要素を表示してみました。自分用の備忘録ですが、気になる方はチェックしてみてください。


Posted

in

,

Tags: