ブログ

jQuery.Pageswitch.jsを導入した。そしてjQuery.Biggerlink.jsとの共存に苦労した件について。

ページ遷移時にエフェクトがかけられる、jQuery.Pageswitch.jsを導入してみました。

サイトのほとんどのリンクに使おうと思ったために苦労した点や、jQuery.Biggerlink.jsとの共存に苦労した件などについてまとめてみようと思います。

使うには劇薬みたいなスクリプト

jQuery.Pageswitch.jsのページから導入してサンプル通りにごにょごにょすれば、普通に導入することができます。
ここまではそれほどむずかしいわけではないです、導入は。

別ウインドウで開くリンクや、lightbox系のスクリプト、mailtoリンクなどを除外するようにして指定して作成すればそれほど問題がありません。
…と言ってみますが、そういう指定をしっかりしないと問題がありすぎます、このスクリプトは。

別ウインドウで開くリンクや、lightbox系のスクリプト、mailtoリンクなどに指定すると、クリックした後にもとのウインドウに戻ろうとしたら白い画面ですので(をい)。そして、コンテンツのページに戻ろうとしても履歴が残っていません。
(クリックしても履歴に残りません、このスクリプトでは。)

そこで、外部リンクやlightbox系のスクリプト、mailtoリンクなどには適用除外できるようにしてみました。

ちなみに、このサイトでは、<a>要素の「target="_blank"」はあえて使用していないので設定はありません。お仕事ではもちろん追加しますが。

クリックしても履歴に残りません、という点でこのスクリプトは仕事に使いにくいので、だれか改造してください(汗)。

フェードインするときの見栄えを気にしてみる

導入してみたあと、気になったのはアニメーション部分です。

フェードインするときには<body>要素の背景色でフェードインします。

<body>要素の背景色とコンテンツのメイン部分の背景色が同じ場合は、フェードインの見栄えを気にする必要はありません。
しかし、<body>要素の背景色とコンテンツのメイン部分の背景色が違う場合は、あまり見栄えのいいものではありませんでした。

例えば、<body>要素の背景色が黒系統の色で、コンテンツのメイン部分の背景色が白系統だった場合は、<body>要素の背景色の黒系統の色でフェードインしていくため、変なフェードインがというイメージがします。

そこで、クリックしたときに<body>要素のCSSを変更できるように改造してみました。

jQuery.Biggerlink.jsと共存させる

そして、jQuery.Biggerlink.jsと共存させるのが一番の問題でした。

リストの時は下のようなコードになります。

<div>要素を指定した場合は、マウスオーバー時に、jQuery.Biggerlink.jsが<div>に指定していたクラスを書き換えてしまいます。
そこで、外側にjQuery.Biggerlink.jsが使用するための<div>要素をJQueryで挿入してしまいます。

次に、<div>要素にjQuery.Biggerlink.jsが適用できるようにします。
このとき、先ほど生成した<div>要素を指定するようにします。

最後に、jQuery.Biggerlink.jsとjQuery.Pageswitch.jsを共存させます。

最終形コード

最終的に、以下のようなコードとなりました。

jQuery.Pageswitch.jsはサイト全体に適用しようと思ったら、相当検証しないと泥沼にはまる罠が待っていました。JQueryを使っていて、いちばんサイトに適用させるのが難しかったスクリプトだったりします。

Google Analyticsなどで上手に検証できるか、など検証することや課題が多いのでJavaScriptが得意な人などに効いてみようかと思います。

現状だと、お仕事に使うのは遠慮したいスクリプトですね。
仕事で使うのなら、化粧品とかエステなどのサイトに使ってみるとすこぐ面白いスクリプトの気がします。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。