川口・さいたまのホームページ製作 川口・さいたまのホームページ制作会社関東ダイイチへ問い合わせる 埼玉県川口市のホームページ制作会社関東ダイイチへ電話する さいたま・川口のホームページ制作会社関東ダイイチへメールする



Illustratorのチュートリアル|さいたま・川口の低価格なホームページ制作会社
TOPダイイチウェブニュース>アニメーション

CSSでアニメーション

今回は、CSSのみで行うアニメーション効果をご紹介いたします


1.background-clip

背景画像を横に移動させる

テキスト上に画像を載せて画像のみ移動させるプロパティです。
background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。

SAMPLE TEXT

SAMPLE TEXT

.sample_text h1{
	-webkit-animation: scrollmask 15s ease 2s infinite;
	-webkit-background-clip: text;
	background-image: url(背景画像.png);
	color: transparent;
	font-size: 100px;
	padding-top: 50px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
}
@-webkit-keyframes scrollmask {
  0% {background-position: 0 0;}
  100% {background-position: 100% 0;}
} 


2.スターウォーズのようなアニメーション

遠近感を出して動かす

遠近感の指定をするperspectiveを使用。perspectiveの数値は小さいほど遠近感が強くなります。

Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars.
Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars.
Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars.Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars.

~入れたいワード~ ~入れたいワード~ ~入れたいワード~ ~入れたいワード~
.starwars-box {
	perspective: 200px;
	-webkit-perspective: 150px;
	height: 200px;
	background-color: #FFF;
	overflow: hidden;
}
.starwars-content {
	text-align: justify;
	padding: 5%;
	-webkit-animation: typetext linear 30s infinite;
	color: #666;
	letter-spacing: 5px;
	font-size: 30px;
}

@-webkit-keyframes typetext {
   0% {transform: rotateX(60deg) translate(0,0);}
  100% {transform: rotateX(60deg) translate(0,-500px);}
}

以上、ホームページ制作の際は、試してみて下さい。

関連ニュース
水滴の簡単なつくり方
湯気の簡単な描き方
アクア風ボタンの簡単な作り方
ネオン文字の作り方
シルバーブロック文字の作り方
ロングシャドウの作り方







ホームページ制作の料金|川口WEB会社HP制作の製作実績|川口のホームページ制作会社HP制作会社の関東ダイイチ|会社案内ウェブ制作のさいたま|関東ダイイチ|問い合わせ
Copyright © 2014 web no daiichi All Rights Reserved.  
>TOP >ホームページの必要性 >料金
>ご注文から公開まで >お問い合わせ >制作実績
>会社案内 >ダイイチニュース  >リンク
ホームページ制作|埼玉県川口市西川口2-10-1
川口・さいたまのWEB制作