ロールするテキスト
概要
テキストが継続的にロールするアニメーションです。
ロールさせたいテキストの親にラッパー要素で包み、兄弟要素に同じテキストをマークアップしています。兄弟要素にはaria-hidden属性でアクセシビリティツリーから削除し、スクリーンリーダーで重複読み上げ対策をしています。
うまくアニメーションさせるコツとしては、親のラッパークラスよりもテキストの幅を大きくすることで、継ぎ目なくロールさせることができます。
コードサンプル
HTML
<div class="roleWrap">
<p class="role anim-role">TEXT TEXT</p>
<p class="role anim-role" aria-hidden="true">TEXT TEXT</p>
</div>CSS
.roleWrap {
display: flex;
overflow: hidden;
width: 300px;
white-space: nowrap;
}
.role {
margin: 0;
padding-left: 0.5em;
font-size: inherit;
width: fit-content;
}
.anim-role {
animation: role 5s linear 0s infinite normal none running;
}