aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-10-01 09:28:34 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commitf1e26bb1c4b7954068501c520d8ab22ab5402dfe (patch)
treef08ebd6ca16a2a9329ff19c8847047b4257440dd
parent85b878f5e9526f384f33774e0d5ab507d7703e24 (diff)
update header animation
-rw-r--r--vnext/src/components/Header.js61
-rw-r--r--vnext/src/style/main.css4
2 files changed, 34 insertions, 31 deletions
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 43935f4c..68375d48 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -14,35 +14,10 @@ export default class Header extends React.Component {
this.wScrollDiff = 0;
this.header = React.createRef();
}
- componentDidMount() {
- const header = this.header.current;
- window.addEventListener('scroll', this.throttle(250, () => {
- this.dHeight = document.body.offsetHeight;
- this.wHeight = window.innerHeight;
- this.wScrollCurrent = window.pageYOffset;
- this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
-
- if (this.wScrollCurrent <= 0) {
- // scrolled to the very top; element sticks to the top
- header.classList.remove(elClassHidden);
- header.classList.remove(elClassBackground);
- } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
- // scrolled up; element slides in
- header.classList.remove(elClassHidden);
- header.classList.add(elClassBackground);
- } else if (this.wScrollDiff < 0) {
- // scrolled down
- if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) {
- // scrolled to the very bottom; element slides in
- header.classList.remove(elClassHidden);
- header.classList.add(elClassBackground);
- } else {
- // scrolled down; element slides out
- header.classList.add(elClassHidden);
- }
- }
- this.wScrollBefore = this.wScrollCurrent;
- }), { passive: true });
+ componentDidMount() {
+ window.addEventListener('scroll', () => (!window.requestAnimationFrame)
+ ? this.throttle(250, this.updateHeader)
+ : window.requestAnimationFrame(this.updateHeader), false);
}
throttle(delay, fn) {
var last, deferTimer;
@@ -62,6 +37,34 @@ export default class Header extends React.Component {
}
};
}
+ updateHeader = () => {
+ const header = this.header.current;
+ this.dHeight = document.body.offsetHeight;
+ this.wHeight = window.innerHeight;
+ this.wScrollCurrent = window.pageYOffset;
+ this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
+
+ if (this.wScrollCurrent <= 0) {
+ // scrolled to the very top; element sticks to the top
+ header.classList.remove(elClassHidden);
+ header.classList.remove(elClassBackground);
+ } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
+ // scrolled up; element slides in
+ header.classList.remove(elClassHidden);
+ header.classList.add(elClassBackground);
+ } else if (this.wScrollDiff < 0) {
+ // scrolled down
+ if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) {
+ // scrolled to the very bottom; element slides in
+ header.classList.remove(elClassHidden);
+ header.classList.add(elClassBackground);
+ } else {
+ // scrolled down; element slides out
+ header.classList.add(elClassHidden);
+ }
+ }
+ this.wScrollBefore = this.wScrollCurrent;
+ }
render() {
return (<header ref={this.header}>{this.props.children}</header>);
}
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 3947b0b0..c5e33ef7 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -91,8 +91,8 @@ noscript article {
top: 0;
width: 100%;
z-index: 10;
- transition-duration: 0.5s;
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transition-duration: 0.4s;
+ transition-timing-function: ease-in-out;
transition-property: transform;
}
@supports (backdrop-filter: blur(10px)) {