Created
October 1, 2018 22:04
-
-
Save DevShahidul/82ecb9f510c423617ab9b69cfb256894 to your computer and use it in GitHub Desktop.
See the example here >>> https://codepen.io/Javarome/post/full-page-sliding
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"> | |
| <meta name="format-detection" content="telephone=no"> | |
| <title> Linton-Park | Our Wines Selected </title> | |
| <style> | |
| body { | |
| margin:0; | |
| padding:0; | |
| } | |
| .page { | |
| width:100%; | |
| height: 100vh; | |
| } | |
| h1 { | |
| line-height:100vh; | |
| margin:auto; | |
| text-align:center; | |
| color: white; | |
| } | |
| #one { | |
| background: blue; | |
| } | |
| #two { | |
| background: red; | |
| } | |
| #three { | |
| background: green; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page" id="one"> | |
| <h1>JQuery does</h1> | |
| </div> | |
| <div class="page" id="two"> | |
| <h1>simplify things, but</h1> | |
| </div> | |
| <div class="page" id="three"> | |
| <h1>at performance cost!</h1> | |
| </div> | |
| </body> | |
| </html> | |
| <script> | |
| /* See related post at | |
| https://codepen.io/Javarome/post/full-page-sliding | |
| */ | |
| function ScrollHandler(pageId) { | |
| var page = $('#' + pageId); | |
| var pageStart = page.offset().top; | |
| var pageJump = false; | |
| function scrollToPage() { | |
| pageJump = true; | |
| $('html, body').animate({ | |
| scrollTop: pageStart | |
| }, { | |
| duration: 1000, | |
| complete: function() { | |
| pageJump = false; | |
| } | |
| }); | |
| } | |
| window.addEventListener('wheel', function(event) { | |
| var viewStart = $(window).scrollTop(); | |
| if (!pageJump) { | |
| var pageHeight = page.height(); | |
| var pageStopPortion = pageHeight / 2; | |
| var viewHeight = $(window).height(); | |
| var viewEnd = viewStart + viewHeight; | |
| var pageStartPart = viewEnd - pageStart; | |
| var pageEndPart = (pageStart + pageHeight) - viewStart; | |
| var canJumpDown = pageStartPart >= 0; | |
| var stopJumpDown = pageStartPart > pageStopPortion; | |
| var canJumpUp = pageEndPart >= 0; | |
| var stopJumpUp = pageEndPart > pageStopPortion; | |
| var scrollingForward = event.deltaY > 0; | |
| if ( ( scrollingForward && canJumpDown && !stopJumpDown) | |
| || (!scrollingForward && canJumpUp && !stopJumpUp)) { | |
| event.preventDefault(); | |
| scrollToPage(); | |
| } | |
| } else { | |
| event.preventDefault(); | |
| } | |
| }); | |
| } | |
| new ScrollHandler('one'); | |
| new ScrollHandler('two'); | |
| new ScrollHandler('three'); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment