<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <

Size: px

Start display at page:

Download "<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <"

しおりわかはら
5 years ago
Views:

1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かすサンプル CSS1 1 つの画像を 4 分割してそれぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます右上の画像は 3D

1 1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かすサンプル CSS1 1 つの画像を 4 分割してそれぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます右上の画像は 3D 変形しながら移動します左下の画像は回転しながら移動します右下の画像は拡大しながら移動します ClipAnime1 の説明 HTML の記述 (ClipAnime1.html) 画像 images/dsc00203l.jpg から 4 つの部分を抜き出すので <img> タグで 4 つ指定します 1

2 <!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <body> <p> 画像を部分抜き出し (Clip) して動かす (1)</p> <div id="stage"> <div id="image1"> <img src="images/dsc00203l.jpg" alt="green road"> <img src="images/dsc00203l.jpg" alt="green road"> <img src="images/dsc00203l.jpg" alt="green road"> <img src="images/dsc00203l.jpg" alt="green road"> </body> </html> CSS の記述 (ClipAnime1.css) #stage ステージのスタイルを指定します width: 600px; height: 500px; 背景にグレー (#999999) を指定します #stage { width: 600px; height: 500px; background-color: #999999; border: solid 1px #000000; position: relative; 画像の位置の起点を指定します #image1 { top: 80px; left: 30px; 4 つの画像の共通のスタイルを指定します #image1 img { top: 0px; left: 0px; width: 280px; height: 210px; 2

3 1つ目の画像は clip プロパティで clip: rect(0px, 140px, 105px, 0px); と指定して top 0px right 140px bottom 105px left 0px の範囲の四角形を抜き出します position: absolute; の指定が必要ですアニメーション名を clip1anime 実行時間を 4s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #image1 img:nth-child(1) { clip:rect(0px, 140px, 105px, 0px); animation: clip1anime 4s linear 0s infinite alternate; -webkit-animation: clip1anime 4s linear 0s infinite alternate; 2 つ目の画像は clip プロパティで clip: rect(0px, 280px, 105px, 140px); と指定して top 0px right 280px bottom 105px left 140px の範囲の四角形を抜き出します position: absolute; の指定が必要です抜き出した画像を変形させるので transform-origin: 210px 52px; と指定 ( 元の画像の左上端からの距離で指定します ) して変形の起点を抜き出した四角形の中心にします transform-origin の指定をしなければ変形の起点は元の画像の中心になっています 0px 140px 280px 0px (1つ目の抜き出し画像) (2つ目の抜き出し画像) 105px 大枠は元の画像を表します 1つ目の抜き出し画像は変形させないので変形の起点は変えません (140px 105px) 2つ目と3つ目の抜き出し画像 (3つ目の抜き出し画像) (4つ目の抜き出し画像) は変形させるので変形の (70px 157px) (210px 52px) (140px 105px) 起点をそれぞれの四角形の中心に指定します 4 つ目の抜き出し画像は拡大しながら斜め下に移動させる 210px ので変形の起点はそのまま四角形の左上端にしますアニメーション名を clip2anime 実行時間を 4s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #image1 img:nth-child(2) { clip:rect(0px, 280px, 105px, 140px); transform-origin: 210px 52px; -webkit-transform-origin: 210px 52px; animation: clip2anime 4s linear 0s infinite alternate; -webkit-animation: clip2anime 4s linear 0s infinite alternate; 3

4 3つ目の画像は clip プロパティで clip: rect(105px, 140px, 210px, 0px); と指定して top 105px right 140px bottom 210px left 0px の範囲の四角形を抜き出します position: absolute; の指定が必要です抜き出した画像を変形させるので transform-origin: 70px 157px; と指定して変形の起点を抜き出した四角形の中心にしますアニメーション名を clip3anime 実行時間を 4s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #image1 img:nth-child(3) { clip:rect(105px, 140px, 210px, 0px); transform-origin: 70px 157px; -webkit-transform-origin: 70px 157px; animation: clip3anime 4s linear 0s infinite alternate; -webkit-animation: clip3anime 4s linear 0s infinite alternate; 4つ目の画像は clip プロパティで clip: rect(105px, 280px, 210px, 140px); と指定して top 105px right 280px bottom 210px left 140px の範囲の四角形を抜き出しますの指定が必要です抜き出した画像は拡大して右斜め下に移動させるので分かり易く変形の起点は変更しませんアニメーション名を clip4anime 実行時間を 4s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #image1 img:nth-child(4) { clip:rect(105px, 280px, 210px, 140px); animation: clip4anime 4s linear 0s infinite alternate; -webkit-animation: clip4anime 4s linear 0s infinite alternate; アニメーション名 clip1anime に対応するタイムライン (@keyframes) を指定します 20% 後 (0.8 秒後 ) から opacity: 1.0; を opacity: 0.3; に変化させ clip1anime { from { 20% { opacity: 1.0; to { opacity: clip1anime { from { 20% { opacity: 1.0; to { opacity: 0.3; 4

5 アニメーション名 clip2anime に対応するタイムラインを指定します 20% 後 (0.8 秒後 ) から transform: translate(0px, 0px) を transform: translate(180px, 0px) に変更し X 方向へ 180px 移動させ skew(0deg, 0deg) を skew(-50deg, -30deg) に変更し X 方向に-50 度 Y 方向に-30 clip2anime { from { 20% { transform: translate(0px, 0px) skew(0deg, 0deg); to { transform: translate(180px, 0px) skew(-50deg, clip2anime { from { 20% { -webkit-transform: translate(0px, 0px) skew(0deg, 0deg); to { -webkit-transform: translate(180px, 0px) skew(-50deg, -30deg); アニメーション名 clip3anime に対応するタイムライン (@keyframes) を指定します 20% 後 (0.8 秒後 ) から transform: translate(0px, 0px) を translate(0px, 160px) に変更し Y 方向へ 160px 移動させ rotatez(0deg) を rotatez(720deg) に変更し時計回りに 720 度回転 (2 回転 ) clip3anime { from { 20% { transform: translate(0px, 0px) rotatez(0deg); to { transform: translate(0px, 160px) clip3anime { from { 20% { -webkit-transform: translate(0px, 0px) rotatez(0deg); to { -webkit-transform: translate(0px, 160px) rotatez(720deg); アニメーション名 clip3anime に対応するタイムライン (@keyframes) を指定します 20% 後 (0.8 秒後 ) から transform: translate(0px, 0px) を translate(0px, 160px) に変更し Y 方向へ 160px 移動させ rotatez(0deg) を rotatez(720deg) に変更し時計回りに 720 度回転 (2 回転 ) clip3anime { from { 20% { transform: translate(0px, 0px) rotatez(0deg); to { transform: translate(0px, 160px) rotatez(720deg); 5

@-webkit-keyframes clip3anime { from { 20% { -webkit-transform: translate(0px, 0px) rotatez(0deg); to { -webkit-transform: translate(0px, 160px) rotatez(720deg); アニメーション名 clip4anime に対応するタイムライン

6 @-webkit-keyframes clip3anime { from { 20% { -webkit-transform: translate(0px, 0px) rotatez(0deg); to { -webkit-transform: translate(0px, 160px) rotatez(720deg); アニメーション名 clip4anime に対応するタイムライン (@keyframes) を指定します 20% 後 (0.8 秒後 ) から transform: translate(0px, 0px) を translate(120px, 50px) に変更し X 方向へ 120px Y 方向へ 50px 移動させ scale(1.0, 1.0) を scale(2.0, 2.0) に変更し縦横 2 clip4anime { from { 20% { transform: translate(0px, 0px) scale(1.0, 1.0); to { transform: translate(120px, 50px) scale(2.0, clip4anime { from { 20% { -webkit-transform: translate(0px, 0px) scale(1.0, 1.0); to { -webkit-transform: translate(120px, 50px) scale(2.0, 2.0); 画像を抜き出す窓を移動させるサンプル CSS2 画像を抜き出す窓を移動させるアニメーションを作ります 6

7 ClipAnime2 の説明 HTML の記述 (ClipAnime2.html) id 属性 blackwall の div 要素の中に画像 images/dsc00027l.jpg を指定します <!DOCTYPE html> <html> <head> <title>clipanime2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime2.css"> </head> <body> <p> 画像を抜き出す窓 (Clip) を移動させる (2)</p> <div id="stage"> <div id="blackwall"> <img id="image1" src="images/dsc00027l.jpg" alt="wall paint"> </body> </html> CSS の記述 (ClipAnime2.css) #stage ステージのスタイルを指定します width: 460px; height: 360px; 背景にグレー (#999999) を指定します #stage { width: 460px; height: 360px; background-color: #999999; border: solid 1px #000000; position: relative; 黒い背景の中で画像を抜き出した窓が移動するように見せたいので黒い四角形を指定します #blackwall { top: 30px; left: 30px; width: 400px; height: 300px; background-color: black; 7

8 #image1 画像を指定します width: 400px; height: 300px; で指定します clip プロパティで clip: rect(0px, 100px, 100px, 0px); と指定して top 0px right 100px bottom 100px left 0px の範囲の四角形を抜き出しますの指定が必要ですアニメーション名を clipanime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #image1 { top: 0px; left: 0px; width: 400px; height: 300px; clip:rect(0px, 100px, 100px, 0px); animation: clipanime 10s linear 0s infinite alternate; -webkit-animation: clipanime 10s linear 0s infinite alternate; アニメーション名 clipanime に対応するタイムライン (@keyframes) を指定します 20%(2 秒 ) おきに clip プロパティで抜き出す画面の範囲を変更していますこうすることによって clipanime { from { 20% { clip:rect(0px, 400px, 100px, 300px); 40% { clip:rect(200px, 400px, 300px, 300px); 60% { clip:rect(200px, 100px, 300px, 0px); 80% { clip:rect(0px, 400px, 100px, 300px); to { clip:rect(0px, 100px, 100px, clipanime { from { 20% { clip:rect(0px, 400px, 100px, 300px); 40% { clip:rect(200px, 400px, 300px, 300px); 60% { clip:rect(200px, 100px, 300px, 0px); 80% { clip:rect(0px, 400px, 100px, 300px); to { clip:rect(0px, 100px, 100px, 0px); 8

(ClipAnime3.html) id 属性 wrap の div 要素の中に画像 images/dsc00092l.jpg と全面黒色の中に円形を透明で抜いた画像 images/clipcircle.png を指定します <!

9 画像を抜き出す丸い窓を移動させるサンプル CSS3 CSS2.1 仕様では clip プロパティで画像を抜き出すときの形状は四角形だけです例えば円形で画像を抜き出したい場合には clip プロパティは使用できません円形を透明で抜いた黒色画像を上に被せる方法で代用するのがよいでしょうでは丸い窓を移動させるアニメーションを作ってみましょう ClipAnime3 の説明 HTML の記述 (ClipAnime3.html) id 属性 wrap の div 要素の中に画像 images/dsc00092l.jpg と全面黒色の中に円形を透明で抜いた画像 images/clipcircle.png を指定します <!DOCTYPE html> <html> <head> <title>clipanime3</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime3.css"> </head> <body> <p> 画像を抜き出す丸い窓を移動させる </p> <div id="stage"> <div id="wrap"> <img id="image1" src="images/dsc00092l.jpg" alt="bridge and cherry"> <img id="clipcircle" src="images/clipcircle.png" alt="clip circle"> </body> </html> 9

10 CSS の記述 (ClipAnime3.css) #stage ステージのスタイルを指定します width: 460px; height: 360px; 背景にグレー (#999999) を指定します #stage { width: 460px; height: 360px; background-color: #999999; border: solid 1px #000000; position: relative; 全面黒色の中に円形を透明に抜いた画像は抜き出して表示したい画像の縦横 2 倍のサイズなのではみ出る部分を表示しないように見える範囲 width: 400px; height: 300px; と overflow: hidden; の指定をします #wrap { top: 30px; left: 30px; width: 400px; height: 300px; overflow: hidden; #image1 画像を指定します #image1 { top: 0px; left: 0px; width: 400px; height: 300px; 全面黒色の中に円形を透明に抜いた画像を指定します横幅が 800px 高さが 600px の全面黒色の中心に直径 100px の円形を透明に抜いているので width: 800px; height: 600px; で指定し top: -250px; left: -350px; で指定すると #image1 画像の左上に円形が位置しますアニメーション名を clipanime 実行時間を 15s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #clipcircle { top: -250px; left: -350px; width: 800px; height: 600px; animation: clipanime 15s linear 0s infinite alternate; -webkit-animation: clipanime 15s linear 0s infinite alternate; 10

11 アニメーション名 clipanime に対応するタイムラインを指定します 20%(2 秒 ) おきに全面黒色の中に円形を透明に抜いた画像の位置を変更していますこうすることによって clipanime { from { 20% { top: -250px; left: -50px; 40% { top: -50px; left: -50px; 60% { top: -50px; left: -350px; 80% { top: -250px; left: -50px; to { top: -250px; left: clipanime { from { 20% { top: -250px; left: -50px; 40% { top: -50px; left: -50px; 60% { top: -50px; left: -350px; 80% { top: -250px; left: -50px; to { top: -250px; left: -350px; 11

1つ目は MASK という文字の下に楕円形のマスクイメージでその文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージでその文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています近い将来 webkit