YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finally made fading elements visible until first scroll.

Browse Source
This commit is contained in:
Dominic Masters
2018-08-14 22:00:15 +10:00
parent 22c00fa9d1
commit f9351674fd
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/animation/fade/ElementScrollFader.jsx
View File

@ -27,7 +27,10 @@ class ElementScrollFader extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { visible: false }; this.state = {
waiting: true,
visible: false
};
this.onScrollBound = this.onScroll.bind(this); this.onScrollBound = this.onScroll.bind(this);
this.updateRectangleBound = this.updateRectangle.bind(this); this.updateRectangleBound = this.updateRectangle.bind(this);
this.checkEffectBound = this.checkEffect.bind(this); this.checkEffectBound = this.checkEffect.bind(this);
@ -74,6 +77,11 @@ class ElementScrollFader extends React.Component {
checkEffect() { checkEffect() {
if(typeof window === typeof undefined) return; if(typeof window === typeof undefined) return;
if(!this.refs || !this.refs.fader) return; if(!this.refs || !this.refs.fader) return;
if(this.state.waiting) {
this.setState({
waiting: false
});
}
if(this.state.visible) return this.detachListener(); if(this.state.visible) return this.detachListener();
if(!this.rect) this.updateRectangle(); if(!this.rect) this.updateRectangle();
@ -104,7 +112,7 @@ class ElementScrollFader extends React.Component {
} else { } else {
clazz += " from-top"; clazz += " from-top";
} }
if(this.state.visible) { if(this.state.visible || this.state.waiting) {
clazz += " is-visible"; clazz += " is-visible";
} }

2
public/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="en"> <html lang="en">
<head> <head>
<title>domsPlace</title> <title>domsPlace - Personal Site of Dominic Masters</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="keywords" content="domsplace, programming, gaming, anime, livestreaming, dominic, masters, dom" /> <meta name="keywords" content="domsplace, programming, gaming, anime, livestreaming, dominic, masters, dom" />