送给俞诗韩的圣诞树🎄 ---by 进进
+ + + + + + + + + diff --git a/dist/script.js b/dist/script.js new file mode 100644 index 0000000..7821f2f --- /dev/null +++ b/dist/script.js @@ -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); diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..91102fa --- /dev/null +++ b/dist/style.css @@ -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; +}