昨年春（2021年4月）にＰlusOneのサイトの壁面動画のひらひら舞い落ちる『さくら』を勉強しましたが、今回は、壁面動画の『秋バージョン』を勉強したいと思っていましたが、PlusOneのサイトは閉鎖されています。
私はPlusOneの枯葉が舞うバージョンも持っていますが、今回は別のサイトから紅葉が回りながら落ちる壁面動画を見つけましたので、これ(実施例)を勉強してみましょう。
まず、皆さんのMy-HPにotibaというフォルダーを作り、更にその中にimgというフォルダーを作っておきます。
フォルダーotibaの中には、後でリンク先を説明致しますが、予め皆さんが準備した600×450pxの写真とindex.htmlstyle.cssmain.jsというファイルを、下記サイトを参照してコピペで作って入れます。
詳細は、JSとCSSで落ち葉をひらひらと舞わせるエフェクトを実装する方法をクリックして壁面動画の作成作業を実施して下さい。
index.htmlの11行目の<!-- ここにコンテンツを入れる -->は、準備した写真を
<img src="01.jpg">
の様に入れます。
ロールオーバーの場合は、下記の様に定義します。
<img src="01.jpg" onMousemove="this.src='02.jpg'" onMouseout="this.src='01.jpg'">
落ち葉の画像をダウンロードするとwebdev-autumn-leaves-demo.zipというファイルがダウンロードされ、展開するとwebdev-autumn-leaves-demoというフォルダーができ、更にその中に_MACOSXとwebdev-autumn-leaves-demoというフォルダーができます。
webdev-autumn-leaves-demoの中のleaf-1.svg、leaf-2.svg、leaf-3.svgを、皆さんのPCのMy-HPの中のotibaのimgの中にコピーします。zipと展開したファイルはコピー後は不要で削除できます。
|
