HTMLとCSSで作る右から左へスクロールする文章
電光掲示板みたいな。
こんな感じ
See the Pen 2015-01-31 by nju33 (@nju33) on CodePen.
コード
HTML
<div class="wrapper"> <div class="frame"> <p class="scroll-p">スクロールする文章スクロールする文章スクロールする文章</p> </div> </div>
CSS
body { height: 100vh; width: 100vw; display: table; background: #444; font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .wrapper { display: table-cell; vertical-align: middle; margin: 0 auto; width: 70%; } .frame { width: 500px; margin: 0 auto; background: #222; box-shadow: inset 0 2px 7px -3px #000; overflow-x: hidden; } .scroll-p { padding: 0.3em; margin: 0; color: #ffb11b; position: relative; -webkit-animation: scroll 12s linear infinite; -moz-animation: scroll 12s linear infinite; -ms-animation: scroll 12s linear infinite; animation: scroll 12s linear infinite; } @-moz-keyframes scroll { from { left: 100%; } to { left: -89%; } } @-webkit-keyframes scroll { from { left: 100%; } to { left: -89%; } } @-o-keyframes scroll { from { left: 100%; } to { left: -89%; } } @keyframes scroll { from { left: 100%; } to { left: -89%; } }
微調整が必要なプロパティ
.frame
のwidth: **
、@keyframe scroll
のto{ left: ** }
は開発者ツールなどで微調整します。
@keyframe scroll
の方は、ちょうど文章が左側へ完全に消えた値を設定するとよいです。