Skip to content
Permalink
Browse files
add play button
  • Loading branch information
pissang committed Jan 24, 2022
1 parent f23e1ee commit aa671d821f5de7b4409cabd1880fe221b493b9ca
Showing 5 changed files with 117 additions and 57 deletions.

This file was deleted.

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -28,13 +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-feature-trailer
.home-feature-trailer-cover
//- img(src="#{cdnPayRoot}/#{ecWWWLang}/images/index-home-pie.png?_v_=#{cdnPayVersion}")
.home-landing-animation
.home-landing-animation-cover
include ../components/svg/entry-pie.svg
#home-feature-trailer-container
#home-feature-trailer-viewport
#home-feature-trailer-close-btn
#play-landing-animation
include ../components/svg/play.svg
#home-landing-animation-container
#home-landing-animation-viewport
#home-landing-animation-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>
@@ -15,7 +15,15 @@ body {
width: 100%;
background-color: #fff;
}

@keyframes fx-plyr-play-button {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5)
}
to {
opacity: 0
}
}
#main-content {
overflow: hidden;
color: $clr-text;
@@ -108,16 +116,6 @@ body {
opacity: 1;
}

svg {
width: 700px;
height: 700px;
max-width: 100%;
max-height: 100%;

path {
vector-effect: non-scaling-stroke;
}
}
}

.index-home-svg {
@@ -126,23 +124,23 @@ body {
left: -6px;
}

.home-feature-trailer {
.home-landing-animation {

}

#home-feature-trailer-container {
#home-landing-animation-container {
position: fixed;
width: 100%;
bottom: 0;
top: 0;
left: 0;
display: none;
}
#home-feature-trailer-viewport {
#home-landing-animation-viewport {
width: 100%;
height: 100%;
}
#home-feature-trailer-close-btn {
#home-landing-animation-close-btn {
position: absolute;
right: 20px;
top: 15px;
@@ -151,18 +149,55 @@ body {
cursor: pointer;
}

.home-feature-trailer-cover {
.home-landing-animation-cover {
height: 60%;
top: 16%;
position: absolute;
right: 50px;
z-index: -100;

svg {
width: 700px;
height: 700px;
max-width: 100%;
max-height: 100%;
position: relative;
z-index: -100;
}

#play-landing-animation {
position: absolute;
left: 50%;
top: 50%;

width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
border-radius: 100%;

color: $clr-text;

cursor: pointer;
z-index: 100;
transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) transform;

&:hover {
transform: scale(1.2);
}

&:before {
animation: fx-plyr-play-button 1.5s ease-out infinite;
border: 4px solid $clr-text;
border-radius: 150%;
box-shadow: 0 0 10px $clr-text;
box-sizing: border-box;
content: "";
height: 120%;
left: -10%;
position: absolute;
top: -10%;
width: 120%;
}
}
}
#new-version-section {
@@ -221,11 +256,11 @@ body {
#page-index {
overflow: hidden;
}
#home-feature-trailer-container {
#home-landing-animation-container {
display: block;
}

.home-feature-trailer-cover {
.home-landing-animation-cover {
display: none;
}
.navbar-default {
@@ -621,6 +656,7 @@ body {
}
}


.single-btn-panel {
text-align: center;
}
@@ -644,6 +680,11 @@ body {
}

@media (max-width: 768px) {

#play-landing-animation {
display: none;
}

#main-content {
.home-brand {
font-size: 48px;
@@ -120,10 +120,44 @@ window.lazyLoadOptions = {

var isInited = false;

function loadLandingAnimationScripts() {
return new Promise((resolve) => {
var indexAnimationURL = 'http://localhost/echarts-www-landing-animation/'
// 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) {
resolve();
}
}

script.onload = onload;
link.onload = onload;

link.href = indexAnimationURL + 'dist/style.css';
script.src = indexAnimationURL + 'dist/echarts-www-landing-animation.js';
document.head.appendChild(link);
document.head.appendChild(script);
});
}

var landingAnimationPromise;
setTimeout(() => {
// Auto load script after 3 seconds.
landingAnimationPromise = loadLandingAnimationScripts();
}, 3000);

// Index animation
window.startMagic = function () {
function start() {
var svgBoundingRect = document.querySelector('.home-feature-trailer-cover svg').getBoundingClientRect();
var svgBoundingRect = document.querySelector('.home-landing-animation-cover svg').getBoundingClientRect();
var rect = {
left: svgBoundingRect.left,
top: svgBoundingRect.top,
@@ -134,16 +168,16 @@ window.lazyLoadOptions = {
// Get rect before hiding.
$('#main').addClass('cinematic-mode');

document.getElementById('home-feature-trailer-close-btn').onclick = function () {
featureTrailer.pause();
document.getElementById('home-landing-animation-close-btn').onclick = function () {
landingAnimation.pause();
$('#main').removeClass('cinematic-mode');
}

if (isInited) {
featureTrailer.resume();
landingAnimation.resume();
}
else {
featureTrailer.init(document.getElementById('home-feature-trailer-viewport'), {
landingAnimation.init(document.getElementById('home-landing-animation-viewport'), {
initialPieLayout: rect,
initialPieAnimation: false,
updateURLHash: false
@@ -152,33 +186,18 @@ window.lazyLoadOptions = {
}
}

if (typeof featureTrailer !== 'undefined') {
if (typeof landingAnimation !== '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();
}
if (!landingAnimationPromise) {
landingAnimationPromise = loadLandingAnimationScripts();
}

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);
landingAnimationPromise.then(function () {
start();
});
}

document.getElementById('play-landing-animation').onclick = startMagic;
})();

0 comments on commit aa671d8

Please sign in to comment.