A Pen by Sergii Velykodnyi on CodePen.
Created
October 4, 2016 20:15
-
-
Save loriezn/5b54ba8f9837cee4f60f8a87cdd761b5 to your computer and use it in GitHub Desktop.
Scrolling Screen
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
| .container | |
| header.header | |
| h1.logo | |
| a.logo__link.js-scroll-link(href="#section-0") brand | |
| nav.navigation | |
| ul.navigation__items | |
| each value, index in [ "Our work", "Who we are", "Contacts" ] | |
| li.navigation__item | |
| a.navigation__link.js-scroll-link(href="#section-#{index + 1}") #{value} | |
| .content.js-scroll-content | |
| each value, index in [ "Home", "Our work", "Who we are", "Contacts" ] | |
| section(id="section-#{index}" class="section section_#{index} js-scroll-item") | |
| h2.section__title #{value} |
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
| (function() { | |
| let container = document.querySelector('.js-scroll-content'); | |
| let items = Array.from(container.querySelectorAll('.js-scroll-item')); | |
| let itemsNumber = items.length; | |
| let navLinks = Array.from(document.querySelectorAll('.js-scroll-link')); | |
| let currentItemIndex = 0; | |
| let scroll = true; | |
| let moveSection = index => { | |
| let positionTop = (-index * 100) + '%'; | |
| container.style.top = positionTop; | |
| }; | |
| let setLocation = index => window.location = `#${items[index].id}`; | |
| // Set strart params | |
| container.style.top = 0; | |
| setLocation(currentItemIndex); | |
| itemsNumber--; | |
| // Scrolling section by navigation. | |
| navLinks.forEach(element => { | |
| element.addEventListener('click', event => { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| let sectionID = element.getAttribute('href').slice(1); | |
| currentItemIndex = items.findIndex(element => { | |
| return element.id === sectionID; | |
| }); | |
| moveSection(currentItemIndex); | |
| }); | |
| }); | |
| // Scrolling sections by mouse/touchpad. | |
| window.addEventListener('wheel', event => { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| let direction = event.deltaY; | |
| if (scroll) { | |
| if (direction > 0 && currentItemIndex < itemsNumber) { | |
| currentItemIndex++; | |
| scroll = false; | |
| } else if (direction < 0 && currentItemIndex !== 0) { | |
| currentItemIndex--; | |
| scroll = false; | |
| } | |
| moveSection(currentItemIndex); | |
| } | |
| }); | |
| container.addEventListener('transitionend', () => { | |
| setTimeout(() => scroll = true, 300); | |
| setLocation(currentItemIndex); | |
| }); | |
| })(); |
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
| $colors: ( | |
| 0: #df405a, | |
| 1: #87314e, | |
| 2: #512645, | |
| 3: #311e3e | |
| ); | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| font-family: sans-serif; | |
| color: #f8f8f8; | |
| } | |
| .container { | |
| overflow: hidden; | |
| height: 100%; | |
| } | |
| .header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| width: 100%; | |
| padding: 1rem; | |
| z-index: 10; | |
| } | |
| .logo { | |
| margin: 0; | |
| &__link { | |
| color: #eee; | |
| font-size: 2rem; | |
| text-decoration: none; | |
| // text-transform: uppercase; | |
| &:hover { | |
| color: white; | |
| } | |
| } | |
| } | |
| .navigation { | |
| &__items { | |
| display: flex; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| &__item { | |
| padding: 0 1rem; | |
| } | |
| &__link { | |
| color: #eee; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| &:hover { | |
| border-bottom: 1px solid rgba(#eee, 0.75); | |
| } | |
| } | |
| } | |
| .content { | |
| position: relative; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| transition: top 1s; | |
| } | |
| .section { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| @each $key, $value in $colors { | |
| &_#{$key} { background-color: $value; } | |
| } | |
| &__title { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin: 0; | |
| font-size: 4rem; | |
| text-align: center; | |
| transform: translate(-50%, -50%); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment