Last active
May 21, 2019 19:42
-
-
Save daino3/d73a640e00483e220b11efa53a88d371 to your computer and use it in GitHub Desktop.
This file contains 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
| document.addEventListener('scroll', this.onScroll); | |
| function onScroll() { | |
| const offSet = this.getOffset(); | |
| const midScreen = window.innerHeight / 2; | |
| let opacity = 1; | |
| // element is in viewport | |
| if (Math.abs(offSet) < midScreen) { | |
| // *pow to amplify opacity | |
| opacity = Math.pow(Math.abs(offSet) / midScreen, 2); | |
| } | |
| debug(); // let's see all the cool information | |
| this.setState({ opacity, offSet }); | |
| } | |
| function getOffset() { | |
| const el = document.getElementsByClassName("fc-now-indicator-line")[0]; | |
| const midScreen = window.innerHeight / 2; | |
| return el.getBoundingClientRect().top - midScreen; | |
| } | |
| function debug() { | |
| const offSet = this.getOffset(); | |
| const windowHeight = window.innerHeight; | |
| const scrollHeight = window.scrollY; | |
| console.info(` | |
| opacity: ${this.state.opacity}, | |
| offSet: ${offSet}, | |
| windowHeight: ${windowHeight}, | |
| scrollHeight: ${scrollHeight}, | |
| inView: ${Math.abs(offSet) < windowHeight / 2} | |
| `); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment