パララクスがIEでガタつく(解決済み)

今回、クライアント様から「サイトはパララックスにしたい!」との熱い要望を受け、恥ずかしながらのパララックスコーディング初体験をしました。個人的な足跡を残すため、だらだらと書きます。

 

いろいろ迷った結果”parallax.min.js”を導入しました。すごくシンプルでいい感じに仕上がったと思ったら・・・。

出たよ。伝家の宝刀、IE独自のバグ。

パララックスのところまでスクロールするとガタガタと上下に揺れる。さらっと調べると原因としてはIE独自の「少しづつ読み込みます」が原因のようで、オプションの「スムーズスクロール」が悪さをしているらしい。

 

ためしに解除してみると、解決・・・ってダメじゃん!ユーザーだよりの解決は解決になってない!ということで、解決方法を探すことにします。

スムーズスクロールさえ切ってしまえばいいということは、そういう疑似環境を作ってしまうJSを書いてくれている聖人がいらっしゃるのではないかと思い検索してみるといらっしゃいました。しかし、今回の案件には通用ぜず。残念。一応、解決する方もいらっしゃるかもしれませんので、URLを貼っておきます。

 

IE、Edgeでposition:fixedな要素がスクロール時にガタつく場合の対応策

 

探せど探せど、解決案が見つからない中、まてよと。読み込みが遅くてカクつくなら、少し、もたつかせればいいんじゃね?ということに気づき、そんなJSプラグインを検索。するとありました。それがこちら。

余韻を残してスクロールするようにするjQueryプラグイン-NiceScroll

ぬるふわっとスクロールしてくれるようになるJS。こちらの導入で僕の場合は解決しました。

いやー今回は久しぶりにはまって、丸1日解決方法に時間を取られてしまいました。同じバグに悩んでいる方のご参考になれば幸いです。

 

あっ!parallax.min.jsを解説してくれている方のページも貼っておきますね。

シンプルなパララックスプラグインParallax.jsを試してみる

 

 

alusoconyのTOPへ

リキッドレイアウトのエラーと、スマホの表示崩れを解消

alusoconyのトップへ

 

どうもコンテンツが重なってたんですが、先ほど解消しました。

このエラーは「画像が先に読み込まれているから起きる」ってことまではわかっていたので

画像のファイルサイズを軽くしてみたり、フッターのポジションを調整してみたりといろいろ試行錯誤の結果、スクリプトの開始時に

 

「 $(“#container”).imagesLoaded(function(){」

を書き込むだけで解消されるということに気づき、ストレスフリーな時間を過ごしています。

意味は『画像を読み込んだ後に』ということです。

不安だったので

http://imagesloaded.desandro.com/

ここからimagesloaded.pkgd.min.jsをいただいて埋め込みました^^

これでやっとその他のいろいろに着手できます。

あーーーすっきり!

image1

image2

11月の写真を更新中

毎日更新していないから写真に日付がうまくつけれません。

もっと細かに更新できればなと思ってます。

レイアウトできる限界の枚数もあるし、写真やムービーは容量くうから別のサーバーにアップしたいし、ぜんっぜんSEOもできてないからきちんとかけていきたいし、ブログの中身も触れてないしで・・・。やりたいことは山盛りです。

そして息子は今日もすくすくと育っています^^

 

image5

image6