CSSで作るMarquee第3弾
前々回に、《CSSで作る全ブラウザ対応marquee》を発表しましたが、全ブラウザ対応と謳っておきながら、実際はChromeでしか、正常動作になりませんでした。output要素がInternet Explorerではサポートされないなどが原因でした。
未サポート機能は代替策を採用し、画像とテキストの左と右スクロールを織り込み、童謡に同期して画像を切り替えるCSSで作るマーキープログラミングについて語ります。
marquee要素との違い
マーキーはネオンサインのようにスクロールするので、経過とともに画像やメッセージを変更したり、一定回数の繰り返しで終了したいことがあります。marquee要素ではloopオプションで簡単に設定できましたが、jQueryライブラリとgithubプラグイン方式ではloopのようなオプションはないようです。
代りにfinishイベントが用意されて、きめ細かい処理を織り込むことができます。これらを解析するにあたり、aamirafridi.comサイトに記載されているサンプルコードがたいへん参考になりました。Events「See the Pen shqKg by Aamir Afridi (@aamirafridi) on CodePen.」の小さなサンプルコードを動作させ、理解して発展させています。
| A | Options: オプション |
| 1 | allowCss3Support |
| 2 | css3easing |
| 3 | easing |
| 4 | delayBeforeStart |
| 5 | direction |
| 6 | duplicated |
| 7 | duration |
| 8 | gap |
| 9 | pauseOnHover |
| 10 | pauseOnCycle |
| 11 | startVisible |
| B | Events: イベント |
| 1 | beforeStarting |
| 2 | finished |
| 3 | paused |
| 4 | resumed |
| C | Methods: メソッド |
| 1 | pause |
| 2 | resume |
| 3 | toggle |
| 4 | destroy |
Up:
marquee要素はいずれ消滅する恐れがありますが、CSSで作るMarqueeはjQueryライブラリサポートのスパンが長いほか、marqueeプラグインソースを取り込んでいるので安定した動作になるでしょう。
ブラウザの特徴
ブラウザは数種類あり、各人の好みもありどれが最高とは申し上げられません。過去はともかく、今もって予算を投じて改良し続けているブラウザが良いと思われます。
機能の高いブラウザは、セミコロンや閉じブロックを忘れても、ほぼ正常に動作します。反面、機能の低いブラウザはセミコロンの省略などに厳しく対処してくれます。
気に入ったブラウザをいつも使っていても、文法エラーを厳しく指摘してくれるブラウザを見捨てることなく使うと何かと役に立ちそうです。
今回の動作例は、Chrome, FireFox, Internet Explorerで動作を確認することができました。Edgeではなぜかスクロールが始まりません。Marquee要素を使った場合は、スクロール動作にぎこちなさが見られましたが、CSSで作るMarquee動作はいずれのブラウザでもスムースな動きになっています。
童謡に同期するマーキー動作例
CSSで作る全ブラウザ対応marquee第3弾Ver 0.11, ©Aidesign,2016再実行は↻ボタンをクリック
