スポンサーリンク

右から左へ画像を新しく受け流す。

今回は備忘録的な記事です。

『ちかてつと駅の壁』サイトをSeesaaからレンタルサーバーのWordPressに引っ越して約1年が経ちましたが、一箇所だけず〜っと気になる場所ありました。

イラストがスクロールしてる部分、スマホだとちゃんとループしてくれない問題。

思えば画像のスクロール機能を見つけたことが『ちかてつと駅の壁』を作るきっかけでした。今やサイトの主軸がブレてきている気がしますがあのサイトの根幹はやっぱりイラストを見せるところだと思うのでここはしっかりしないといけないと思うのです。

今までのスライダー

今まではこちらのサイトのjQueryでループスライダーを実装していました。

jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法｜BLACKFLAG
Web Development Technical Blog for Web Creators.
black-flag.net

（現在は改良版も出ているようです）

jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法｜BLACKFLAG
Web Development Technical Blog for Web Creators.
black-flag.net

しかし、Terafyの設定がうまくなかったのか、レスポンシブ表示に対応してなかったようで引っ越し後スマホで見ると画像が途切れてしまう問題が発生。どーにかならないかなぁ〜とちょいちょい探してはいたのですがなかなか条件に合うものが見つかりませんでした。上記のサイトの改良版はスクロール方向変えられないっぽいですしね。

そもそもTerafyはhtmlやCSSはある程度読めてもJavaScriptは全く読めないので改良や改善ができません。しかもjQueryプラグインとなるとWordPressに組み込む方法もよくわからず。もっとシンプルなものないかなぁ〜とここ1ヶ月ほどは真剣に探してみました。

目的のもの、見つかりましたよ

なんと、JavaScriptを一切使わずCSSだけで実装できるものを見つけました。

考えてみればうちのサイトの場合複数の画像をスクロールさせるのではなく一つの画像をスクロールさせるのだから昔でいうmarqueeタグの画像版みたいなものがあればいい。しかも、簡単に画像を繰り返し並べられる背景画像をスクロールという手段を使えば完璧じゃないか！

まさに目からウロコ。検索対象を変えてもっと調べてみると『@keyframes』というのがキーワードのようです。さらに『translate3d』というのを使えばGPUで処理するからスクロールがよりなめらかになるだって！？

こちらのサイトを参考にやってみました。
Web Design Lyric〜jQueryを使わずにCSSのみで背景画像をX軸にスライドさせる方法

記事内
<div class="kabe-pic">
<div class="kabe-illust" style="background-image:url(https://〜〜/xxxx.png)">
</div></div>

CSS部分
.kabe-pic {
    overflow: hidden;
}

.kabe-illust {
    width: 3308px;
    height: 200px;
    background-size: 1654px 200px;
    background-repeat: repeat-x;
    -webkit-animation:kabescroll 25s linear infinite;
    animation:kabescroll 25s linear infinite;
}

@-webkit-keyframes kabescroll {
    0% {-webkit-transform:translate3d(0, 0, 0);}
    100% {-webkit-transform:translate3d(-1654px,0,0);}
}
@keyframes kabescroll {
    0% {transform:translate3d(0, 0, 0);}
    100% {transform:translate3d(-1654px,0,0);}
}

たったこれだけで実装できてしまいました。わーおシンプル！PCでもスクロールが気持ちなめらかに！そしてちゃんと高解像度ディスプレイにも対応しました。

しかし最後に恐ろしい罠に

あまりに簡潔すぎて感動のあまり記事にしてしまったくらいですが、それは全てが終わったから言えること。実はこの後、完全解決に3日ほどかかってしまいました。

MACのFirefoxで作業していたのですが、確認のためにSafariで確認してみるとなぜかイラストが表示されない…同じくandroidスマホのブラウザで確認してみるとイラストが表示されない。これ、ブラウザ依存で動かない！？と絶望しながら色々いじってみるも変化なし。どうすればいいんだー！と3日間解決せず、イライラ最高潮に達した時、キャッシュをクリアした途端にイラストが現れてスクロールし始めました。…この3日間は何だったんだろう。

動きがあるとカッコいいよね

今回のことでanimationCSSについて少し知識が増えたTerafy。他のところでも使ってみたくなりました。動きのあるサイトはカッコイイですし。まぁやりすぎは見辛くなりそうですけどね。キーフレームをもっと細かく制御してサイト内に電車を走らせることも可能かもしれません。気が向いたら色々いじってみたくなったのでした。

コメント