You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/11/10 12:50:26 UTC
[incubator-echarts-www] branch next updated: feat: add home page
animation
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-www.git
The following commit(s) were added to refs/heads/next by this push:
new d4ddb73 feat: add home page animation
new 8f3bcfd Merge pull request #18 from zhanfang/next
d4ddb73 is described below
commit d4ddb73859cdfd36b41b2ad6341225fac7cbbe4c
Author: zhanfang <zh...@baidu.com>
AuthorDate: Tue Nov 10 18:27:52 2020 +0800
feat: add home page animation
---
.DS_Store | Bin 0 -> 6148 bytes
_jade/zh/index.jade | 123 ++++++++++++++++++++++++++++++++++++-------
_scss/_pages.index.scss | 20 +++----
asset/lottie/json/bg.json | 1 -
asset/lottie/json/bg_01.json | 1 +
asset/lottie/json/bg_02.json | 1 +
asset/lottie/json/bg_03.json | 1 +
asset/lottie/json/bg_04.json | 1 +
asset/lottie/json/bg_05.json | 1 +
asset/lottie/json/bg_06.json | 1 +
10 files changed, 117 insertions(+), 33 deletions(-)
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..53225a4
Binary files /dev/null and b/.DS_Store differ
diff --git a/_jade/zh/index.jade b/_jade/zh/index.jade
index 377698a..5d36253 100644
--- a/_jade/zh/index.jade
+++ b/_jade/zh/index.jade
@@ -50,30 +50,30 @@ block content
p.more 更多功能，等你体验
.list
.list-line
- .list-item
+ .list-item(feat="0")
.item
.left
- .icon-bg
+ .icon-bg#bg-icon-1
.feature-icon-panel#icon-1
.right
h3 超多图表类型和强大的自定义，满足千万种可能
.content
p 30多种图表和强大的自定义功能，类型不设限，机会无极限。
p 满足你千变万化的数据和场景，更注重满足你的个性化需求
- .list-item
+ .list-item(feat="1")
.item
.left
- .icon-bg
+ .icon-bg#bg-icon-2
.feature-icon-panel#icon-2
.right
h3 千万级别数据量的前端展现，仍然轻松流畅
.content
p 使用增量渲染、对流加载等技术，配合各种细致的优化，在展现
p 千万级的数据量的同时依然能进行流畅的图表交互
- .list-item
+ .list-item(feat="2")
.item
.left
- .icon-bg
+ .icon-bg#bg-icon-3
.feature-icon-panel#icon-3
.right
h3 打破与图表的边界，获得更多的体验机会
@@ -83,20 +83,20 @@ block content
p 如一的美好体验
.list-hr
.list-line
- .list-item
+ .list-item(feat="3")
.item
.left
- .icon-bg
+ .icon-bg#bg-icon-4
.feature-icon-panel#icon-4
.right
h3 开箱即用，做图表变得更简单
.content
p 提供开箱即用的组件和配置，极简配置即可实现万千可能。
p 支持多种数据格式、多渲染方案，直接使用毫无压力
- .list-item
+ .list-item(feat="4")
.item
.left
- .icon-bg
+ .icon-bg#bg-icon-5
.feature-icon-panel#icon-5
.right
h3 多维度的数据分析，发掘更多数据的价值
@@ -105,10 +105,10 @@ block content
p 多图表联动查看 —— 对多个图表数据联动查看，多维有效分析
p dataset 数据变换——对数据自由的过滤、统计，深度探索数据
p storytelling —— 提升数据自己讲故事的能力，更加生动的展现
- .list-item
+ .list-item(feat="5")
.item
.left
- .icon-bg
+ .icon-bg#bg-icon-6
.feature-icon-panel#icon-6
.right
h3 才华与颜值兼备，玩转图表新可能
@@ -140,17 +140,50 @@ block content
setLottieAnimatiion('icon-5', 'asset/lottie/json/compatible.json');
setLottieAnimatiion('icon-6', 'asset/lottie/json/grown.json');
- var bgs = document.querySelectorAll('.icon-bg');
- for(var i = 0; i < bgs.length; i++) {
- setLottieAnimatiion(bgs[i], 'asset/lottie/json/bg.json');
+ for(var i = 0; i < 6; i++) {
+ setLottieAnimatiion('bg-icon-' + (i + 1), 'asset/lottie/json/bg_0'+ (i + 1) + '.json');
}
- $('.list-item').mouseenter(function(el) {
+ $('.list-item').mouseenter(function(event) {
+ var num = +$(this).attr('feat');
+ var list = $('.list-item .item');
+
+ if (num === 0 || num === 3) {
+ $(list[num]).css('border-bottom', 0);
+ }
+
+ if (num === 1 || num === 4) {
+ $(list[num - 1]).css('border-bottom', 0);
+ $(list[num]).css('border-bottom', 0);
+ }
+
+ if (num === 2 || num === 5) {
+ $(list[num - 1]).css('border-bottom', 0);
+ }
+
var id = $(this).find('.feature-icon-panel')[0].id;
- console.error(id, animationMap[id]);
+ animationMap['bg-' + id].goToAndPlay(0);
animationMap[id].goToAndPlay(0);
});
+ $('.list-item').mouseleave(function(event) {
+ var num = +$(this).attr('feat');
+ var list = $('.list-item .item');
+
+ if (num === 0 || num === 3) {
+ $(list[num]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
+ }
+
+ if (num === 1 || num === 4) {
+ $(list[num - 1]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
+ $(list[num]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
+ }
+
+ if (num === 2 || num === 5) {
+ $(list[num - 1]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
+ }
+ });
+
section#publication
.container
#start-line
@@ -166,9 +199,61 @@ block content
script(type='text/javascript').
(function () {
+ var hasStartLineShow = false;
+ var hasPaperShow = false;
+ var hasEndLineShow = false;
+
setLottieAnimatiion('paper-icon', 'asset/lottie/json/paper.json');
- setLottieAnimatiion('start-line', 'asset/lottie/json/start_line.json');
- setLottieAnimatiion('end-line', 'asset/lottie/json/end_line.json');
+
+
+ $('#page-index').scroll(function () {
+ var startLine = $("#start-line").offset().top;
+ var endLine = $("#end-line").offset().top;
+
+ if (startLine >= $(window).scrollTop() && startLine < ($(window).scrollTop() + $(window).height())) {
+ if (!hasStartLineShow) {
+ if (animationMap['start-line']) {
+ animationMap['start-line'].goToAndPlay(0);
+ }
+ else {
+ setLottieAnimatiion('start-line', 'asset/lottie/json/start_line.json');
+ }
+
+ if (animationMap['paper-icon']) {
+ animationMap['paper-icon'].goToAndPlay(0);
+ }
+ else {
+ setLottieAnimatiion('paper-icon', 'asset/lottie/json/paper.json');
+ }
+ hasStartLineShow = true;
+ hasPaperShow = true;
+ }
+ }
+ else {
+ if (!hasStartLineShow) {
+ hasStartLineShow = false;
+ }
+ }
+
+ if (endLine <= 100) {
+ if (!hasEndLineShow) {
+ if (animationMap['end-line']) {
+ animationMap['end-line'].goToAndPlay(0);
+ }
+ else {
+ setLottieAnimatiion('end-line', 'asset/lottie/json/end_line.json');
+ }
+
+ hasEndLineShow = true;
+ }
+ }
+ else {
+ if (!hasEndLineShow) {
+ hasEndLineShow = false;
+ }
+ }
+ });
+
})()
section.normal#about-section
diff --git a/_scss/_pages.index.scss b/_scss/_pages.index.scss
index a17614f..611b220 100644
--- a/_scss/_pages.index.scss
+++ b/_scss/_pages.index.scss
@@ -329,7 +329,6 @@ body {
.features {
margin-top: 20px;
- margin-bottom: 50px;
text-align: center;
.title {
@@ -372,6 +371,7 @@ body {
.list-line {
width: 537px;
.list-item {
+ position: relative;
flex: auto;
height: 178px;
@@ -422,11 +422,10 @@ body {
border: none;
}
}
-
.list-item:hover {
- border: 1px solid #ECECEC;
box-shadow: 0 9px 12px 0 rgba(0,0,0,0.10);
}
+
}
.list-hr {
width: 1px;
@@ -501,9 +500,9 @@ body {
#start-line {
position: relative;
- left: 700px;
- top: 50px;
- width: 125px;
+ left: 548px;
+ top: 82px;
+ width: 200px;
}
#end-line {
@@ -525,6 +524,7 @@ body {
width: 528px;
h2 {
line-height: 36px;
+ font-weight: 600;
font-size: 25px;
color: #090909;
}
@@ -532,9 +532,7 @@ body {
.icon {
#paper-icon {
- top: -50px;
- width: 456px;
- height: 304px;
+ width: 530px;
}
}
}
@@ -744,10 +742,6 @@ body {
.features {
margin-bottom: 0;
-
- p {
- margin-bottom: 70px;
- }
}
#feature-section {
diff --git a/asset/lottie/json/bg.json b/asset/lottie/json/bg.json
deleted file mode 100644
index 5296d71..0000000
--- a/asset/lottie/json/bg.json
+++ /dev/null
@@ -1 +0,0 @@
-{"v":"5.7.3","fr":60,"ip":0,"op":75,"w":220,"h":200,"nm":"bg","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 63","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[110,100,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.417,0.417,0.333],"y":[0,0,0]},"t":1,"s":[0,0,100],"e":[125,125,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t" [...]
\ No newline at end of file
diff --git a/asset/lottie/json/bg_01.json b/asset/lottie/json/bg_01.json
new file mode 100644
index 0000000..6408d8a
--- /dev/null
+++ b/asset/lottie/json/bg_01.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":75,"w":220,"h":200,"nm":"bg","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 63","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0],"e":[100]},{"t":3}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[110,100,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.417,0.417,0.333],"y":[0,0,0]},"t":1,"s":[0,0,100],"e":[125,125,100]},{"i" [...]
\ No newline at end of file
diff --git a/asset/lottie/json/bg_02.json b/asset/lottie/json/bg_02.json
new file mode 100644
index 0000000..84c993b
--- /dev/null
+++ b/asset/lottie/json/bg_02.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":75,"w":220,"h":200,"nm":"bg","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 63","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0],"e":[100]},{"t":3}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[110,100,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.417,0.417,0.333],"y":[0,0,0]},"t":1,"s":[0,0,100],"e":[125,125,100]},{"i" [...]
\ No newline at end of file
diff --git a/asset/lottie/json/bg_03.json b/asset/lottie/json/bg_03.json
new file mode 100644
index 0000000..69693d0
--- /dev/null
+++ b/asset/lottie/json/bg_03.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":75,"w":220,"h":200,"nm":"bg","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 63","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0],"e":[100]},{"t":3}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[110,100,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.417,0.417,0.333],"y":[0,0,0]},"t":1,"s":[0,0,100],"e":[125,125,100]},{"i" [...]
\ No newline at end of file
diff --git a/asset/lottie/json/bg_04.json b/asset/lottie/json/bg_04.json
new file mode 100644
index 0000000..7979996
--- /dev/null
+++ b/asset/lottie/json/bg_04.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":75,"w":220,"h":200,"nm":"bg","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 63","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0],"e":[100]},{"t":3}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[110,100,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.417,0.417,0.333],"y":[0,0,0]},"t":1,"s":[0,0,100],"e":[125,125,100]},{"i" [...]
\ No newline at end of file
diff --git a/asset/lottie/json/bg_05.json b/asset/lottie/json/bg_05.json
new file mode 100644
index 0000000..5bb8a9a
--- /dev/null
+++ b/asset/lottie/json/bg_05.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":75,"w":220,"h":200,"nm":"bg","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 63","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0],"e":[100]},{"t":3}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[110,100,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.417,0.417,0.333],"y":[0,0,0]},"t":1,"s":[0,0,100],"e":[125,125,100]},{"i" [...]
\ No newline at end of file
diff --git a/asset/lottie/json/bg_06.json b/asset/lottie/json/bg_06.json
new file mode 100644
index 0000000..2ee9b43
--- /dev/null
+++ b/asset/lottie/json/bg_06.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":75,"w":220,"h":200,"nm":"bg","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 63","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0],"e":[100]},{"t":3}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[110,100,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.417,0.417,0.333],"y":[0,0,0]},"t":1,"s":[0,0,100],"e":[125,125,100]},{"i" [...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org