1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1 の説明 HTML の記述 (ClipAnime1.html) 画像 images/dsc00203l.jpg から 4 つの部分を抜き出すので <img> タグで 4 つ指定します 1
<!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
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
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; に変化させ 画像を透明に近づけます @keyframes clip1anime { from { 20% { opacity: 1.0; to { opacity: 0.3; @-webkit-keyframes clip1anime { from { 20% { opacity: 1.0; to { opacity: 0.3; 4
アニメーション名 clip2anime に対応するタイムライン (@keyframes) を指定します 20% 後 (0.8 秒後 ) から transform: translate(0px, 0px) を transform: translate(180px, 0px) に変更し X 方向へ 180px 移動させ skew(0deg, 0deg) を skew(-50deg, -30deg) に変更し X 方向に-50 度 Y 方向に-30 度傾斜させて変形します @keyframes clip2anime { from { 20% { transform: translate(0px, 0px) skew(0deg, 0deg); to { transform: translate(180px, 0px) skew(-50deg, -30deg); @-webkit-keyframes 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 回転 ) させます @keyframes clip3anime { from { 20% { transform: translate(0px, 0px) rotatez(0deg); to { transform: translate(0px, 160px) rotatez(720deg); @-webkit-keyframes 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 回転 ) させます @keyframes 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 に対応するタイムライン (@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 倍に拡大させます @keyframes clip4anime { from { 20% { transform: translate(0px, 0px) scale(1.0, 1.0); to { transform: translate(120px, 50px) scale(2.0, 2.0); @-webkit-keyframes 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
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
#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 プロパティで抜き出す画面の範囲を変更しています こうすることによっ て 画像を抜き出す窓が移動するように見えます @keyframes 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); @-webkit-keyframes 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
画像を抜き出す丸い窓を移動させる サンプル 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
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
アニメーション名 clipanime に対応するタイムライン (@keyframes) を指定します 20%(2 秒 ) おきに全面黒色の中に円形を透明に抜いた画像の位置を変更しています こうするこ とによって 画像を抜き出す円形の窓が移動するように見えます @keyframes 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; @-webkit-keyframes 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