reflection.jsをブログで使ってみる

ここでは実際の実行環境にSeesaaブログを例に使って、ブログのコンテンツとしてイメージファイルを反射させてみます。冒頭で紹介した、富士山のイメージファイルをSeesaaブログにアップロードして、逆さ富士にしてみます。 富士山の写真は、こちらに用意してあります。

「Seesaaブログでアカウントを取得し、実際にブログの記事を編集画面まで進みます。背景デザインは黒が映えるようなものを選択しています

編集画面

フォルダマークのアイコン(ファイルマネージャー)をクリックします。ファイルアップロード用のウィンドウが立ち上がります。このウィンドウでreflection.jsをアップロードします。参照ボタンをクリックします。

ダウンロードしたreflection.jsを選択し、アップロードします

同様の手順でimageフォルダのイメージファイルを指定し、アップロードします。成功すると図のようにアップロードされたファイルの状況が示されます。

編集画面にソースコードを貼り付けます。コード内のreflection.jsへのパスはファイルマネージャー上に表示されるファイル一覧を使って絶対パスで取得することができます。ここでは逆さ富士の見栄えを調整しながらropacity100 rheight100にしてあります

適当なコメントを記述して実行してみると、逆さ富士が表示されます。

下スクロールしたもの。背景レイアウトは、反射が目立つように黒いものを選択してあります。