commit
This commit is contained in:
Ruin
169
dist/index.html
vendored
Normal file
169
dist/index.html
vendored
Normal file
File diff suppressed because one or more lines are too long
229
dist/script.js
vendored
Normal file
229
dist/script.js
vendored
Normal file
@@ -0,0 +1,229 @@
|
||||
MorphSVGPlugin.convertToPath("polygon");
|
||||
var xmlns = "http://www.w3.org/2000/svg",
|
||||
xlinkns = "http://www.w3.org/1999/xlink",
|
||||
select = function (s) {
|
||||
return document.querySelector(s);
|
||||
},
|
||||
selectAll = function (s) {
|
||||
return document.querySelectorAll(s);
|
||||
},
|
||||
pContainer = select(".pContainer"),
|
||||
mainSVG = select(".mainSVG"),
|
||||
star = select("#star"),
|
||||
sparkle = select(".sparkle"),
|
||||
tree = select("#tree"),
|
||||
showParticle = true,
|
||||
particleColorArray = [
|
||||
"#E8F6F8",
|
||||
"#ACE8F8",
|
||||
"#F6FBFE",
|
||||
"#A2CBDC",
|
||||
"#B74551",
|
||||
"#5DBA72",
|
||||
"#910B28",
|
||||
"#910B28",
|
||||
"#446D39",
|
||||
],
|
||||
particleTypeArray = ["#star", "#circ", "#cross", "#heart"],
|
||||
// particleTypeArray = ['#star'],
|
||||
particlePool = [],
|
||||
particleCount = 0,
|
||||
numParticles = 201;
|
||||
|
||||
gsap.set("svg", {
|
||||
visibility: "visible",
|
||||
});
|
||||
|
||||
gsap.set(sparkle, {
|
||||
transformOrigin: "50% 50%",
|
||||
y: -100,
|
||||
});
|
||||
|
||||
let getSVGPoints = (path) => {
|
||||
let arr = [];
|
||||
var rawPath = MotionPathPlugin.getRawPath(path)[0];
|
||||
rawPath.forEach((el, value) => {
|
||||
let obj = {};
|
||||
obj.x = rawPath[value * 2];
|
||||
obj.y = rawPath[value * 2 + 1];
|
||||
if (value % 2) {
|
||||
arr.push(obj);
|
||||
}
|
||||
//console.log(value)
|
||||
});
|
||||
|
||||
return arr;
|
||||
};
|
||||
let treePath = getSVGPoints(".treePath");
|
||||
|
||||
var treeBottomPath = getSVGPoints(".treeBottomPath");
|
||||
|
||||
var mainTl = gsap.timeline({ delay: 0, repeat: 0 }),
|
||||
starTl;
|
||||
|
||||
function flicker(p) {
|
||||
gsap.killTweensOf(p, { opacity: true });
|
||||
gsap.fromTo(
|
||||
p,
|
||||
{
|
||||
opacity: 1,
|
||||
},
|
||||
{
|
||||
duration: 0.07,
|
||||
opacity: Math.random(),
|
||||
repeat: -1,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function createParticles() {
|
||||
var i = numParticles,
|
||||
p,
|
||||
particleTl,
|
||||
step = numParticles / treePath.length,
|
||||
pos;
|
||||
while (--i > -1) {
|
||||
p = select(particleTypeArray[i % particleTypeArray.length]).cloneNode(true);
|
||||
mainSVG.appendChild(p);
|
||||
p.setAttribute("fill", particleColorArray[i % particleColorArray.length]);
|
||||
p.setAttribute("class", "particle");
|
||||
particlePool.push(p);
|
||||
//hide them initially
|
||||
gsap.set(p, {
|
||||
x: -100,
|
||||
y: -100,
|
||||
transformOrigin: "50% 50%",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var getScale = gsap.utils.random(0.5, 3, 0.001, true);
|
||||
|
||||
function playParticle(p) {
|
||||
if (!showParticle) {
|
||||
return;
|
||||
}
|
||||
var p = particlePool[particleCount];
|
||||
gsap.set(p, {
|
||||
x: gsap.getProperty(".pContainer", "x"),
|
||||
y: gsap.getProperty(".pContainer", "y"),
|
||||
scale: getScale(),
|
||||
});
|
||||
var tl = gsap.timeline();
|
||||
tl.to(p, {
|
||||
duration: gsap.utils.random(0.61, 6),
|
||||
physics2D: {
|
||||
velocity: gsap.utils.random(-23, 23),
|
||||
angle: gsap.utils.random(-180, 180),
|
||||
gravity: gsap.utils.random(-6, 50),
|
||||
},
|
||||
scale: 0,
|
||||
rotation: gsap.utils.random(-123, 360),
|
||||
ease: "power1",
|
||||
onStart: flicker,
|
||||
onStartParams: [p],
|
||||
onRepeat: (p) => {
|
||||
gsap.set(p, {
|
||||
scale: getScale(),
|
||||
});
|
||||
},
|
||||
onRepeatParams: [p],
|
||||
});
|
||||
|
||||
particleCount++;
|
||||
particleCount = particleCount >= numParticles ? 0 : particleCount;
|
||||
}
|
||||
|
||||
function drawStar() {
|
||||
starTl = gsap.timeline({ onUpdate: playParticle });
|
||||
starTl
|
||||
.to(".pContainer, .sparkle", {
|
||||
duration: 6,
|
||||
motionPath: {
|
||||
path: ".treePath",
|
||||
autoRotate: false,
|
||||
},
|
||||
ease: "linear",
|
||||
})
|
||||
.to(".pContainer, .sparkle", {
|
||||
duration: 1,
|
||||
onStart: function () {
|
||||
showParticle = false;
|
||||
},
|
||||
x: treeBottomPath[0].x,
|
||||
y: treeBottomPath[0].y,
|
||||
})
|
||||
.to(
|
||||
".pContainer, .sparkle",
|
||||
{
|
||||
duration: 2,
|
||||
onStart: function () {
|
||||
showParticle = true;
|
||||
},
|
||||
motionPath: {
|
||||
path: ".treeBottomPath",
|
||||
autoRotate: false,
|
||||
},
|
||||
ease: "linear",
|
||||
},
|
||||
"-=0"
|
||||
)
|
||||
.from(
|
||||
".treeBottomMask",
|
||||
{
|
||||
duration: 2,
|
||||
drawSVG: "0% 0%",
|
||||
stroke: "#FFF",
|
||||
ease: "linear",
|
||||
},
|
||||
"-=2"
|
||||
);
|
||||
}
|
||||
|
||||
createParticles();
|
||||
drawStar();
|
||||
|
||||
mainTl
|
||||
.from([".treePathMask", ".treePotMask"], {
|
||||
duration: 6,
|
||||
drawSVG: "0% 0%",
|
||||
stroke: "#FFF",
|
||||
stagger: {
|
||||
each: 6,
|
||||
},
|
||||
duration: gsap.utils.wrap([6, 1, 2]),
|
||||
ease: "linear",
|
||||
})
|
||||
.from(
|
||||
".treeStar",
|
||||
{
|
||||
duration: 3,
|
||||
scaleY: 0,
|
||||
scaleX: 0.15,
|
||||
transformOrigin: "50% 50%",
|
||||
ease: "elastic(1,0.5)",
|
||||
},
|
||||
"-=4"
|
||||
)
|
||||
|
||||
.to(
|
||||
".sparkle",
|
||||
{
|
||||
duration: 3,
|
||||
opacity: 0,
|
||||
ease: "rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})",
|
||||
},
|
||||
"-=0"
|
||||
)
|
||||
.to(
|
||||
".treeStarOutline",
|
||||
{
|
||||
duration: 1,
|
||||
opacity: 1,
|
||||
ease: "rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})",
|
||||
},
|
||||
"+=1"
|
||||
);
|
||||
|
||||
mainTl.add(starTl, 0);
|
||||
gsap.globalTimeline.timeScale(1.5);
|
||||
70
dist/style.css
vendored
Normal file
70
dist/style.css
vendored
Normal file
@@ -0,0 +1,70 @@
|
||||
body {
|
||||
background-color: #151522;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
/* mix-blend-mode:luminosity */
|
||||
}
|
||||
@keyframes wenzi {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes guangbiao {
|
||||
50% {
|
||||
/* 颜色透明 */
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
color: #fff;
|
||||
/* display: none; */
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, #eccc68),
|
||||
color-stop(0.15, #ff7f50),
|
||||
color-stop(0.3, #ff6b81),
|
||||
color-stop(0.45, #ffa502),
|
||||
color-stop(0.6, #ff6348),
|
||||
color-stop(0.75, #ff4757),
|
||||
color-stop(0.9, #7bed9f),
|
||||
color-stop(1, #70a1ff)
|
||||
);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-moz-background-clip: text;
|
||||
-ms-background-clip: text;
|
||||
|
||||
width: 17em;
|
||||
overflow: hidden;
|
||||
/* 规定段落中的文本不进行换行： */
|
||||
white-space: nowrap;
|
||||
font-size: 20px;
|
||||
border-right: 0em solid;
|
||||
/*帧动画 */
|
||||
animation: wenzi steps(17) 6s, guangbiao steps(1) 1s infinite;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
Reference in New Issue
Block a user