CSSで背景画像のシームレスパターンを無限スクロールさせるアニメーション

c
このエントリーをはてなブックマークに追加
PR

CSSのアニメーションを使って、シームレスなパターンで背景を無限スクロールさせる

背景画像がシームレスパターンの時に使えるテクニックです。シームレスパターンなパターンをbackgroundで背景画像に利用し、background position で背景画像を動かすアニメーションを繰り返すものです。背景画像は自動でrepeatで敷き詰められるのを利用しています。

 

DEMO 表示

 

ー CODE ー

HTML

<section>
 <h1>BACK GROUND SCROLL</h1>
</section>

 

CSS

body {
 margin: 0;
 padding: 0;
}
section {
 height: 300px;
 margin: 100px 10px;
 background-image: url(bg.png);
 -webkit-background-size: 500px;
 background-size: 500px;
 -webkit-animation: bgscroll 25s linear infinite;
 animation: bgscroll 25s linear infinite;
}

h1 {
 height: 300px;
 line-height: 300px;
 color: #fff;
 text-align: center;
 font-size: 60px;
 font-family: impact;
 font-weight: normal;
}

@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -500px;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -500px;}
}
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)