直近の案件でニュースティッカーを実装する機会があったので、実装の過程を備忘録がてらメモします。 ざっくり言うと、HTMLは普通にマークアップして、javascriptで状態を変更し、CSSで状態に応じたスタイルとアニメーションを付与する、というネタに困ったから記事にしたのがバレるような、何も変わったところのない感じです。あ、状態にはWAI-ARIAを使用しました。 実装例 See the Pen Simple news ticker by Soichi Masuda (@masuP9) on CodePen. HTML 普通です。 <ul class="news-ticker"> <li class="news-ticker--item">大発見!!すごい場所からすごいアレがみつかる</li> <li class="news-ticker--item">すごすぎるアレのすごい10個の秘密<
![シンプルなニュースティッカーにrole=marqueeを添えて / masuP.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/d0de15479ae93ab6b7b041ac6299197aa7d5bfb3/height=288;version=1;width=512/http%3A%2F%2Fmasup.net%2Fimages%2Fscreen_captcha_simple_news_ticker.png)