ユーザーID パスワード

技術情報

  • FAQ　よくある質問
  • 個人ユーザー向けサービスのお手続きについて

コード&コラム Web編 〜実践！HTML5〜

第3章 Photo Gallery (4/4)

前へ 1 |2 |3 |4

CSS3アニメーションを利用したサンプルプログラム

CSS3のtransitionプロパティを使って透過しながら画像を切り替えるフォトギャラリーを作成します。まず始めにanimation.htmlを作成します。

[初期表示]
image019


[アニメーションによる画像切り替え]
image020


[画像切り替え完了]
image021


今回は外部スタイルシートを利用する為、にてstyle.cssをロードします。

<link rel="stylesheet" type="text/css" href="./css/style.css">


<body>内にアニメーション部分とスライドリンク部分を記述します。

<link rel="stylesheet" type="text/css" href="./css/style.css">


次にstyle.cssの作成を行います。
最初にアニメーション、ナビゲーションを指定します。

/*アニメーション*/
#animation {
    width: 500px;
    height: 375px;
    margin: 35px auto 0;
    position: relative;
}
/*ulナビゲーション*/
#animation ul {
    padding: 0 0 0 0;
    position: absolute;
    list-style: none;
    left: 50%;
    margin-left: -70px;
    bottom: -60px;
}

次にリスト要素の最初の子要素、リストのボタン配置、最後の子要素の位置を指定調整します。

/*最初のリスト要素*/
#animation ul li:first-child {
    margin-left: 10px;
}

/*ボタン配置設定*/
#animation ul li {
    float: left;
    margin-right: 12px;
}

/*最後のリスト要素*/
#animation ul li:last-child {
    margin-right: 0;
}

その後リストボタンの設定、並びにhover時のボタン色設定を行います。□ボタンのインナーシャドウを指定する際はFirefox、Chrome、Safariのベンダープレフィックスを用います。

#animation ul li a {
    width: 16px;
    height: 16px;
    display: block;
    outline: none;
    border: none;
    position: relative;
    background: #aaa;

    /* ボタンのインナーシャドウ設定*/
    box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
    -moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
    -webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
}

/* hover時のリストボタン背景色設定*/
#animation ul li a:hover {
    background: #666;
}

次にアニメーションスタイルの設定を行います。
今回は各ブラウザのベンダープレフィックスを付けて□ボタンクリックで10秒かけて画像を切り替えるアニメーションを定義します。

/*アニメーションスタイル*/
#animation img {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;

    /*10秒かけて画像を切り替える*/
    -webkit-transition: all 10s ease;
    -moz-transition:  all 10s ease;
    -ms-transition: all 10s ease;
    -o-transition: all 10s ease;
    transition: all 10s ease;
}

最後に各状態においてのオパシティを指定します。

/*ターゲット時のオパシティの設定*/
#animation img:target {
    opacity: 1;
}

/*デフォルト表示の画像*/
#animation img#five {
    opacity: 1;
}

/*ターゲットでない画像、及びターゲット以外の〜#fiveの画像まで*/
#animation img:not(:target), #animation img:target ~ img#five  {
    opacity: 0;
}

以下がanimation.html、style.cssの全ソースとなります。


[animation.html] 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name = "viewport" content = "initial-scale = 0.7, user-scalable = no" />
    <title>CSS3 フォトギャラリー</title>
　　<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div id="animation">
    <!-- アニメーション部分 -->
    <img id="one" src="./images/img1.jpg" />
    <img id="two" src="./images/img2.jpg" />
    <img id="three" src="./images/img3.jpg" />
    <img id="four" src="./images/img4.jpg" />
    <img id="five" src="./images/img5.jpg" />

    <!-- ナビゲーション部分 -->
    <ul>
        <li><a href="#one"></a></li>
        <li><a href="#two"></a></li>
        <li><a href="#three"></a></li>
        <li><a href="#four"></a></li>
        <li><a href="#five"></a></li>
    </ul>
 </div>
</body>
</html>


[style.css] 
/*アニメーション*/
#animation {
    width: 500px;
    height: 375px;
    margin: 35px auto 0;
    position: relative;
}
/*ulナビゲーション*/
#animation ul {
    padding: 0 0 0 0;
    position: absolute;
    list-style: none;
    left: 50%;
    margin-left: -70px;
    bottom: -60px;
}

/*最初のリスト要素*/
#animation ul li:first-child {
    margin-left: 10px;
}

/*ボタン配置設定*/
#animation ul li {
    float: left;
    margin-right: 12px;
}

/*最後のリスト要素*/
#animation ul li:last-child {
    margin-right: 0;
}

/**リストボタン設定*/
#animation ul li a {
    width: 16px;
    height: 16px;
    display: block;
    outline: none;
    border: none;
    position: relative;
    background: #aaa;

    /* ボタンのインナーシャドウ設定*/
    box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
    -moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
    -webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white;
}

/* hover時のリストボタン背景色設定*/
#animation ul li a:hover {
    background: #666;
}

/**アニメーションスタイル**/
#animation img {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;

    /*10秒かけて画像を切り替える*/
    -webkit-transition: all 10s ease;
    -moz-transition:  all 10s ease;
    -ms-transition: all 10s ease;
    -o-transition: all 10s ease;
    transition: all 10s ease;
}

/*ターゲット時のオパシティの設定*/
#animation img:target {
    opacity: 1;
}

/*デフォルト表示の画像*/
#animation img#five {
    opacity: 1;
}

/*ターゲットでない画像、及びターゲット以外の〜#fiveの画像まで*/
#animation img:not(:target), #animation img:target ~ img#five  {
    opacity: 0;
}

（文責:株式会社ベストクリエイト）

前へ 1 |2 |3 |4

トップへ戻る

実践！HTML5 記事一覧

第1章 Audio/Video

第2章 Canvas

第3章 Photo Gallery

第4章 神経衰弱ゲーム

>>実践！HTML5 TOPへ

サンプルコード

第1章
Audio/Video

第2章
Canvas

第3章
Photo Gallery

第4章
神経衰弱ゲーム

ソフトバンク株式会社

Copyright SoftBank Corp. All rights reserved.