<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+GSAP 带镜像特效的飘渺灰烬动画场景</title>
<style>
@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i';
body,
html {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
background-color: black;
overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
position: relative;
float: left;
opacity: 0;
}
#c-container,
#c2-container {
width: 100vw;
height: 75vh;
position: absolute;
top: 0;
left: 0;
}
#c-container {
z-index: 2;
overflow: hidden;
}
#c2-container {
z-index: 1;
}
#c,
#c2 {
z-index: 0;
}
#dark-overlay-container,
#blue-overlay-container {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 1;
}
#dark-overlay {
width: 250vw;
height: 135vh;
position: absolute;
top: 0;
left: -75vw;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+30,1+50 */
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
/* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
#blue-overlay {
width: 100%;
height: 25vh;
position: absolute;
bottom: 0;
left: 0;
opacity: 0.75;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#033768+0,0f72cf+100&0.8+0,0.8+100 */
background: -moz-linear-gradient(top, rgba(3, 55, 104, 0.8) 0%, rgba(15, 114, 207, 0.8) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(3, 55, 104, 0.8) 0%, rgba(15, 114, 207, 0.8) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(3, 55, 104, 0.8) 0%, rgba(15, 114, 207, 0.8) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#cc033768', endColorstr='#cc0f72cf', GradientType=0);
/* IE6-9 */
}
#c-stars,
#c-stars2 {
z-index: 2;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#galaxy {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 10;
background-image: url(../images/galaxy2.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<div id="container">
<div id="c-container">
<div id="dark-overlay-container">
<div id="dark-overlay"></div>
</div>
<canvas id="c-stars">Sorry.</canvas>
<canvas id="c">Sorry.</canvas>
</div>
<div id="c2-container">
<div id="blue-overlay-container">
<div id="blue-overlay"></div>
</div>
<canvas id="c2-stars">Sorry.</canvas>
<canvas id="c2">Sorry.</canvas>
</div>
</div>
<script src="js/TimelineMax.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script>
$(window).bind('load', function() {
const raf = function(entry) {
window.requestAnimationFrame(entry);
};
const random = function(min, max) {
max = max + 1;
return Math.floor(Math.random() * (max - min) + min);
}
var container = $('#container'),
cContainer = $('#c-container'),
c2Container = $('#c2-container'),
darkOverlay = $('#dark-overlay'),
c = document.getElementById('c'),
cStars = document.getElementById('c-stars'),
c2 = document.getElementById('c2'),
c2Stars = document.getElementById('c2-stars'),
mainStarsContext = cStars.getContext('2d'),
mainContext = c.getContext('2d'),
altStarsContext = c2Stars.getContext('2d'),
altContext = c2.getContext('2d'),
mainStar,
mainParticle,
altStar,
altParticle,
mainStarsCanvas = cStars,
mainCanvas = c,
altStarsCanvas = c2Stars,
altCanvas = c2,
mainStarsCanvasFunction,
mainCanvasFunction,
altStarsCanvasFunction,
altCanvasFunction,
particleIndex = 0,
particles = {},
particleNum = 5,
mainStarW,
mainW,
altStarW,
altW,
mainStarH,
mainH,
altStarH,
altH,
mouseX = null,
mouseXOld,
mouseY = null,
mouseYOld,
pageResized = false,
color1 = 'rgba(4,13,44,1)',
color2 = 'rgba(76,36,157,1)',
particlesLoaded = false;
TweenMax.set(container, {
opacity: 1
});
TweenMax.set(c2Container, {
transformOrigin: 'center bottom',
scaleY: -1
});
TweenMax.set(c2, {
filter: 'blur(10px)',
opacity: 1
});
TweenMax.set(c2Stars, {
filter: 'blur(4px)',
opacity: 1
});
mainStarsCanvas.width = $('#c-stars').outerWidth();
mainCanvas.width = $('#c').outerWidth();
mainStarsCanvas.height = $('#c-stars').outerHeight();
mainCanvas.height = $('#c').outerHeight();
altStarsCanvas.width = $('#c2-stars').outerWidth();
altCanvas.width = $('#c2').outerWidth();
altStarsCanvas.height = $('#c2-stars').outerHeight();
altCanvas.height = $('#c2').outerHeight();
mainStarsW = mainStarsCanvas.width;
mainW = mainCanvas.width;
mainStarsH = mainStarsCanvas.height;
mainH = mainCanvas.height;
altStarsW = altStarsCanvas.width;
altW = altCanvas.width;
altStarsH = altStarsCanvas.height;
altH = altCanvas.height;
//INITIAL STARS CANVAS DRAW
mainStarsContext.fillStyle = 'rgba(0,0,0,1)';
mainStarsContext.fillRect(0, 0, mainStarsCanvas.width, mainStarsCanvas.height);
//INITIAL CANVAS DRAW
mainContext.fillStyle = 'rgba(10,10,0,1)';
mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
//ALT STARS CANVAS DRAW
altStarsContext.fillStyle = 'rgba(10,10,0,1)';
altStarsContext.fillRect(0, 0, altStarsCanvas.width, altStarsCanvas.height);
//ALT CANVAS DRAW
altContext.fillStyle = 'rgba(10,10,0,1)';
altContext.fillRect(0, 0, altCanvas.width, altCanvas.height);
function starFactory(thisCanvas, thisContext, thisStarName, thisCanvasFunction) {
var starIndex = 0,
cx = thisContext,
Star,
canvasFunction = thisCanvasFunction,
stars = {},
starNum = 2,
c = thisCanvas,
cw = thisCanvas.width,
ch = thisCanvas.height,
starsLoaded = false;
Star = function() {
this.r = random(0.5, 1.5);