スクロールするとヘッダー背景画像が拡大 | 動くWebデザインアイディア帳

エリアの動き
-スクロールするとヘッダー背景画像が拡大-

デモページを見る

See the Pen 6-7 スクロールするとヘッダー背景画像が拡大 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

CSSで画面全体を覆う背景画像をposition:fixed;で固定し、JavaScript側でスクロールにあわせ、背景画像の位置をずらし、拡大を加える。

[使用するライブラリ]
＊jQuery

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-7.css">
</head>

body内にHTMLを記載します。

<header id="header">
<h1>Logo</h1>
<div id="header-img"></div>
</header>

<main id="container">
<section>
<h2>Area 1</h2>
<!--/section--></section>
<!--/main--></main>

<footer id="footer">
<small>&copy; copyright.</small>
</footer>

body 終了タグ直前に jQueryと、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/6-7.js"></script>
</body>

自作のCSS内の書き方

#header{
	position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
  width: 100%;
	height:100vh;
 	overflow: hidden;/*はみ出しているところを隠す*/
}

#header-img{
  position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
  top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
  width: 100%;
	height:100vh;
	background: url("../img/pict.jpg") no-repeat top center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}

#container,
#footer{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}

/*ロゴを中央に配置*/
#header h1{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;/*#header-imgよりも手前に配置*/
}

自作のJS内の書き方

$(window).scroll(function() {
        var scroll = $(window).scrollTop();//スクロール値を定義
    //header-imgの背景
	$('#header-img').css({
			transform: 'scale('+(100 + scroll/10)/100+')',//スクロール値を代入してscale1から拡大.scroll/10の値を小さくすると拡大値が大きくなる
			top: -(scroll/50)  + "%",//スクロール値を代入してtopの位置をマイナスにずらす
        });
    });