ウェブページに逆スクロール効果を実装する
皆さん、ウェブサイトを作成すると、ブラウザはそれをデザインの一番上にロードし、閲覧者は下にスクロールします.しかし、あなたのデザインが逆に面白い場合はどうでしょうか?ページを一番下から始めて上にスクロールしたい場合はどうしますか?このブログでは、わずか 3 つのステップで Web サイトに逆スクロールを実装する方法を学びます...
1. わずか 7 行の HTML から始めます.
2. 数行の CSS:
3. 最後に、3 行の JS:
これで完了です.
.
手順に従いたくないですか?以下はあなたのためのGithubリンクです:)
デモ: https://tbaveja.github.io/reverse-scrolling/
コード: https://github.com/tbaveja/reverse-scrolling
.
読んでくれてありがとう !
1. わずか 7 行の HTML から始めます.
Create panels/ sections inside one main container. I created 5 but you can create as per requirement.
<div class="panelCon">
<div id="pane-5" class="panel">Section 5</div>
<div id="pane-4" class="panel">Section 4</div>
<div id="pane-3" class="panel">Section 3</div>
<div id="pane-2" class="panel">Section 2</div>
<div id="pane-1" class="panel">Section 1</div>
</div>
2. 数行の CSS:
- Set the height of each panel to viewport height.
- Set the position as fixed of main container and bottom as 0. Set the body height as (100*Number of panels)vh.
- Below you can see height of body is set as 500vh as I have created 5 panels.
body {
margin: 0;
padding: 0;
height: 500vh;
}
.panelCon {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 99990;
}
.panel {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
line-height: 35px;
text-transform: uppercase;
}
#pane-1 {
background-color: pink;
}
#pane-2 {
background-color: #e8e8e8;
}
#pane-3 {
background-color: red;
}
#pane-4 {
background-color: pink;
}
#pane-5 {
background-color: yellow;
}
3. 最後に、3 行の JS:
Inside onScroll function of window, increase the bottom value but in negative 😉
$(window).on("scroll", function () {
$(".panelCon").css("bottom", $(window).scrollTop() * -1);
});
これで完了です.
.
手順に従いたくないですか?以下はあなたのためのGithubリンクです:)
デモ: https://tbaveja.github.io/reverse-scrolling/
コード: https://github.com/tbaveja/reverse-scrolling
.
読んでくれてありがとう !
Connect with me on LinkedIn:
Reference
この問題について(ウェブページに逆スクロール効果を実装する), 我々は、より多くの情報をここで見つけました https://dev.to/tbaveja/implement-reverse-scrolling-effect-on-webpage-58g0テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol