アニメーション

TOP アニメーション

button

ボタン

ベースコード

ベースのボタンcssコードは以下で共通です。
※ホバーはスマホの場合、タップと判定されてしまう場合があるため、PCのみに設定してください。


.btn-sample {
	text-align: center;
}

.btn-sample a {
	display: inline-block;
	width: 300px;
	max-width: 100%;
	font-size: 1.8rem;
	text-decoration: none;
	text-align: center;
	line-height: 1.5;
	padding: 13.5px 10px 15.5px;
	border-radius: 30px;
	background: #C5A882;
	color: #fff;
	border: solid 2px #C5A882;
	opacity: 1 !important;
	transition: all .2s;
}

色反転

ボタンの背景色と文字色を反転させます。

ボタン


@media screen and ( min-width: 769px ) {

	.btn-sample.sample-01 a:hover {
		background: #fff;
		color: #d4bea2;
	}

}

明るく

ボタンの色の彩度と明度を5-10程度明るくします。

ボタン


@media screen and ( min-width: 769px ) {

	.btn-sample.sample-02 a:hover {
		background: #d9b17e;
		border: solid 2px #d9b17e;
	}

}

シャドウ

ボタンを浮き上がらせてシャドウを落とします。

ボタン


.btn-sample.sample-03 a {
	transition: all .4s;
}

@media screen and ( min-width: 769px ) {

	.btn-sample.sample-03 a:hover {
		box-shadow: 0 4px 8px rgba( 0, 0, 0, .2 );
		transform: translateY( -5px );
	}

}

ズーム

ボタンを拡大表示します。

ボタン


.btn-sample.sample-04 a {
	transition: all .6s;
}

@media screen and ( min-width: 769px ) {

	.btn-sample.sample-04 a:hover {
		transform: scale( 1.1 );
	}

}

立体

ボタンの形状で浮き上がらせます。

ボタン


.btn-sample.sample-05 a {
	transition: all .4s;
}

@media screen and ( min-width: 769px ) {

	.btn-sample.sample-05 a:hover {
		box-shadow: 0 5px 0 #917c60;
		transform: translateY( -5px );
	}

	.btn-sample.sample-05 a:active {
		box-shadow: 0 0 0 #917c60;
		transform: none;
	}

}

article

記事

ベースコード

ベースの記事のマークアップは以下で共通です。
※ホバーはスマホの場合、タップと判定されてしまう場合があるため、PCのみに設定してください。

タイトルが入ります

ダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。（50字）


<div class="post-list">
	<div class="post">
		<a href="#">
			<figure class="img ofi">
				<img src="img.png" alt="イメージ">
			</figure>
			<div class="txt">
				<h3 class="ttl"><span>タイトルが入ります</span></h3>
				<div class="read">ダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。（50字）</div>
			</div>
		</a>
	</div>
</div>

画像ズーム

画像を半透明にしてズームします。

タイトルが入ります

ダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。（50字）


.post .img {
	margin: 0;
	background: #000;
	overflow: hidden;
}

.post .img img {
	transition: all .4s;
}

@media screen and ( min-width: 769px ) {

	.post.post-sample.sample-01:hover img {
		transform: scale( 1.1 );
		opacity: .8;
	}

}

ボーダーの色かえ

ボーダーに色をつけ、太くします。

タイトルが入ります

ダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。（50字）


.post.post-sample.sample-02 {
	position: relative;
}

.post.post-sample.sample-02::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: solid 3px #C5A882;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: all .2s;
}

@media screen and ( min-width: 769px ) {

	.post.post-sample.sample-02:hover::before {
		opacity: 1;
		visibility: visible;
		z-index: 99;
	}

}

シャドウとズーム

全体にシャドウを落としてズームします。

タイトルが入ります

ダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。（50字）


.post a {
	color: #333;
	text-decoration: none;
	transition: all .4s;
}

@media screen and ( min-width: 769px ) {

	.post.post-sample.sample-03:hover a {
		transform: translateY( -5px ) scale( 1.02 );
		box-shadow: 0 8px 8px rgba( 0, 0, 0, .1 );
	}

}

文字色や背景色を変える

文字色や背景色の色を変更します。

タイトルが入ります

ダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。（50字）


.post.post-sample.sample-04 .ttl {
	transition: all .4s;
}

.post.post-sample.sample-04 .ttl::after {
	transition: all .4s;
}

@media screen and ( min-width: 769px ) {

	.post.post-sample.sample-04:hover a {
		background: #faf7f3;
	}

	.post.post-sample.sample-04:hover .ttl {
		color: #2E344F;
	}

	.post.post-sample.sample-04:hover .ttl::after {
		background: #2E344F;
	}

}

navigation


.nav-sample {
	width: 100%;
	padding: 0 2rem;
}

.nav-sample .flex {
	width: 100%;
	justify-content: center;
	flex-wrap: nowrap;
	margin: 0 !important;
}

.nav-sample li {
	width: 30%;
	padding: 0;
	text-align: center;
	border-right: solid 1px #ddd;
}

.nav-sample li:first-child {
	border-left: solid 1px #ddd;
}

.nav-sample li::before {
	display: none;
}

.nav-sample a {
	display: block;
	padding: 1.65rem 2rem;
	font-size: 1.8rem;
	line-height: 1.5;
	color: #333;
	text-decoration: none;
	position: relative;
}

背景色

サイトのメインカラーで白抜き文字にします。


@media screen and ( min-width: 769px ) {

	.nav-sample.sample-01 a:hover {
		background: #C5A882;
		color: #fff;
	}

}

アンダーライン

アンダーラインをアニメーション付きで表示します。


.sample-02 a::after {
	content: '';
	height: 5px;
	background: #C5A882;
	position: absolute;
	right: 50%;
	bottom: 0;
	left: 50%;
	opacity: 0;
	visibility: hidden;
	transition: all .2s;
}

@media screen and ( min-width: 769px ) {

	.nav-sample.sample-02 a:hover::after {
		right: 15px;
		left: 15px;
		opacity: 1;
		visibility: visible;
	}

}

マーカー

マーカーをアニメーション付きで表示します。


.nav-sample.sample-03 a {
	display: inline-block;
}

.nav-sample.sample-03 a::after {
	content: '';
	height: 1rem;
	background: var( --main-color );
	position: absolute;
	right: 100%;
	bottom: 1.5rem;
	left: 1.5rem;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: all .2s;
}

@media screen and ( min-width: 769px ) {

	.nav-sample.sample-03 a:hover::after {
		right: 1.5rem;
		opacity: .4;
		visibility: visible;
	}

}

ドット

ドットを表示し、文字色を変更します。


.nav-sample.sample-04 a::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --main-color );
	position: absolute;
	bottom: 0;
	left: calc( 50% - 4px );
	opacity: 0;
	visibility: hidden;
	transition: all .2s;
}

@media screen and ( min-width: 769px ) {

	.nav-sample.sample-04 a:hover {
		color: var( --main-color );
	}

	.nav-sample.sample-04 a:hover::after {
		opacity: 1;
		visibility: visible;
	}

}

英字に変換

テキストをスライドし、英字に変換します。


.nav-sample.sample-05 li {
	height: 3rem;
	overflow: hidden;
}

.nav-sample.sample-05 a {
	padding: .15rem 2rem;
	transition: all .4s;
}

.nav-sample.sample-05 a::after {
	content: 'MENU';
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	display: block;
	padding: .3rem 0 0;
}

@media screen and ( min-width: 769px ) {

	.nav-sample.sample-05 li:hover a {
		transform: translateY( -3rem );
	}

}

scroll

スクロール

ベースコード

ベースの記事のマークアップは以下で共通です。
※スクロールアニメーションはスマホでも有効です。

Scroll
↓

見出しが入ります。

この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。


<div class="scroll-cont inview">
	<h2>見出しが入ります。</h2>
	<p>この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。この文章はダミーです。実際とは異なります。レイアウト、コピー、写真の3要素が響きあい美しいデザインとなります。</p>
</div>

<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/jquery.inview.min.js"></script>
<script>
jQuery( function($) {
	// inview
	$( '.inview' ).on( 'inview', function( event, isInView ) {
		$( this ).addClass( 'view' );
	});
});
</script>

フェードイン

画面に入ったらフェードインします。少し上昇させる、時間差をつけるなどすると質感が上がります。

Scroll
↓

見出しが入ります。


.scroll-sample.sample-01 .scroll-cont > * {
	transform: translateY( 2rem );
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: all .6s;
	transition-delay: .8s;
}

.scroll-sample.sample-01 .scroll-cont p {
	transition-delay: 1s;
}

.scroll-sample.sample-01 .scroll-cont.view > * {
	transform: none;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

スライドイン

画面に入ったら左からスライドして表示します。

Scroll
↓

見出しが入ります。


.scroll-sample.sample-02 .scroll-cont {
	overflow: hidden;
}

.scroll-sample.sample-02 .scroll-cont > * {
	transform: translateX( -8rem );
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: all .8s;
	transition-delay: .8s;
}

.scroll-sample.sample-02 .scroll-cont p {
	transition-delay: 1s;
}

.scroll-sample.sample-02 .scroll-cont.view > * {
	transform: none;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

ズームイン

ズームして表示します。少し拡大表示してから実寸表示にすると、自然な動きになります。インパクトを持たせたい場合などに有効です。

Scroll
↓

見出しが入ります。


@keyframes zoom-in {
	0% {
		transform: scale( .6 ) translateY( 8rem );
		opacity: 0;
		visibility: hidden;
		z-index: -1;
	}
	50% {
		transform: scale( 1.1 ) translateY( -2rem );
		opacity: 1;
		visibility: visible;
		z-index: 1;
	}
	100% {
		transform: scale( 1 );
		opacity: 1;
		visibility: visible;
		z-index: 1;
	}
}

.scroll-sample.sample-03 .scroll-cont > * {
	transform: scale( .6 ) translateY( 8rem );
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}

.scroll-sample.sample-03 .scroll-cont.view h2 {
	animation: zoom-in 1s ease .6s 1 normal forwards;
}

.scroll-sample.sample-03 .scroll-cont.view p {
	animation: zoom-in 1s ease .8s 1 normal forwards;
}

パース

X軸を回転させて表示します。

Scroll
↓

見出しが入ります。


.scroll-sample.sample-04 .scroll-cont {
	display: inline-block;
	perspective: 300px;
}

.scroll-sample.sample-04 .scroll-cont > * {
	position: relative;
	transform: rotateX( -60deg ) translateY( 10rem );
	transform-origin: bottom left;
	transition: all .8s;
	transition-delay: .6s;
	opacity: 0;
	visibility: hidden;
}

.scroll-sample.sample-04 .scroll-cont p {
	transition-delay: .8s;
}

.scroll-sample.sample-04 .scroll-cont.view > * {
	transform: none;
	opacity: 1;
	visibility: visible;
}

オブジェクト

コンテンツ枠にオブジェクトを表示してからフェードインします。

Scroll
↓

見出しが入ります。


@keyframes mov-box {
	0% {
		width: 0;
		left: 0;
		right: auto;
	}
	35% {
		width: 100%;
		left: 0;
		right: 0;
	}
	36% {
		width: 100%;
		left: auto;
		right: 0;
	}
	100% {
		width: 0;
		left: auto;
		right: 0;
	}
}

.scroll-sample.sample-05 .scroll-cont {
	position: relative;
	padding: 2rem;
}

.scroll-sample.sample-05 .scroll-cont::after {
	content: '';
	width: 0;
	background: #ddd;
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
}

.scroll-sample.sample-05 .scroll-cont > * {
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transition: all .8s;
	transition-delay: 1.4s;
}

.scroll-sample.sample-05 .scroll-cont.view::after {
	animation: mov-box 1s ease-in-out .6s 1 normal forwards;
}

.scroll-sample.sample-05 .scroll-cont.view > * {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

電話でお問い合わせ

メールでお問い合わせ

アニメーション

ボタン

ベースコード

色反転

明るく

シャドウ

ズーム

立体

記事

ベースコード

タイトルが入ります

画像ズーム

タイトルが入ります

ボーダーの色かえ

タイトルが入ります

シャドウとズーム

タイトルが入ります

文字色や背景色を変える

タイトルが入ります

ナビゲーション

ベースコード

背景色

アンダーライン

マーカー

ドット

英字に変換

スクロール

ベースコード

見出しが入ります。

フェードイン

見出しが入ります。

スライドイン

見出しが入ります。

ズームイン

見出しが入ります。

パース

見出しが入ります。

オブジェクト

見出しが入ります。