scrollTo延遲頁面轉換效果
[英]scrollTo delay on page transition effect
問題描述
我正在進行看起來像堆疊卡片的頁面轉換。 向下滾動時，顯示下面的卡片。 但滾動回來查看以前的卡片很笨拙，我無法弄清楚原因。 當您快速向上滾動時，過渡效果似乎被中斷。
請看這里的工作示例：
$(window).on('beforeunload', function(){ $(window).scrollTop(0); }); $(function(){ var trueHeight = 0; $('section').each(function() { trueHeight += $(this).outerHeight(); var scrollHeight = trueHeight - $(this).outerHeight(); $(this).data('offset', scrollHeight); }); $('body,html').css({height: trueHeight + "px"}); $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); $('section').each(function() { var off = $(this).data('offset'); if (scrollTop > off) { var translate = (scrollTop - off) / $(window).height() * 100; $(this).css({transform: 'translateY(' + -translate +'%)'}); } }); }); });
/* 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]--> <div class="container"> <section id="hero"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project1"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project2"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project3"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project4"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project5"> <div class="copy"> <h1>Hello There</h1> </div> </section> <section id="project6"> <div class="copy"> <h1>Hello There</h1> </div> </section> </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無法處理快速滾動。 有更好的解決方案嗎？
1 個解決方案
解決方案1
0 2016-05-03 00:18:54
結果證明了這一點：
$('section').each(function() {
var off = $(this).data('offset');
if (scrollTop > off) {
var translate = (off - scrollTop) / $(window).height() * 100;
$(this).css({transform: 'translateY(' + translate +'%)'});
}
else {
$(this).css({transform: 'translateY(' + 0 + '%)'});
}
});
添加else語句解決了我的問題。 沒有它， <section>不知道何時停止翻譯。 數學是這樣的，如果用戶快速滾動，var translate將永遠不會實際為零。
滾動（Page）過渡效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.