javascript - Slowing the speed of a Jquery Scroll -
i've been using jquery scroll enhance parallax scrolling page. specifically, one. jquery scroll next section
i new jquery, (and have used basic javascript in past). can work out how change , adapt code found needs, don't know how slow scroller down.
the problem, accommodate of content in page, needs 17000px high. want scroller scroll bottom of page top (without stops inbetween), when clicked takes 1 second scroll 17000px. means can't read of text displayed. want scrolling animation max out @ 1000px per second. how this?
html
<div class="background fixed"></div> <div class="trigger-scroll">></div> <!-- sections id'd 1 through 5 --> <section id="slide-6" class="homeslide"> <div class="bcg center fixed" data-0="top:200%; opacity:0;" data-16000="top:200%; opacity:1;" data-17000="top:90%;" data-end="top:90%;"> <div class="hscontainer"> <div class="center middle"> <h2>view portfolio!</h2> <a href="portfolio.html"><img class="portfolio" src="img/r3gamershome.png"/></a> </div> </div> </div> </section> <section id="slide-7" class="homeslide scroll-here"> <div class="hscontainer"> <div class="hscontent bottom" > <h3>test</h3> </div> </div> </section> javascript
( function( $ ) { // setup variables $window = $(window); $slide = $('.homeslide'); $body = $('body'); //fadein sections $body.imagesloaded( function() { settimeout(function() { // resize sections adjustwindow(); // fade in sections $body.removeclass('loading').addclass('loaded'); }, 800); }); function adjustwindow(){ // init skrollr // window size winh = $window.height(); // keep minimum height 550 if(winh <= 550) { winh = 2900; } // resize our slides $slide.height(winh); // refresh skrollr after resizing our sections } } )( jquery ); var s = skrollr.init(); s.refresh($('.homeslide')); $(document).ready(function() { /* run scroll section if body has class page-scroller */ var pagescroller = $( 'body' ).hasclass( 'page-scroller' ); if ( pagescroller ) { // begin homepage scroll section var $scrollsection = $('.scroll-here'); var $scrolltrigger = $('.trigger-scroll'); var nextsection = 0; $scrolltrigger.on( 'click', function() { $(this).removeclass('go-to-top'); // if @ last section, scroll top on next click: if (nextsection >= $scrollsection.length) { $('html, body').animate({ scrolltop: 0 }, 1000); nextsection = 0; return; } // if scrolled down // find next section position don't go backwards: while ( $('body').scrolltop() > $($scrollsection[nextsection]).offset().top ) { nextsection++; } // if next section last, add class rotate arrow: if (nextsection === ($scrollsection.length - 1)) { $(this).addclass('go-to-top'); } // move next section , increment counter check: $( 'html, body' ).animate({ scrolltop: $($scrollsection[nextsection]).offset().top }, 1000); nextsection++; }); // end homepage scroll section }else{ console.log('page-scroller class not found in body tag'); }//end if else }); css (probably isn't relevant i've added bare minimum, in case)
.bcg { background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100%; width: 100%; } .hscontainer { width: 100%; height: 100%; overflow: hidden; position: relative; } .hscontent { max-width: 700px; position: absolute; } .hscontent h2 { color: #fff8de; padding: 10px 5px; font-size: 30px; } @media screen , (max-height: 400px) { .hscontent h2 { font-size: 25px; } } .hscontent h3 { color: #fff8de; padding: 10px 5px; line-height: 20px; margin-bottom: 5px; } @media screen , (max-height: 400px) { .hscontent h3 { font-size: 15px; padding: 5px 2.5px; margin-bottom: 2px; } } .hscontent h4 { color: #fff8de; padding: 10px 5px; line-height: 15px; margin-bottom: 5px; } @media screen , (max-height: 400px) { .hscontent h4 { font-size: 10px; } } .hscontent p { width: 400px; color: #b2b2b2; } .hscontent { color: #b2b2b2; text-decoration: underline; } .fixed { position: fixed; } .center{ top:0; bottom:0; left:0; right:0; margin: auto; } .middle { text-align: center; margin: 0px; padding-top: 40px; width: 100%; min-width: 300px; } @media screen , (max-height: 400px) { .middle { padding-top: 15px; } } #slide-6 .bcg {background-color: rgb(208, 208, 208); top: 100%; box-shadow: inset 5px 5px 20px black; } #slide-6 .hscontent { top: 0px; text-align: center; } #slide-7 .hscontent { max-height: 100px; } .trigger-scroll { box-sizing: border-box; display: inline-block; border: 1px #f60 solid; bottom: 20px; width: 68px; height: 68px; position: fixed; right: 20px; padding: 16px 20px; transition: transform 500ms ease-in-out; z-index: 50; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); font-weight: 700; text-shadow: 0 1px 0 #fff; color: #fff; font-family: verdana; font-size: 2em; line-height: 1; cursor: pointer; border-radius: 3px; opacity: 0.8; box-shadow: 1px 0px 1px 1px rgba(102,51,0, .25); } @media screen , (max-height: 400px) { .trigger-scroll { width: 51px; height: 51px; font-size: 1.5em; padding: 12px 15px; } } .trigger-scroll:hover { background: #f60; border-color: #c30; } .trigger-scroll.go-to-top { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
in section's third line, change 1000:
// if @ last section, scroll top on next click: if (nextsection >= $scrollsection.length) { $('html, body').animate({ scrolltop: 0 }, 1000); nextsection = 0; return; } to $(document).height(), this:
$('html, body').animate({ scrolltop: 0 }, $(document).height()); this make animation scroll @ 1000 pixels per second.
Comments
Post a Comment