山梨県甲府市にあるデザイン事務所『リードスタイル』です。WEB（ホームページ）デザイン・グラフィックデザイン・サイン（看板）デザイン、プロモーション・ブランディング戦略、新規事業や新規店舗等のデザインツールをトータルにご提案させて頂いています。

今回は、CSSの疑似要素でbackground-imageプロパティを使用して表示した画像に、ちょっとした動きをつける方法を覚え書きも兼ねて紹介します。

DEMO

背景が止まっているときは、ページを再読み込みしてください。

HTML

  <div class="wrapper">
      <div class="text">
        <p>背景がゆっくり動きます</p>
      </div>
  </div>

CSS

.wrapper {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
}

.wrapper::before {
   content: '';
   display: block;
   width: 100%;
   height: 100%;
   background-image: url(画像URL);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   -webkit-animation: zoom 10s 1;
   animation: zoom 10s 1;
   animation-fill-mode: forwards;
}

@keyframes zoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(1.5);
   }
}

.text{
  /*wrapperの中身を上下中央揃え*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 400px;
  height: 50px;
  background-color: #fff;
  text-align: center;
}

.wrapperの中身に文字などの要素を配置するときは、疑似要素で背景を指定することで、背景画像だけが動くデザインがより簡単に再現できます。中身要素には、position: absolute;を指定して制御するとうまく収まります。

今回は画像がゆっくり拡大していくモーションをつけてみました。モーションに関しては、cssのanimationを使用して実装。animationにzoomという任意の名前をつけ、画像が10秒かけて1.5倍に拡大するようにしています。

WEBサイトのヒーローイメージで使用する写真が少ない、画面がすこしさみしいときに、ちょっとした動きをつける小技でした。