CSS3で MovieJukeBox の見栄えをよくしてみる

Webの経験

今はないが、1999年にホームページを立ち上げた。so-net のレンタルホームページスペースを利用した。その後2000年に独自ドメインを取得し、それから7年ほどの間、さくらインターネットのレンタルサーバを利用してホームページを運営していた。静的ページで、ホームページビルダーで編集していた。KENT-Webの掲示板を利用させていただき設置した。このホームページ運営時にCSSを触ったことがあったくらい。当時のCSS利用はテーブルの罫線を綺麗に仕上げたり、マウスオーバーのセル背景色を変えたりとかに使用したくらいかな。
当時、一般人がインターネットにコンテンツをアップすると言ったらこんな感じだったと思う。

現在のCSS利用

ASP.NET Webフォーム でアプリを作るとき、CSSはフォント属性や幅、高さを指定するような使い方だけ。

CSS3を使った動きのあるページを作ってみたいと思った

jQuery で動きのある ASP.NET Webフォーム にしてみようと調べていると、CSS3 だけでも簡単に動きを実現できることを知った。
自分の時代遅れぶりは情けない。これから少しずつ勉強しよう。

今回は、以下の2点について動きをつけてみた。

• MovieJukeBOX で画像のキャプションとして、映画ポスターをマウスオーバーで映画のタイトルと邦題を、画像のボトムからスライドインするようにしてみる。
• ジャンルリストをマウスオーバーで0.2秒で1.5倍に拡大してみる。

左上のカジノロワイヤルをマウスオーバーすると、画像の下から上へ、 原題と邦題が0.3秒 でスライドインする。

↓

左のジャンルリストをマウスオーバーすると文字が 0.2秒 で1.5倍に拡大する。


画像キャプションのスライドインについては下記を参考にした

CSSのみで実装するキャプションエフェクト 20 | NxWorld
http://www.nxworld.net/tips/css-only-caption-effect.html

ジャンルリストのテキスト拡大は下記を参考にした

コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス
http://www.webcreatorbox.com/tech/css3-text-link/#css3-10

CSS3 わかっていないので、今後は以下で勉強しなきゃ。

ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト
http://dotinstall.com/

ソース

 

ポスター画像表示の ListView 部分

セレクターは、fugureタグ、figcaptionタグ、figureのfigcaptionのマウスーバーの３つ。

Site.cssの一部

figure {
    position: relative;
    overflow: hidden;
    width: 150px;
    height:222px;
    margin:0px;
}
figcaption {
    position: absolute;
    bottom: -100px;
    left: 0;
    z-index: 2;
    width: 150px;
    height: 100px;
    background: rgba(0,0,0,.6);
    -webkit-transition: .3s;
    transition: .3s;
}
figure:hover figcaption {
    bottom: 0px;
}

原題、邦題ともに SQL Server のテーブルから読み込んだものをasp:Linkbuttonのテキスト、asp:Labelのテキストにバインドして表示。これらを figurecaption にしている。

GenreSelect.aspxの一部

<asp:ListView ID="ListViewMovie" runat="server" DataSourceID="SDSGenreMovie" GroupItemCount="11">
    <AlternatingItemTemplate>
        <td id="Td1" runat="server" style="" class="ListVewMain">
            <asp:Panel ID="PanelMedia" runat="server" CssClass="PanelMedia">
                <asp:Label ID="LabelMedia" runat="server" CssClass="ListVewMain" Text='<%# Eval("") %>'></asp:Label>
            </asp:Panel>
            <asp:Panel ID="PanelDiv" runat="server" CssClass="ListVewMain">
                <figure>
                    <div>
                        <asp:ImageButton ID="ImageButtonMovie" runat="server" ImageUrl='<%# Eval("MJBID", "GetImage.aspx?ID={0}&MODE=&Width=150&Height=300") %>' />
                    <figcaption class="ListVewMain">
                        <div class="title"><asp:LinkButton ID="LinkButtonTitle" runat="server" Text='<%# Eval("") %>'></asp:LinkButton></div>
                        <div class="titleJA"><asp:Label ID="Label2" runat="server" CssClass="" Text='<%# Eval("") %>' /></div>
                    </figcaption>
                    </div>
                </figure>
            </asp:Panel>
                    <asp:BalloonPopupExtender ID="ImageButtonMovie_BalloonPopupExtender" runat="server" BalloonPopupControlID="Panel1" BalloonSize="Large" DisplayOnClick="True" DisplayOnFocus="False" DisplayOnMouseOver="False" DynamicServicePath="" Enabled="True" ExtenderControlID="" TargetControlID="PanelDiv">
                    </asp:BalloonPopupExtender>
            <asp:Panel ID="Panel2" runat="server">
                <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            </asp:Panel>
            <asp:Label ID="MJBIDLabel" runat="server" Text='<%# Eval("MJBID") %>' Visible="False" />
            <asp:Label ID="UNCLabel" runat="server" Text='<%# Eval("UNC") %>' Visible="False" />
            <asp:Label ID="YouTubeLabel" runat="server" Text='<%# Eval("YouTube") %>' Visible="False"></asp:Label>
            <asp:Label ID="TMDbIDLabel" runat="server" Text='<%# Eval("TMDbID") %>' Visible="False" />
            <asp:Label ID="GenreIDLabel" runat="server" Text='<%# Eval("GenreID") %>' Visible="False" />
            <asp:Panel ID="Panel1" runat="server">
                <asp:Literal ID="LiteralDataListTrailersDBYouTube" runat="server"></asp:Literal>
            </asp:Panel>
        </td>
    </AlternatingItemTemplate>

生成された html

キャプションのスライドイン実現には直接関係ないが、ID が PanelDIV の asp:Panel で figure を囲んでいる。Ajax の asp:BaloonPopupExtender で吹き出しを作り、その中に Youtube 予告編を配置している。ポップアップ対象コントロールを ID が PanelDIV の asp:Panel にすることで、スライドインしたキャプションをクリックすると、Yotube予告編が吹き出しでポップアップするようにしてみた。吹き出しには iframe でYoutubeページを表示している。マウスオーバーで吹き出しを表示すると、キャプションのスライドインがもたつくので、onMouseOver をFalse にした。

asp:BaloonPopupExtender

<asp:BalloonPopupExtender ID="ImageButtonMovie_BalloonPopupExtender" runat="server" BalloonPopupControlID="Panel1" BalloonSize="Large" DisplayOnClick="True" DisplayOnFocus="False" DisplayOnMouseOver="False" DynamicServicePath="" Enabled="True" ExtenderControlID="" TargetControlID="PanelDiv">
</asp:BalloonPopupExtender>

キャプションがスライドインされた状態で、キャプションをクリックすると吹き出しがポップアップされ、Youtube動画が表示される。

ジャンルリストの DataList 部分

最初 -webkit- の意味が分からなくて、IEでまったく動作しないで小一時間悩んだ。-ms-transituon と書いても、transition と書いても、IEではどちらも有効みたい。-webkit- は IE では解釈されないみたい。
セレクターは クラス Ex。 0.2秒で縦横1.5倍に拡大される。

Sitre.cssの一部

.Ex {
    display:inline-block;
    -webkit-transition: 0.1s;
    transition: 0.2s;
}
    :hover.Ex {
        -ms-transform: scale(1.5,1.5);
        color:#009999;
        font-weight:bold;
    }

GenreSelect.aspxの一部

<div id="left">
    <asp:DataList ID="DataListGenre" runat="server" DataSourceID="SDSGenre">
        <ItemTemplate>
            &nbsp;<asp:Label ID="GenreIDLabel" runat="server" Text='<%# Eval("GenreID") %>' Visible="False" />
            <asp:LinkButton ID="LinkButtonGenreName" runat="server" Text='<%# Eval("GenreName") %>' CommandArgument="<%# DataListGenre.items %>" CssClass="Ex"></asp:LinkButton>
            <br />
        </ItemTemplate>
    </asp:DataList>
</div>

生成されたhtml。ジャンルリストの各アイテムのクラスは Ex になっている。

完成品

CSS3で MovieJukeBox の見栄えをよくしてみる