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 2021/09/23 03:37:15 UTC
[echarts-www] 01/01: integrate feature trailer animation
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch add-index-animation
in repository https://gitbox.apache.org/repos/asf/echarts-www.git
commit d706597298e181d7f036b234a9e940d6370e57eb
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Sep 23 11:13:26 2021 +0800
integrate feature trailer animation
---
_jade/components/svg/close.svg | 3 +
_jade/zh/index.jade | 10 +-
_scss/_components.nav.scss | 5 +
_scss/_pages.index.scss | 303 ++++++++++++++++++++++++++---------------
js/index.js | 51 +++++++
package.json | 6 +-
6 files changed, 264 insertions(+), 114 deletions(-)
diff --git a/_jade/components/svg/close.svg b/_jade/components/svg/close.svg
new file mode 100644
index 0000000..92a6adc
--- /dev/null
+++ b/_jade/components/svg/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+</svg>
\ No newline at end of file
diff --git a/_jade/zh/index.jade b/_jade/zh/index.jade
index 66b8086..7247a24 100644
--- a/_jade/zh/index.jade
+++ b/_jade/zh/index.jade
@@ -28,8 +28,14 @@ block content
a.btn.btn-main.btn-index-home.btn-index-github(href='https://github.com/apache/echarts', target='_blank')
include ../components/svg/github
+svgGithub('#081642')
- .home-chart
- img(src="#{cdnPayRoot}/#{ecWWWLang}/images/index-home-pie.png?_v_=#{cdnPayVersion}")
+ .home-feature-trailer
+ .home-feature-trailer-cover
+ img(src="#{cdnPayRoot}/#{ecWWWLang}/images/index-home-pie.png?_v_=#{cdnPayVersion}")
+ #home-feature-trailer-container
+ #home-feature-trailer-viewport
+ #home-feature-trailer-close-btn
+ include ../components/svg/close.svg
+
section#new-version-section 📣 Apache ECharts 5.2 发布了! 查看<a href='#{host}/handbook/#{ecWWWLang}/basics/release-note/5-2-0?ref=banner' target='_blank'>新特性</a>
diff --git a/_scss/_components.nav.scss b/_scss/_components.nav.scss
index c7cc05b..3d26024 100644
--- a/_scss/_components.nav.scss
+++ b/_scss/_components.nav.scss
@@ -9,6 +9,11 @@ $collapse-break-point: 768px;
height: 50px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+ .navbar-header {
+ position: relative;
+ z-index: 10001;
+ }
+
.navbar-nav {
transition: background-color 0.5s linear;
}
diff --git a/_scss/_pages.index.scss b/_scss/_pages.index.scss
index e073202..f62d48f 100644
--- a/_scss/_pages.index.scss
+++ b/_scss/_pages.index.scss
@@ -24,10 +24,10 @@ body {
color: $clr-link;
}
- .more {
- text-align: center;
- display: block;
- }
+ .more {
+ text-align: center;
+ display: block;
+ }
footer {
font-weight: 400 !important;
@@ -50,83 +50,106 @@ body {
position: relative;
}
- .home-info {
- margin-top: 20vh;
- }
+ .home-info {
+ margin-top: 20vh;
+ }
- .home-brand {
- font-size: 75px;
- font-weight: 800;
- color: $clr-dark;
- line-height: 1.2em;
- }
+ .home-brand {
+ font-size: 75px;
+ font-weight: 800;
+ color: $clr-dark;
+ line-height: 1.2em;
+ }
- .home-subtitle {
- font-size: 21px;
- color: $clr-dark-light;
- margin-top: 15px;
- }
+ .home-subtitle {
+ font-size: 21px;
+ color: $clr-dark-light;
+ margin-top: 15px;
+ }
- .home-btn-panel {
- margin-top: 40px;
- }
+ .home-btn-panel {
+ margin-top: 40px;
+ }
- .btn-index-home {
- min-width: 150px;
- padding: 15px 10px;
- border-radius: 30px;
- background-color: #fff;
- border: 1px solid $clr-contrast;
- color: $clr-contrast;
- opacity: 0.8;
- font-size: 16px;
-
- &:first-child {
- background-color: $clr-contrast;
- color: #fff;
- opacity: 1;
-
- .index-home-svg {
- left: -3px;
- top: 3px;
- }
- }
-
- &:hover, &:focus {
- box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2);
- }
- }
+ .btn-index-home {
+ min-width: 150px;
+ padding: 15px 10px;
+ border-radius: 30px;
+ background-color: #fff;
+ border: 1px solid $clr-contrast;
+ color: $clr-contrast;
+ opacity: 0.8;
+ font-size: 16px;
- .btn-index-github {
- min-width: 56px;
- height: 56px;
- background: transparent;
- border: none;
- opacity: 0.5;
+ &:first-child {
+ background-color: $clr-contrast;
+ color: #fff;
+ opacity: 1;
- &:hover {
- opacity: 1;
- }
- }
+ .index-home-svg {
+ left: -3px;
+ top: 3px;
+ }
+ }
- .index-home-svg {
- position: relative;
- top: 4px;
- left: -6px;
- }
+ &:hover, &:focus {
+ box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2);
+ }
+ }
- .home-chart {
- height: 60%;
- top: 16%;
- position: absolute;
- right: 50px;
- z-index: -100;
+ .btn-index-github {
+ min-width: 56px;
+ height: 56px;
+ background: transparent;
+ border: none;
+ opacity: 0.5;
- img {
- max-height: 100%;
- }
+ &:hover {
+ opacity: 1;
}
+ }
+
+ .index-home-svg {
+ position: relative;
+ top: 4px;
+ left: -6px;
+ }
+ .home-feature-trailer {
+
+ }
+
+ #home-feature-trailer-container {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ top: 0;
+ left: 0;
+ display: none;
+ }
+ #home-feature-trailer-viewport {
+ width: 100%;
+ height: 100%;
+ }
+ #home-feature-trailer-close-btn {
+ position: absolute;
+ right: 20px;
+ top: 15px;
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+ }
+
+ .home-feature-trailer-cover {
+ height: 60%;
+ top: 16%;
+ position: absolute;
+ right: 50px;
+ z-index: -100;
+ img {
+ max-height: 100%;
+ }
+ }
#new-version-section {
text-align: center;
font-size: 16px;
@@ -175,6 +198,68 @@ body {
padding-bottom: 165px;
text-align: center;
}
+
+}
+
+#main.cinematic-mode {
+
+ #page-index {
+ overflow: hidden;
+ }
+ #home-feature-trailer-container {
+ display: block;
+ }
+
+ .home-feature-trailer-cover {
+ display: none;
+ }
+ .navbar-default {
+ background-color: rgba(255,255,255,0.5);
+ backdrop-filter: blur(5px);
+ width: 160px;
+ margin: 10px;
+ border-radius: 5px;
+ overflow: hidden;
+ transition: 200ms linear all;
+ box-shadow: none;
+
+ .container-fluid {
+ padding-left: 10px;
+ padding-right: 0;
+ }
+
+ .navbar-brand {
+ img {
+ max-width: initial;
+ }
+ }
+ }
+ #navbar-collapse {
+ background-color: transparent;
+ }
+
+ .home-info {
+ position: fixed;
+ top: 60px;
+ left: 10px;
+ height: 30px;
+ transition: 500ms linear all;
+ margin-top: 0;
+ display: none;
+
+ .home-brand {
+ font-size: 20px;
+ }
+
+ .home-btn-panel, .home-subtitle {
+ opacity: 0;
+ transition: 500ms linear opacity;
+ }
+ }
+
+ #new-version-section {
+ display: none;
+ }
}
#reference {
@@ -274,52 +359,52 @@ body {
}
}
- .index-features {
- margin-top: 20px;
- text-align: center;
- color: $clr-text;
+.index-features {
+ margin-top: 20px;
+ text-align: center;
+ color: $clr-text;
- h2 {
- font-size: 35px;
- font-weight: 800;
- color: #090909;
- }
+ h2 {
+ font-size: 35px;
+ font-weight: 800;
+ color: #090909;
}
+}
- .index-feature {
- margin: 30px 0;
- }
+.index-feature {
+ margin: 30px 0;
+}
- .index-feature-left {
- display: inline-block;
- position: absolute;
- width: 107px;
- height: 99px;
- }
+.index-feature-left {
+ display: inline-block;
+ position: absolute;
+ width: 107px;
+ height: 99px;
+}
- .index-feature-icon {
- position: absolute;
- width: 50%;
- left: 28%;
- top: 22.5%;
- }
+.index-feature-icon {
+ position: absolute;
+ width: 50%;
+ left: 28%;
+ top: 22.5%;
+}
- .index-feature-right {
- display: inline-block;
- margin-left: 127px;
+.index-feature-right {
+ display: inline-block;
+ margin-left: 127px;
- h3 {
- margin-top: 10px;
- font-size: 16px;
- font-weight: bold;
- color: $clr-darker;
- }
+ h3 {
+ margin-top: 10px;
+ font-size: 16px;
+ font-weight: bold;
+ color: $clr-darker;
+ }
- p {
- margin-top: 14px;
- line-height: 1.75em;
- }
- }
+ p {
+ margin-top: 14px;
+ line-height: 1.75em;
+ }
+}
#publication {
overflow: hidden;
@@ -364,8 +449,6 @@ body {
}
}
}
-
-
}
p.note {
// font-size: 12px;
diff --git a/js/index.js b/js/index.js
index 419afb8..f4f747e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -117,4 +117,55 @@ window.lazyLoadOptions = {
}
});
}
+
+ var isInited = false;
+
+ // Index animation
+ window.startMagic = function () {
+ function start() {
+ $('#main').addClass('cinematic-mode');
+
+ document.getElementById('home-feature-trailer-close-btn').onclick = function () {
+ featureTrailer.pause();
+ $('#main').removeClass('cinematic-mode');
+ }
+
+ if (isInited) {
+ featureTrailer.resume();
+ }
+ else {
+ featureTrailer.init(document.getElementById('home-feature-trailer-viewport'))
+ isInited = true;
+ }
+ }
+
+ if (typeof featureTrailer !== 'undefined') {
+ start();
+ return;
+ }
+
+ var indexAnimationURL = 'http://localhost/echarts-www-feature-trailer/'
+ // Load script.
+ var link = document.createElement('link');
+ var script = document.createElement('script');
+ link.setAttribute('rel', 'stylesheet');
+ link.setAttribute('type', 'text/css');
+
+ var loading = 2;
+
+ function onload() {
+ loading--;
+ if (!loading) {
+ start();
+ }
+ }
+
+ script.onload = onload;
+ link.onload = onload;
+
+ link.href = indexAnimationURL + 'dist/style.css';
+ script.src = indexAnimationURL + 'dist/echarts-www-feature-trailer.js';
+ document.head.appendChild(link);
+ document.head.appendChild(script);
+ }
})();
diff --git a/package.json b/package.json
index 13057f7..a1723fc 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,12 @@
"dev": "node bin/build.js --env=localsite",
"jade": "node bin/build.js --env=localsite --filter=jade",
"sass": "node bin/build.js --env=localsite --filter=sass",
- "watch": "npm run watch:jade & npm run watch:sass",
+ "js": "node bin/build.js --env=localsite --filter=js",
+ "watch": "npm run watch:jade & npm run watch:sass & npm run watch:js",
"create:page": "node bin/createPage.js",
"watch:jade": "onchange '_jade/**/*' -- node bin/build.js --env=localsite --filter=jade --jade={{changed}}",
- "watch:sass": "onchange '_scss/**/*' -- npm run sass"
+ "watch:sass": "onchange '_scss/**/*' -- npm run sass",
+ "watch:js": "onchange 'js/*.js' -- npm run js"
},
"devDependencies": {
"@babel/core": "7.0.0-beta.31",
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org