You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by za...@apache.org on 2021/05/08 01:56:34 UTC
[incubator-inlong-website] branch master updated: [feat] refresh
inlong home page
This is an automated email from the ASF dual-hosted git repository.
zakwu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-inlong-website.git
The following commit(s) were added to refs/heads/master by this push:
new e9285eb [feat] refresh inlong home page
e9285eb is described below
commit e9285eb1282f4d4c55a3d0211450d14d20f2b703
Author: zakwu <12...@qq.com>
AuthorDate: Sat May 8 09:56:25 2021 +0800
[feat] refresh inlong home page
---
src/pages/home/index.jsx | 15 ++++++++++++---
1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 73aa329..612f3cb 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -16,6 +16,7 @@ class Home extends Language {
super(props);
this.state = {
headerType: 'primary',
+ p0Animation: false,
p1Animation: false,
p2Animation: false
};
@@ -24,7 +25,15 @@ class Home extends Language {
componentDidMount() {
window.addEventListener('scroll', () => {
const scrollTop = getScrollTop();
- console.log(scrollTop);
+ if (scrollTop === 0 && !this.state.p0Animation) {
+ this.setState({
+ p0Animation: true
+ });
+ } else {
+ this.setState({
+ p0Animation: false
+ });
+ }
if (scrollTop > 350) {
this.setState({
p1Animation: true
@@ -49,7 +58,7 @@ class Home extends Language {
render() {
const language = this.getLanguage();
const dataSource = homeConfig[language];
- const { headerType, p1Animation, p2Animation } = this.state;
+ const { headerType, p1Animation, p2Animation, p0Animation } = this.state;
return (
<div className="home-page">
<section className="top-section" style={{backgroundImage: 'url(' + getLink("/img/first-page-bg.png") + ')'}}>
@@ -59,7 +68,7 @@ class Home extends Language {
language={language}
onLanguageChange={this.onLanguageChange}
/>
- <div className="vertical-middle animate__animated animate__fadeInLeft">
+ <div className={`vertical-middle ${p0Animation ? 'animate__animated animate__fadeInLeft' : ''}`}>
<div className="product-name">
<div className="brandname">{dataSource.brand.brandName}</div>
<div className="projectname" style={{backgroundImage: 'url(' + getLink(`/img/inlong-en.svg`) + ')'}}>