【CSSのみで作成】スクロールを促すアニメーション

カテゴリ : CSSとは, html/css, HTMLとは

Webページのヘッダー部分などに良くみられる、ページ下へのスクロールを促すためのサンプルと解説になります。
線が上から下にアニメーションをするシンプルな内容です。

svgやjs(jQuery )などは使用せず、CSS3のanimationプロパティのみで作成をします。

サンプルのコピー&ペーストのみで実装ができます。

記述例(html / css):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
	<style>
		#test{
			background-color: #ccc;
			height: 150px;
			overflow: hidden
		}

		#test:after{
			content:"";
			display: block;
			width: 1px;
			border-left:1px #000 solid;
			animation:scroll 2s ease 0s infinite normal;
			margin: 0 auto 0;
		}

		@keyframes scroll{
			0%{
				height: 0;
			}
			50%{
				height: 150px;
				margin-top: 0;
			}
			100%{
				margin-top: 150px;
				height: 150px;
			}
		}
	</style>
</head>

<body>
	<p id="test"></p>
</body>
</html>

実際の動きはデモからご覧いただけます。

解説:

・HTMLの記述はp(id名test)のみとなります。

・CSSで#testに対しheightを指定し、overflow:hiddenで子要素がはみ出した場合の処理を隠すようにします。(背景色は領域確認用なので削除して構いません)

・#test内に:afterの記述で要素を作成、content:”” で内容は空としborder-leftでアニメーションさせる線を表現します。

・キーフレームの記述で0%時点で高さを0に、50%で高さを150pxにすることで上から下に線が描画されます。

・また50%時点でmargin-topを0に、100%でmargin-topを150pxにすることで線の上の位置を移動させるアニメーションを実装します。

タグ:||

【教材用サンプル】CSSのtransitionとborderによるアニメーション【シンプル】

カテゴリ : html/css

transitionとborderを使った簡単なアニメーション

マウスオーバー時のみ下線がアニメーションで表示される動きのサンプルです。

デモ

この記事の続きを読む

【CSS3解説】E:nth-of-type() 順番を指定する擬似クラスについて

カテゴリ : CSSとは, html/css

要素名:nth-of-type()

CSSのセレクタ で要素の順番(番号・奇数・偶数・倍数など)を指定することができます。
主な指定方法は以下の3種類となります。

  • ()内に数値入力で順番指定。
    E:nth-of-type(3){プロパティ:値}
  • ()内にキーワード指定「even」で偶数、「odd」で奇数を指定。
    E:nth-of-type(even){プロパティ:値} , E:nth-of-type(odd){プロパティ:値}
  • ()内に数値nで倍数指定。
    E:nth-of-type(3n){プロパティ:値}

nth-of-typeの記述例(class名などは任意):

この記事の続きを読む

【教材用サンプル】CSS3によるラインアニメーション【シンプル】

カテゴリ : html/css, 教材サンプル

スクリーンショット 2019-01-31 18.58.13

CSS3による ラインアニメーションです。
教材のためのサンプルで作成したものです。

デモサイト
CSS3のアニメーションプロパティについては以下のサイトで詳しく解説がされています。
animation-CSS3リファレンス

 

以下のソースコードをコピペで確認できるので、必要箇所をいじって編集してください。

この記事の続きを読む

最近の投稿

About Web Site & Key Word

このWebサイトについて&キーワード

■ html,css,JavaScriptなどのweb言語についての解説やメモ、Flash(ActionScript)でゲーム制作を行うための技術紹介、 WordPressを使用したCMS作成のための解説やメモ、アプリ制作の記録や解説やメモ、またそれらにまつわるニュースやブログを掲載します。

■ web制作,CMS制作,ゲーム制作,アプリ制作,
Android,iOS,iPhone,iPad,html,css,JavaScript,Flash,ActionScript,php,cgi,WordPress,Titanium Studio,ブログ,ニュース