7月11日：パララックスについて

前からやりたかったが難しそうなイメージだったので、挑戦していなかったが、

やってみるとめっちゃ簡単だった。

htmL

<div class="scrollbox1">スクロールコンテンツ１</div>

<div class="parallax-bg">固定背景</div>

<div class="scrollbox2">スクロールコンテンツ２</div>

CSS

/*画面全体の設定*/ body, html {   height: 100%;   margin: 0 auto;   letter-spacing: 2px;   font-size: 10px; }   /*固定する背景*/ div {   box-sizing: border-box;   color: #FFF;   font-size: 5rem;   display: flex;   align-items: center;   justify-content: center;   height: 100%;   padding: 5%; } .parallax-bg {   background-image: url('画像のURL');   background-attachment: fixed;   background-position: center;   background-size: cover;   background-repeat: no-repeat; }   /*スクロールするコンテンツ*/ .scrollbox1 {   background-color: #111; } .scrollbox2 {   background-color: #222; }

参考サイト

https://www.casleyconsulting.co.jp/blog/engineer/283/

※ちなみに今回はcherimoのレヴュー背景のところに設定。

固定背景のCSSしか設定していない。