現在、紙芝居風のパララックスでのページにアンカーリンクをつけようとしています。
紙芝居風のパララックスの参考サイト
https://www.webprofessional.jp/js-library-scrollreveal-2/
上記のデモ1
紙芝居風のパララックスをつくる為の性質上、z-indexの小さい物の上にどんどんと要素が重なるため、
ページ内リンクも、下に進む動きはできますが、上に上がる動き
(紙芝居を、めくる?重なった要素を剥がすような動き?)
をどうすれば解決できるか分からず止まっております。
このような感じで実装しているサイトも特になく、
分かるかたがいましたらご教示ください。
全部のコードを乗せると、長くなるため、抜粋しております。
具体的にを文面で伝えると、難しいため、
https://xs442579.xsrv.jp/test/recruit/
テスト環境にアップしております。
右上のページ内リンクを押すと、下にスクロールはできるが、上には、戻れない?感じです。
いやいや、position: sticky; を使用しているからだろ!
に関しましては、事前に概要に書いておりますので、その点はを踏まえて、見てくださませ。
HTML
``` <ul class="toc"> <li class="toc__item"> <a class="toc__link" href="#split00"> <img src="<?php echo esc_url(get_theme_file_uri('img/recruit/icon_home.svg')); ?>" alt="HOME"> </a> </li> <li class="toc__item"> <a class="toc__link" href="#split01">01</a> </li> <li class="toc__item"> <a class="toc__link" href="#split02">02</a> </li> <li class="toc__item"> <a class="toc__link" href="#split03">03</a> </li> <li class="toc__item"> <a class="toc__link" href="#split04">04</a> </li> <li class="toc__item"> <a class="toc__link" href="#split05">05</a> </li> </ul> <!-- <div class="prev"> <img src="<?php echo esc_url(get_theme_file_uri('img/recruit/icon_prev.svg')); ?>" alt=""> </div> <div class="next"> <img src="<?php echo esc_url(get_theme_file_uri('img/recruit/icon_next.svg')); ?>" alt="HOME"> </div> --> <div id="luxy" class="split"> <!-- <div id="split01" class="block block-one"> <p class="block__text">One</p> </div> <div id="split02" class="block block-two"> <p class="block__text">Two</p> </div> <div id="split03" class="block block-three"> <p class="block__text">Three</p> </div> <div id="split04" class="block block-four"> <p class="block__text">Four</p> </div> <div id="split05" class="block block-five"> <p class="block__text">Five</p> </div> --> <div id="split00" class="block block-home"> <p class="block__text">Home</p> </div> <div id="split01" class="block block-one"> <p class="block__text">One</p> </div> <div id="split02" class="block block-two"> <p class="block__text">Two</p> </div> <div id="split03" class="block block-three"> <p class="block__text">Three</p> </div> <div id="split04" class="block block-four"> <p class="block__text">Four</p> </div> <div id="split05" class="block block-five"> <p class="block__text">Five</p> </div> </div> ```CSS .toc { position: fixed; top: 30px; right: 30px; z-index: 100; display: flex; } .toc__item { display: flex; width: 30px; height: 30px; border: 1px solid #707070; border-radius: 50%; background: #fff; } .toc__item:not(:first-child) { font-weight: 700; } .toc__item:not(:last-child) { margin-right: 20px; } .toc__link { display: flex; justify-content: center; align-items: center; width: 100%; color: #30386C; /*width: 30px;*/ } .toc__item:first-child .toc__link img { width: 14px; } .prev, .next { position: fixed; left: 50%; transform: translateX(-50%); z-index: 100; width: 40px; } .prev { top: 30px; } .next { bottom: 30px; } .block { /* スクロールスナップ */ /*scroll-snap-align: start;*/ height: 100vh; display: flex; justify-content: center; align-items: center; width: 100%; position: -webkit-sticky; position: sticky; top: 0; left: 0; } .block-home { background: #f6bfbc; } .block-one { background: #212E32; color: #fff; z-index: 10; } .block-two { background: #85937A; z-index: 20; } .block-three { background: #d0af4c; z-index: 30; } .block-four { background: #4c6473; z-index: 40; } .block-five { background: #c37854; z-index: 50; } .block__text { font-size: 60px; font-family: 'Great Vibes', cursive; }``` ```jQuery $(function(){ /*================================================= スムーススクロール =================================================*/ $('a[href^="#"]').click(function(){ let href= $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $("html, body").animate({scrollTop:position}, 500, "swing"); return false; }); });
まだ回答がついていません
会員登録して回答してみよう