https://lingyuzhao.top/js/dynamicEdit.js

1const selectSVG = id => {
2    const el = document.getElementById(id);
3    return new SVGElement(el);
4};
5
6const createSVG = type => {
7    const el = document.createElementNS('http://www.w3.org/2000/svg', type);
8    return new SVGElement(el);
9};
10
11class SVGElement {
12    constructor(element) {
13        this.element = element;
14    }
15
16    set(attributeName, value) {
17        this.element.setAttribute(attributeName, value);
18    }
19
20    style(property, value) {
21        this.element.style[property] = value;
22    }
23}
24
25
26const colors = [
27    {main: '#FBDB4A', shades: ['#FAE073', '#FCE790', '#FADD65', '#E4C650']},
28    {main: '#F3934A', shades: ['#F7B989', '#F9CDAA', '#DD8644', '#F39C59']},
29    {main: '#EB547D', shades: ['#EE7293', '#F191AB', '#D64D72', '#C04567']},
30    {main: '#9F6AA7', shades: ['#B084B6', '#C19FC7', '#916198', '#82588A']},
31    {main: '#5476B3', shades: ['#6382B9', '#829BC7', '#4D6CA3', '#3E5782']},
32    {main: '#2BB19B', shades: ['#4DBFAD', '#73CDBF', '#27A18D', '#1F8171']},
33    {main: '#70B984', shades: ['#7FBE90', '#98CBA6', '#68A87A', '#5E976E']}];
34
35const svg = selectSVG('svg');
36const text = document.getElementById('text');
37const offscreenText = document.getElementById('offscreen-text');
38const input = document.getElementById('input');
39let width = window.innerWidth;
40let height = window.innerHeight;
41let textSize = 0;
42let textCenter = 0;
43const letters = [];
44const prompt = Global_Vars.getNoCheckStatus("LY_Utils.checkBackUrlIsCOOKIE_DOMAIN()") ? ['loading ', '♥~', '♥~♥~'] : ["welcome ", 'L', 'Y', ' 码本录 ', '~(^_^)~~'];
45let runPrompt = true;
46
47const resizePage = () => {
48    width = window.innerWidth;
49    height = window.innerHeight;
50    svg.set('height', height);
51    svg.set('width', width);
52    svg.set('viewBox', `0 0 ${width} ${height}`);
53    resizeLetters();
54};
55
56const resizeLetters = () => {
57    textSize = width / (letters.length + 2);
58    if (textSize > 100) textSize = 100;
59    text.style.fontSize = `${textSize}px`;
60    text.style.height = `${textSize}px`;
61    text.style.lineHeight = `${textSize}px`;
62    offscreenText.style.fontSize = `${textSize}px`;
63    const textRect = text.getBoundingClientRect();
64    textCenter = textRect.top + textRect.height / 2;
65    positionLetters();
66};
67
68const positionLetters = () => {
69    letters.forEach(letter => {
70        const timing = letter.shift ? 0.1 : 0;
71        TweenLite.to(letter.onScreen, timing, {x: letter.offScreen.offsetLeft + 'px', ease: Power3.easeInOut});
72        letter.shift = true;
73    });
74};
75
76const animateLetterIn = letter => {
77    const yOffset = (0.5 + Math.random() * 0.5) * textSize;
78    TweenLite.fromTo(letter, 0.4, {scale: 0}, {scale: 1, ease: Back.easeOut});
79    TweenLite.fromTo(letter, 0.4, {opacity: 0}, {opacity: 1, ease: Power3.easeOut});
80    TweenLite.to(letter, 0.2, {y: -yOffset, ease: Power3.easeInOut});
81    TweenLite.to(letter, 0.2, {y: 0, ease: Power3.easeInOut, delay: 0.2});
82    const rotation = -50 + Math.random() * 100;
83    TweenLite.to(letter, 0.2, {rotation: rotation, ease: Power3.easeInOut});
84    TweenLite.to(letter, 0.2, {rotation: 0, ease: Power3.easeInOut, delay: 0.2});
85};
86
87const addDecor = (letter, color) => {
88    setTimeout(() => {
89        var rect = letter.getBoundingClientRect();
90        const x0 = letter.offsetLeft + letter.offsetWidth / 2;
91        const y0 = textCenter - textSize * 0.5;
92        const shade = color.shades[Math.floor(Math.random() * 4)];
93        for (var i = 0; i < 8; i++) addTri(x0, y0, shade);
94        for (var i = 0; i < 8; i++) addCirc(x0, y0);
95    }, 150);
96};
97
98const addTri = (x0, y0, shade) => {
99    const tri = createSVG('polygon');
100    const a = Math.random();
101    const a2 = a + (-0.2 + Math.random() * 0.4);
102    const r = textSize * 0.52;
103    const r2 = r + textSize * Math.random() * 0.2;
104    const x = x0 + r * Math.cos(2 * Math.PI * a);
105    const y = y0 + r * Math.sin(2 * Math.PI * a);
106    const x2 = x0 + r2 * Math.cos(2 * Math.PI * a2);
107    const y2 = y0 + r2 * Math.sin(2 * Math.PI * a2);
108    const triSize = textSize * 0.1;
109    const scale = 0.3 + Math.random() * 0.7;
110    const offset = triSize * scale;
111    tri.set('points', `0,0 ${triSize * 2},0 ${triSize},${triSize * 2}`);
112    tri.style('fill', shade);
113    svg.element.appendChild(tri.element);
114    TweenLite.fromTo(tri.element, 0.6, {
115        rotation: Math.random() * 360,
116        scale: scale,
117        x: x - offset,
118        y: y - offset,
119        opacity: 1
120    }, {
121        x: x2 - offset, y: y2 - offset, opacity: 0, ease: Power1.easeInOut, onComplete: () => {
122            svg.element.removeChild(tri.element);
123        }
124    });

125};
126
127const addCirc = (x0, y0) => {
128    const circ = createSVG('circle');
129    const a = Math.random();
130    const r = textSize * 0.52;
131    const r2 = r + textSize;
132    const x = x0 + r * Math.cos(2 * Math.PI * a);
133    const y = y0 + r * Math.sin(2 * Math.PI * a);
134    const x2 = x0 + r2 * Math.cos(2 * Math.PI * a);
135    const y2 = y0 + r2 * Math.sin(2 * Math.PI * a);
136    const circSize = textSize * 0.05 * Math.random();
137    circ.set('r', circSize);
138    circ.style('fill', '#eee');
139    svg.element.appendChild(circ.element);
140    TweenLite.fromTo(circ.element, 0.6, {x: x - circSize, y: y - circSize, opacity: 1}, {
141        x: x2 - circSize, y: y2 - circSize, opacity: 0, ease: Power1.easeInOut, onComplete: () => {
142            svg.element.removeChild(circ.element);
143        }
144    });
145};
146
147const addLetter = (char, i) => {
148    const letter = document.createElement('span');
149    const oLetter = document.createElement('span');
150    letter.innerHTML = char;
151    oLetter.innerHTML = char;
152    text.appendChild(letter);
153    const color = colors[i % colors.length];
154    letter.style.color = color.main;
155    offscreenText.appendChild(oLetter);
156    letters[i] = {offScreen: oLetter, onScreen: letter, char: char};
157    animateLetterIn(letter);
158    addDecor(oLetter, color);
159};
160
161const addLetters = value => {
162    value.forEach((char, i) => {
163        if (letters[i] && letters[i].char !== char) {
164            letters[i].onScreen.innerHTML = char;
165            letters[i].offScreen.innerHTML = char;
166            letters[i].char = char;
167        }
168        if (letters[i] === undefined) {
169            addLetter(char, i);
170        }
171    });
172};
173
174const animateLetterOut = (letter, i) => {
175    TweenLite.to(letter.onScreen, 0.1, {
176        scale: 0, opacity: 0, ease: Power2.easeIn, onComplete: () => {
177            console.log('removing');
178            console.log(letter);
179            offscreenText.removeChild(letter.offScreen);
180            text.removeChild(letter.onScreen);
181            positionLetters();
182        }
183    });
184    letters.splice(i, 1);
185};
186
187const removeLetters = value => {
188    for (let i = letters.length - 1; i >= 0; i--) {
189        const letter = letters[i];
190        if (value[i] === undefined) {
191            animateLetterOut(letter, i);
192        }
193    }
194};
195
196const onInputChange = () => {
197    const value = input.value === '' ? [] : input.value.toLowerCase().split('');
198    addLetters(value);
199    removeLetters(value);
200    resizeLetters();
201};
202
203const keyup = e => {
204    if (runPrompt) {
205        input.value = '';
206        runPrompt = false;
207    }
208    ;
209    onInputChange();
210};
211
212const addPrompt = i => {
213    setTimeout(() => {
214        if (runPrompt && prompt[i]) {
215            input.value = input.value + prompt[i];
216            onInputChange();
217            addPrompt(i + 1);
218        }
219    }, 300);
220};
221
222resizePage();
223window.addEventListener('resize', resizePage);
224input.addEventListener('keyup', keyup);
225input.focus();
226addPrompt(0);