HPアニメーションにチャレンジ

風俗ホームページをアニメーションにしてみよう

今回は、jibunmediaさんの記事を参考に、デザイナーでもない素人の私が、まるごとホームページのフリーページを使って、ホームページ全体をアニメーションしてみたいと思います。

ここからは、独り言風に・・・

参考にしたのはこのサイトです。

matome.naver.jp

まずは、実験テスト用の新規ページを作りました。

上記、参考サイトから気に入ったアニメーションを選んでと。。これを、テスト用ページのメタタグ部分にアニメーションのソースを単純にそのままコピペっと！

メタタグ部分は、ヘッダー内で管理するのでページ全体に設置できるはず！

• HTMLは、そのままコピペでOK！
• CSSは、<style>と</style>で中身のソースを囲んでコピペ！
• JavaScriptも、<script></script>でCSSを同様に囲んでコピペ！

コンテンツの更新ボタンを押して保存をしたらページを確認。

おっ、おっ、ホームページにアニメーションが表示されてる！

けど少し不具合が。。ページ背景の上に設置されたようだが、メニューとヘッドラインコンテンツが消えました。。。メニューはアニメーションの下にあるようだ。

メニューのCSSにposition relativeを書いてみよう！

・

・

・

あ！出た！！

同じくヘッドラインのCSSにもposition relativeを書いてみたらこっちも出ました！

あとは下が切れているので全面アニメーションにしてみたいので

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

のソースを少し変える必要がありそうだ。

ふむふむ、たぶん開いたウィンドウサイズがアニメーションのサイズなので、スクロールしたらアニメーションが切れるということかな。

試しに、canvas.height = window.innerHeight + 500;　ではどうだろう？

・

・

・

あ！出来た！

制作の部署に依頼すればもっといい方法があるかもしれないけど、無料だしこれでもいいよね！

という感じで、風俗のホームページサービスは全国たくさんあると思いますが、まるごとホームページのいいところは、「管理画面でホームページを自由にカスタマイズ出来る」ところにあります！
このようにインターネットでは様々な面白いアニメーションなどのソースが公開されてますので皆さんも動くホームページを作ってみましょう！