css3でmacのスクリーンセーバー風なものを作ってみました

11/22の勉強会の議事録です。
今回はmacのスクリーンセーバー風なものをcss3で作ってみました。
まずは完成形をご覧ください。↓

screensaver-01

それでは作成のポイントを説明致します。
どうぞ、下のソースもあわせてお読み下さい。

目次

    1.htmlとbodyにheight:100%;を指定する

    widthは特に指定をしなくても勝手に100%になってくれます。
    これで画面いっぱいに画像が表示されます。

    2.pattern.pngで画像の荒れ対策

    最近は大きなディスプレイを使っている方も多いので、画像が拡大された時の画像の荒れ対策をしてみます。

    2px × 2pxの正方形を4等分した中の一つを塗り(1px × 1px)、残りの三つを透明にしてpng形式で保存します。
    こういうの↓
    ptn-01
    ここではこれを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変形を適用するときの変形の基点を指定します。
    ここでは4枚の画像を使っていますが、それぞれの画像に合わせて
    下から上へ、右から下へ…現れ、拡大しながら画像が切り替わります。
    参考サイト↓
    tranceform-originプロパティ

如何でしたか?
皆さんもお気に入りの画像を使ってオリジナルスクリーンセーバー、作ってみて下さいね♪

カテゴリー: study, 勉強会 | タグ: , , | 投稿日: | 投稿者:
かおりんご

かおりんご について

マルチメディアスクールWAVE立川校卒業。 タカハシ先生と愉快な仲間達と共に倶楽部りんごを結成、絶賛修行中。 WAVE名物だったライブ授業、りんごでは毎週4時間みっちりやってます! ネットで何でも学べる時代ですが、やはりライブで学ぶことに勝るものはありませんね。 りんご結成時には活動拠点を探して東奔西走。運営、スケジュール管理をやっています。 好きなもの: overflow:hidden、SVG、ライブトレース、流行り物(笑)、ねこ、幕末etc。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA