Milk+ea

Weblog Is My Hobby.

HTMLとCSSで作る右から左へスクロールする文章

http://nipponcolors.com/#yamabuki

電光掲示板みたいな。

こんな感じ

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%;
  }
}

微調整が必要なプロパティ

.framewidth: **@keyframe scrollto{ left: ** }は開発者ツールなどで微調整します。

@keyframe scrollの方は、ちょうど文章が左側へ完全に消えた値を設定するとよいです。