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:14 UTC
[echarts-www] branch add-index-animation created (now d706597)
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a change to branch add-index-animation
in repository https://gitbox.apache.org/repos/asf/echarts-www.git.
at d706597 integrate feature trailer animation
This branch includes the following new commits:
new d706597 integrate feature trailer animation
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-www] 01/01: integrate feature trailer animation
Posted by sh...@apache.org.
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