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/10/26 05:36:26 UTC
[incubator-echarts-www] branch next updated: feat: add 5.0 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 117aa6c feat: add 5.0 home page animation
new 6a0ba7d Merge pull request #15 from zhanfang/next
117aa6c is described below
commit 117aa6c5a11a6e49ae2958398946952e5b8cd501
Author: zhanfang <fz...@gmail.com>
AuthorDate: Wed Oct 21 21:01:12 2020 +0800
feat: add 5.0 home page animation
---
_jade/zh/index.jade | 84 ++++++++++++++++---------------------
_scss/_pages.index.scss | 57 +++++++++++++++++--------
asset/lottie/js/lottie.min.js | 16 ++++++-
asset/lottie/json/end_Line.json | 1 +
asset/lottie/json/images/img_0.png | Bin 0 -> 13403 bytes
asset/lottie/json/images/img_1.png | Bin 0 -> 3018 bytes
asset/lottie/json/images/img_2.png | Bin 0 -> 10336 bytes
asset/lottie/json/images/img_3.png | Bin 0 -> 7371 bytes
asset/lottie/json/paper.json | 1 +
asset/lottie/json/start_line.json | 1 +
10 files changed, 94 insertions(+), 66 deletions(-)
diff --git a/_jade/zh/index.jade b/_jade/zh/index.jade
index 76d7b27..1973858 100644
--- a/_jade/zh/index.jade
+++ b/_jade/zh/index.jade
@@ -112,61 +112,49 @@ block content
p 细致且多样的样式与主题设计，一切都只为更好地展现你的数据
script(type='text/javascript').
- (function () {
- lottie.loadAnimation({
- container: document.getElementById('icon-1'), // the dom element that will contain the animation
- renderer: 'svg',
- loop: false,
- autoplay: true,
- path: 'asset/lottie/json/chart.json' // the path to the animation json
- });
- lottie.loadAnimation({
- container: document.getElementById('icon-2'), // the dom element that will contain the animation
- renderer: 'svg',
- loop: false,
- autoplay: true,
- path: 'asset/lottie/json/simple.json' // the path to the animation json
- });
- lottie.loadAnimation({
- container: document.getElementById('icon-3'), // the dom element that will contain the animation
- renderer: 'svg',
- loop: false,
- autoplay: true,
- path: 'asset/lottie/json/fly.json' // the path to the animation json
- });
- lottie.loadAnimation({
- container: document.getElementById('icon-4'), // the dom element that will contain the animation
+ var animationMap = {};
+ function setLottieAnimatiion(id, path) {
+ var container = document.getElementById(id);
+ animationMap[id] = lottie.loadAnimation({
+ container, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: true,
- path: 'asset/lottie/json/analysis.json' // the path to the animation json
+ path, // the path to the animation json
});
- lottie.loadAnimation({
- container: document.getElementById('icon-5'), // the dom element that will contain the animation
- renderer: 'svg',
- loop: false,
- autoplay: true,
- path: 'asset/lottie/json/compatible.json' // the path to the animation json
- });
- lottie.loadAnimation({
- container: document.getElementById('icon-6'), // the dom element that will contain the animation
- renderer: 'svg',
- loop: false,
- autoplay: true,
- path: 'asset/lottie/json/grown.json' // the path to the animation json
- });
- })()
+ }
+ setLottieAnimatiion('icon-1', 'asset/lottie/json/chart.json');
+ setLottieAnimatiion('icon-2', 'asset/lottie/json/simple.json');
+ setLottieAnimatiion('icon-3', 'asset/lottie/json/fly.json');
+ setLottieAnimatiion('icon-4', 'asset/lottie/json/analysis.json');
+ setLottieAnimatiion('icon-5', 'asset/lottie/json/compatible.json');
+ setLottieAnimatiion('icon-6', 'asset/lottie/json/grown.json');
+
+ $('.list-item').mouseenter(function(el) {
+ var id = $(this).find('.feature-icon-panel')[0].id;
+ console.error(id, animationMap[id]);
+ animationMap[id].goToAndPlay(0);
+ });
section#publication
.container
- .content
- h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
- p.note Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.
- p.link Visual Informatics, 2018
- a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf") [PDF]
- .icon
- .img-container
- img.lazy(data-src="#{cdnPayRoot}/#{ecWWWLang}/images/pipeline.jpg?_v_=#{cdnPayVersion}", alt="")
+ #start-line
+ .paper
+ .content
+ h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
+ p.note Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.
+ p.link Visual Informatics, 2018
+ a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf") [PDF]
+ .icon
+ #paper-icon
+ #end-line
+
+ script(type='text/javascript').
+ (function () {
+ 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');
+ })()
section.normal#about-section
.container
diff --git a/_scss/_pages.index.scss b/_scss/_pages.index.scss
index bb2bedd..989e1c1 100644
--- a/_scss/_pages.index.scss
+++ b/_scss/_pages.index.scss
@@ -343,7 +343,7 @@ body {
.features {
margin-top: 20px;
- margin-bottom: 90px;
+ margin-bottom: 50px;
text-align: center;
.title {
@@ -503,20 +503,49 @@ body {
}
#publication {
- margin-top: 50px;
+
+ #start-line {
+ position: relative;
+ left: 700px;
+ top: 50px;
+ width: 125px;
+ }
+
+ #end-line {
+ position: relative;
+ left: 1045px;
+ top: -84px;
+ width: 257px;
+ }
.container {
- display: flex;
- width: 1300px;
+ width: 1195px;
max-width: 1440px;
- h2 {
- width: 528px;
- margin-top: 10px;
- font-weight: bold;
- line-height: 36px;
- font-size: 25px;
- color: #090909;
+
+ .paper {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ .content {
+ width: 528px;
+ h2 {
+ font-weight: bold;
+ line-height: 36px;
+ font-size: 25px;
+ color: #090909;
+ }
+ }
+
+ .icon {
+ #paper-icon {
+ top: -50px;
+ width: 456px;
+ height: 304px;
+ }
+ }
}
+
+
}
p.note {
// font-size: 12px;
@@ -532,12 +561,6 @@ body {
margin-left: 10px;
}
}
-
- .img-container {
- padding: 50px 10px;
- background-color: #fff;
- box-shadow: 3px 3px 11px #ccc;
- }
}
#about-section {
diff --git a/asset/lottie/js/lottie.min.js b/asset/lottie/js/lottie.min.js
index d5b4d2d..3da1dc7 100644
--- a/asset/lottie/js/lottie.min.js
+++ b/asset/lottie/js/lottie.min.js
@@ -1 +1,15 @@
-var a,b;"undefined"!=typeof navigator&&(a=window||{},b=function(window){"use strict";var svgNS="http://www.w3.org/2000/svg",locationHref="",initialDefaultFrame=-999999,subframeEnabled=!0,expressionsPlugin,isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),cachedColors={},bm_rounder=Math.round,bm_rnd,bm_pow=Math.pow,bm_sqrt=Math.sqrt,bm_abs=Math.abs,bm_floor=Math.floor,bm_max=Math.max,bm_min=Math.min,blitter=10,BMMath={};function ProjectInterface(){return{}}!function(){va [...]
\ No newline at end of file
+(typeof navigator !== "undefined") && (function(root, factory) {
+ if (typeof define === "function" && define.amd) {
+ define(function() {
+ return factory(root);
+ });
+ } else if (typeof module === "object" && module.exports) {
+ module.exports = factory(root);
+ } else {
+ root.lottie = factory(root);
+ root.bodymovin = root.lottie;
+ }
+}((window || {}), function(window) {
+ "use strict";var svgNS="http://www.w3.org/2000/svg",locationHref="",initialDefaultFrame=-999999,subframeEnabled=!0,expressionsPlugin,isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),cachedColors={},bm_rounder=Math.round,bm_rnd,bm_pow=Math.pow,bm_sqrt=Math.sqrt,bm_abs=Math.abs,bm_floor=Math.floor,bm_max=Math.max,bm_min=Math.min,blitter=10,BMMath={};function ProjectInterface(){return{}}!function(){var t,e=["abs","acos","acosh","asin","asinh","atan","atanh","atan2","ceil [...]
+return lottie;
+}));
\ No newline at end of file
diff --git a/asset/lottie/json/end_Line.json b/asset/lottie/json/end_Line.json
new file mode 100644
index 0000000..ec83a10
--- /dev/null
+++ b/asset/lottie/json/end_Line.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":50,"w":600,"h":580,"nm":"end_line","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[280,300,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-45.826,14.943],[-41.336,-40.571],[42.809,-29.966],[-77.92,19.48],[-58.276,-70.977],[-14.605,-9 [...]
\ No newline at end of file
diff --git a/asset/lottie/json/images/img_0.png b/asset/lottie/json/images/img_0.png
new file mode 100644
index 0000000..76cda7d
Binary files /dev/null and b/asset/lottie/json/images/img_0.png differ
diff --git a/asset/lottie/json/images/img_1.png b/asset/lottie/json/images/img_1.png
new file mode 100644
index 0000000..fed01da
Binary files /dev/null and b/asset/lottie/json/images/img_1.png differ
diff --git a/asset/lottie/json/images/img_2.png b/asset/lottie/json/images/img_2.png
new file mode 100644
index 0000000..a9d31d9
Binary files /dev/null and b/asset/lottie/json/images/img_2.png differ
diff --git a/asset/lottie/json/images/img_3.png b/asset/lottie/json/images/img_3.png
new file mode 100644
index 0000000..d70676d
Binary files /dev/null and b/asset/lottie/json/images/img_3.png differ
diff --git a/asset/lottie/json/paper.json b/asset/lottie/json/paper.json
new file mode 100644
index 0000000..ac9fb5d
--- /dev/null
+++ b/asset/lottie/json/paper.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":120,"w":1150,"h":850,"nm":"Comp 1","ddd":0,"assets":[{"id":"image_0","w":646,"h":314,"u":"images/","p":"img_0.png","e":0},{"id":"image_1","w":100,"h":92,"u":"images/","p":"img_1.png","e":0},{"id":"image_2","w":284,"h":222,"u":"images/","p":"img_2.png","e":0},{"id":"image_3","w":646,"h":432,"u":"images/","p":"img_3.png","e":0},{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"text","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0," [...]
\ No newline at end of file
diff --git a/asset/lottie/json/start_line.json b/asset/lottie/json/start_line.json
new file mode 100644
index 0000000..76bc662
--- /dev/null
+++ b/asset/lottie/json/start_line.json
@@ -0,0 +1 @@
+{"v":"5.7.3","fr":60,"ip":0,"op":50,"w":350,"h":250,"nm":"start_line","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":2,"s":[143,49,0],"e":[228,146,0],"to":[14.167,16.167,0],"ti":[-14.167,-16.167,0]},{"t":41}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty [...]
\ 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