3
スタックされたカードのように見えるページ遷移に取り組んでいます。下にスクロールすると、その下のカードが公開されます。しかし、前のカードを見るためにバックアップをスクロールすることは、ジャッキーです、なぜ私は理解できません。すばやくスクロールして戻ると、トランジション効果は一見中断されます。scrollToページ遷移効果を遅らせる
は、実施例は、ここを参照してください：
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});
$(function(){
\t var trueHeight = 0; \t
\t $('section').each(function() {
\t \t trueHeight += $(this).outerHeight();
\t \t var scrollHeight = trueHeight - $(this).outerHeight();
\t $(this).data('offset', scrollHeight);
\t });
\t
\t $('body,html').css({height: trueHeight + "px"});
\t
\t $(window).scroll(function(){
\t \t var scrollTop = $(window).scrollTop();
\t \t
\t \t $('section').each(function() {
\t \t \t var off = $(this).data('offset');
\t \t \t if (scrollTop > off) {
\t \t \t \t var translate = (scrollTop - off)/$(window).height() * 100;
\t \t \t \t $(this).css({transform: 'translateY(' + -translate +'%)'});
\t \t \t }
\t \t });
\t \t
\t });
});/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
html {
box-sizing: border-box; }
*, *::after, *::before {
box-sizing: inherit; }
html, body {
margin: 0;
position: relative; }
p {
position: absolute;
top: 50px;
left: 100px;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 22.652px;
z-index: 999; }
h1 {
margin-top: 48%;
text-align: center;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 22.652px; }
.copy {
float: left;
display: block;
margin-right: 2.35765%;
width: 65.88078%;
margin-left: 34.11922%; }
.copy:last-child {
margin-right: 0; }
.container {
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden; }
section {
width: 100%;
position: absolute;
top: 0;
height: 735px;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.15); }
#hero {
background: #bada55;
z-index: 99; }
#project1 {
background: #54d9d5;
z-index: 98; }
#project2 {
background: #e49012;
z-index: 97; }
#project3 {
background: #545fd9;
z-index: 96; }
#project4 {
background: #e312cb;
z-index: 95; }
#project5 {
background: #d95454;
z-index: 94; }
#project6 {
background: #e3dd12;
z-index: 93; }<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
\t \t <div class="container">
\t <section id="hero">
\t \t <div class="copy">
\t \t \t <h1>Hello There</h1>
\t \t </div>
\t </section>
\t <section id="project1">
\t \t <div class="copy">
\t \t \t <h1>Hello There</h1>
\t \t </div>
\t </section>
\t <section id="project2">
\t \t <div class="copy">
\t \t \t <h1>Hello There</h1>
\t \t </div>
\t </section>
\t <section id="project3">
\t \t <div class="copy">
\t \t \t <h1>Hello There</h1>
\t \t </div>
\t </section>
\t <section id="project4">
\t \t <div class="copy">
\t \t \t <h1>Hello There</h1>
\t \t </div>
\t </section>
\t <section id="project5">
\t \t <div class="copy">
\t \t \t <h1>Hello There</h1>
\t \t </div>
\t </section>
\t <section id="project6">
\t \t <div class="copy">
\t \t \t <h1>Hello There</h1>
\t \t </div>
\t </section> \t \t
\t \t </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="js/main.js"></script>
</body>私は推測していますいずれかの私の数学がオフになっているか、またはそのjQueryのクイックスクロールを処理することはできません。より良い解決策はありますか？
また、どのように/なぜそれが助けられたかについてのいくつかの言葉を加えてください。 –