可視範囲に入ると背景画像がめくれたように表示される

###前提・実現したいこと
WEbの制作でスクロール時に背景画像がめくれたように表示させたいと思っています。
またはこちらのページ（https://www.gsij.co.jp）
のようにスライドして表示させたいです

スライド表示で検索してもスライドショーしか出てこないので質問させていただきました
よろしくお願いします。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答3件

ベストアンサー

そのサイトのコードを見た感じ、めくる感じの効果は、

js
1	  _createClass(InView, [{
2	    key: 'shownAction',
3	    value: function shownAction(e) {

ここ以降に書かれているのがそれだと思います。また、スクロールの制御は、

js
1	  _createClass(InViewBase, [{
2	    key: 'setOffset',
3	    value: function setOffset(n) {
4	      this.offset = n;
5	    }
6	  }, {

ここ以降に書かれているのがそれだと思います。
TweenMaxを使っているようですね。

投稿2018/01/15 05:06

Lhankor_Mhy

総合スコア36074

私なら、下記のようにします。

jQueryを使って、要素が表示されたタイミングでクラス名を追加します。
疑似要素を左から右へ移動させて、めくれた感じを表現します。
同じタイミングで画像のopacityを0から1へ変更します。
アニメーションはCSSで行います。

html
1<div id="inview">
2	<img src="img.jpg" alt="">
3</div>

css
1#inview {
2	position: relative;
3	overflow: hidden;
4}
5#inview::after {
6	content: "";
7	width: 100%;
8	height: 100%;
9	display: block;
10	background: #032947;
11	position: absolute;
12	left: -100%;
13	top: 0;
14	transition: .8s;
15}
16#inview img {
17	opacity: 0;
18	transition: .2s .2s;
19}
20		
21/* 可視範囲に入ったとき */
22#inview.show::after {
23	left: 100%;
24}
25#inview.show img {
26	opacity: 1;
27}

jQuery
1$(window).scroll(function(){
2	
3	// スクロール量 + 画面の高さ > スライドさせたい要素の位置　→　要素が可視範囲に入ったら
4	if ($(this).scrollTop() + $(this).height() > $('#inview').offset().top) {
5		
6		// スライドさせたい要素にクラス名を追加
7		$('#inview').addClass('show');
8	}
9});