Pocket

分かりにくいタイトルになってしまいましたが、まずはDEMOサイトを見てください!

demo-site-use-object


画面上のリストをホバーしたときに、ホバーしたaタグのリンク先のページを背景に表示しています。
表示されたページをスクロールしたり、表示されたページ内でリンクをクリックして移動することもできます。
この実装方法を詳しく説明していきます!




objectタグで別サイトのページを表示する方法

まずは、HTMLです。
重要なのは、ホバー先のページを表示する<object>タグにtype=”text/html”の属性を記述することです。
<object>タグについてはこちらに詳しく載っています→<object>-HTML5タグリファレンス


続いて、CSSです。
webページの情報を、いまのページの背景にうっすらと表示するために<object>タグにいくつか指定がしてあります。
その他は特に気にしなくていいです。



最後にjQuery(javascript)です。
まず、<object>タグをobjwrapという変数に入れておきます。

5行目から、ホバーしたときの動作になります。
ホバーしたかどうかは、mouseenterでひろっています。ホバーした対象のリンク先のURLを<object>タグのdata属性にセットします。セットすると、指定したURLのページを読み込みが開始され、リンク先のページが背景に表示されます。

10行目から12行目は、表示された背景の初期化をするために、bodyをクリックしたときに<object>タグのdata属性を削除する動作になっています。



まとめ

簡単なjQueryを少し記述することで、なかなかインパクトのある見せ方ができるので、ポートフォリオサイトなどさまざまな場面で使えるのではないでしょうか?
また、<object>タグは、他にもいろいろな使い方ができそうなので、調べて使っていきたいと思います。

それでは!

Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.