見出し画像
Photo by ジョルジュ・スーラ / メトロポリタン美術館

#65 背景全画面表示をぼやかせた後にクリアにしたい【ぴよぴよコーダーの開発日記】

em

まずは、背景を全画面表示にする
HTML

<html>
<head>
</head>
<body>
  <header></header>
</body>
</html>

CSS

header {
  height: 100vh;
  background: url('sample.jpg') no-repeat top center / cover;
}

次に、ぼやかせる
CSSにfilter: blur(20px)を追加

header {
  height: 100vh;
  background: url('sample.jpg') no-repeat top center / cover;
  filter: blur(20px);
}

デモ　←　四隅のフチが白っぽくぼやける

次に、四隅のフチが白くならないよう、要素の幅を大きくして※１、マイナスマージンをかける※２。親要素にoverflow:hiddenをかけて、マイナスマージン分をはみ出さないようにする※３。
HTML　親要素 wrapper　を追加

<div class="wrapper">
    <header></header>
</div>

CSS

header {
    width: calc(100vw + 60px); //※1
    height: calc(100vh + 60px);//※1
    margin: -30px;             //※2
    background: url('sample.jpg') no-repeat top center / cover;
    filter: blur(20px);
}
.wrapper {
    overflow: hidden; //※3
}

blurが20pxだから 20*2で40px追加でいいかと思ったけど、40pxでもまだ白さが残ったので。さらに20px追加して60pxにしました。
デモ　←　四隅のフチが白っぽくぼやけない

後は、ぼやけをクリアにするアニメーションをつくる
CSS

header {
    margin: -30px;
    width: calc(100vw + 60px);
    height: calc(100vh + 60px);
    background: url('sample.jpg') no-repeat top center / cover;
    animation: fadeoutBlur 3s ease-in-out;
  }
  @keyframes fadeoutBlur {
    0%{
      filter: blur(20px);
    }
    100%{
      filter: blur(0);
    }
 }

デモ　3秒かけてゆっくりクリアになっていく　完成

完成かと思われたが、iOSで、まだ白っぽくなるので、アニメーションによるちらつきをなくすために、-webkit-transform: translateZ(0);　を追加

CSS

header {
    margin: -30px;
    width: calc(100vw + 60px);
    height: calc(100vh + 60px);
    width: calc(100dvw + 60px);　//iOS対応
    height: calc(100dvh + 60px);　//iOS対応
    background: url('./img/m95.jpg') no-repeat 0 0 / cover;
    -webkit-transform: translateZ(0);  //iOS対応 
    animation: fadeoutBlur 3s ease-in-out;
  }

参考

このページのヘッダー画像　ジョルジュ・スーラ「セーヌ川からの眺め」


この記事が気に入ったらサポートをしてみませんか？