reflectionを使う

reflectionをローカルで試す

ここではまず、ローカル環境で試してみましょう。本稿のサンプルのソースコードとreflect.jsファイルは以下の図のように配置します。

htmlファイルとjsフォルダとimagesフォルダ

jsフォルダ内のreflection.js

reflectionを使うには最初にreflection.jsファイルを表示させるhtmlファイルに<script>タグを使って読み込ませます。このときのパスとファイルの関係を間違えやすいので気をつけてください。下記の例ではhtmlファイルと同じ階層にあるjsフォルダの中のreflection.jsを読み込ませているということになります。

<script type="text/javascript" src="js/reflection.js"></script>

reflectionは画像に対して反射効果を施します。反射効果を施すための画像を用意しスタイルシートのクラスを指定します。スタイルシートのクラスはclass属性にreflectを指定します。以下のように指定すると自動的に反射効果が画像に対して施されます(サンプル01)。この場合、特に新たにスクリプトを記述する必要はありません。

<img src="images/logo.png" class="reflect">

サンプル01の実行結果

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>reflection.jsサンプル</title>
            <style type="text/css"><!--
            h1 { color:white; }
            body { background-color:black; }
            --></style>
            <script type="text/javascript" src="js/reflection.js"></script>
        </head>
        <body>
        <h1>reflection.jsサンプル</h1>
        <p>
            <img src="images/logo.png" class="reflect">
        </p>
        </body>
</html>