11/22の勉強会の議事録です。
今回はmacのスクリーンセーバー風なものをcss3で作ってみました。
まずは完成形をご覧ください。↓
それでは作成のポイントを説明致します。
どうぞ、下のソースもあわせてお読み下さい。
目次
- 1.htmlとbodyにheight:100%;を指定する
- 2.pattern.pngで画像の荒れ対策
- 3.background-size:cover;で画像をフルスクリーン表示
- 4.@keyframe、nth-child、animation-delay
- 5.tranceform-origin: 変形の基点
1.htmlとbodyにheight:100%;を指定する
widthは特に指定をしなくても勝手に100%になってくれます。
これで画面いっぱいに画像が表示されます。
2.pattern.pngで画像の荒れ対策
最近は大きなディスプレイを使っている方も多いので、画像が拡大された時の画像の荒れ対策をしてみます。
2px × 2pxの正方形を４等分した中の一つを塗り(1px × 1px)、残りの三つを透明にしてpng形式で保存します。
こういうの↓
ここではこれをpattern.pngとしました。
この画像を背景にリピートで敷きつめます。ここでは.bg:afterの背景画像にしています。
background:url(pattern.png) 0 0 repeat;
網戸越しに画像を見る様な状態を作ることで、画像が拡大された時に画像が荒れて見えるのを防ぎます。
3.background-size:cover;で画像をフルスクリーン表示
背景画像をフルスクリーン表示させる方法です。
背景画像の縦横比を保ちつつ、どの大きさの画面で見ても画面いっぱいに表示させることができる優れものです。
参考サイト↓
画像をフルスクリーン表示させる
4.@keyframe、nth-child、animation-delay
@keyframesの指定
(transform: scale(1)〜 (1.4)) アニメーション開始から終了までの間に画像が100％から140％に拡大し、
(opacity: 0〜 1) アニメーション開始から10%までの間に徐々に画像が現れ、10%から30%の間に画像が表示され、30%から終了までに徐々に消えていく、という指定をしています。
htmlには<div class=”photo”></div>
このdivが画像の枚数分、4つあるだけです。
このclass=”photo”にnth-child(1)(2)(3)(4)…と指定し、
それぞれにanimation-delayを指定して徐々に画像が切り替わるようにします。
ここでは一枚につき8秒×4枚＝32秒で一回りする設定です。
最初にクラスphotoにアニメーション全体長さの32秒を設定します。
animation: bg infinite linear 32s;
次に各nth-childに何秒後から表示が始まるかを設定します。
例えばここでは二番目に表示される画像に対して
animation-delay:-24s;
と指定していますが、この様にマイナスの値も使えます。つまり、24秒前からアニメーションが始まっています、ということです。
この説明に高橋先生がとてもわかりやすいアニメを作ってくれましたのでぜひご覧ください！
これで納得！animation-delay
5.tranceform-origin: 変形の基点
tranceform-originプロパティは、2Dまたは3D変形を適用するときの変形の基点を指定します。
ここでは４枚の画像を使っていますが、それぞれの画像に合わせて
下から上へ、右から下へ…現れ、拡大しながら画像が切り替わります。
参考サイト↓
tranceform-originプロパティ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<!doctype html> <head> <meta charset="UTF-8"> <title>Screen Saver</title> <style> html,body { margin:0; padding:0; height:100%; background: #000; } .bg { height:100%; width: 100%; position: relative; overflow:hidden; } .bg:after { content:""; display:block; position: absolute; top:0; left:0; height:100%; width: 100%; background:url(pattern.png) 0 0 repeat; } .bg .photo { position: absolute; top:0; left:0; height:100%; width: 100%; background:0 0 no-repeat; background-size:cover; -webkit-animation: bg infinite linear 32s; animation: bg infinite linear 32s; } .bg .photo:nth-child(1) { background-image:url(vane.jpg); -webkit-transform-origin:bottom top; transform-origin:bottom top 0; -webkit-animation-delay:0s; animation-delay:0s; } .bg .photo:nth-child(2) { background-image:url(dusk.jpg); -webkit-transform-origin:bottom left; transform-origin:bottom left 0; -webkit-animation-delay:-24s; animation-delay:-24s; } .bg .photo:nth-child(3) { background-image:url(lamp.jpg); -webkit-transform-origin:right bottom; transform-origin:right bottom 0; -webkit-animation-delay:-16s; animation-delay:-16s; } .bg .photo:nth-child(4) { background-image:url(rain.jpg); -webkit-transform-origin:center center; transform-origin:center center 0; -webkit-animation-delay:-8s; animation-delay:-8s; } @-webkit-keyframes bg { 0% { opacity: 0; -webkit-transform: scale(1) ; } 10%,30% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; -webkit-transform: scale(1.4) ; } } @keyframes bg { 0% { opacity: 0; transform: scale(1) ; } 10%,30% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; transform: scale(1.4) ; } } </style> </head> <body> <div class="bg"> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> <div class="photo"></div> </div> </body> </html> |
如何でしたか？
皆さんもお気に入りの画像を使ってオリジナルスクリーンセーバー、作ってみて下さいね♪