1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| // https://codepen.io/hoqqanen/pen/zvqGEG
#loading-box
.loading-left-bg
.loading-right-bg
.spinner-box
//- 这里替换成了你新项目的 SVG 滚动动画
#page
#phrase_box svg(width='100%', height='100%')
defs
mask#mask(maskUnits='userSpaceOnUse', maskContentUnits='userSpaceOnUse')
linearGradient#linearGradient(gradientUnits='objectBoundingBox', x2='0', y2='1')
stop(stop-color='white', stop-opacity='0', offset='0%')
stop(stop-color='white', stop-opacity='1', offset='30%')
stop(stop-color='white', stop-opacity='1', offset='70%')
stop(stop-color='white', stop-opacity='0', offset='100%')
rect(width='100%', height='100%', fill='url(#linearGradient)')
g(width='100%', height='100%', style='mask: url(#mask);')
g#phrases
script.
var checkmarkIdPrefix = "loadingCheckSVG-";
var checkmarkCircleIdPrefix = "loadingCheckCircleSVG-";
var verticalSpacing = 50;
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function createSVG(tag, properties, opt_children) {
var newElement = document.createElementNS("http://www.w3.org/2000/svg", tag);
for (prop in properties) {
newElement.setAttribute(prop, properties[prop]);
}
if (opt_children) {
opt_children.forEach(function (child) {
newElement.appendChild(child);
})
}
return newElement;
}
function createPhraseSvg(phrase, yOffset) {
var text = createSVG("text", {
fill: "white",
x: 50,
y: yOffset,
"font-size": 18,
"font-family": "Arial"
});
text.appendChild(document.createTextNode(phrase + "..."));
return text;
}
function createCheckSvg(yOffset, index) {
var check = createSVG("polygon", {
points: "21.661,7.643 13.396,19.328 9.429,15.361 7.075,17.714 13.745,24.384 24.345,9.708 ",
fill: "rgba(255,255,255,1)",
id: checkmarkIdPrefix + index
});
var circle_outline = createSVG("path", {
d: "M16,0C7.163,0,0,7.163,0,16s7.163,16,16,16s16-7.163,16-16S24.837,0,16,0z M16,30C8.28,30,2,23.72,2,16C2,8.28,8.28,2,16,2 c7.72,0,14,6.28,14,14C30,23.72,23.72,30,16,30z",
fill: "white"
})
var circle = createSVG("circle", {
id: checkmarkCircleIdPrefix + index,
fill: "rgba(255,255,255,0)",
cx: 16,
cy: 16,
r: 15
})
var group = createSVG("g", {
transform: "translate(10 " + (yOffset - 20) + ") scale(.9)"
}, [circle, check, circle_outline]);
return group;
}
function addPhrasesToDocument(phrases) {
phrases.forEach(function (phrase, index) {
var yOffset = 30 + verticalSpacing * index;
document.getElementById("phrases").appendChild(createPhraseSvg(phrase, yOffset));
document.getElementById("phrases").appendChild(createCheckSvg(yOffset, index));
});
}
function easeInOut(t) {
var period = 200;
return (Math.sin(t / period + 100) + 1) / 2;
}
document.addEventListener("DOMContentLoaded", function (event) {
var phrases = shuffleArray(["Feeding unicorns", "Grabbing tasks", "Collating conversations", "Reticulating splines", "Pondering emptiness", "Considering alternatives", "Shuffling bits", "Celebrating moments", "Generating phrases", "Simulating workflow", "Empowering humanity", "Being aspirational", "Doing the hokey pokey", "Bueller", "Cracking jokes", "Slacking off"]);
addPhrasesToDocument(phrases);
var start_time = new Date().getTime();
var upward_moving_group = document.getElementById("phrases");
upward_moving_group.currentY = 0;
var checks = phrases.map(function (_, i) {
return {
check: document.getElementById(checkmarkIdPrefix + i),
circle: document.getElementById(checkmarkCircleIdPrefix + i)
};
});
function animateLoading() {
var now = new Date().getTime();
upward_moving_group.setAttribute("transform", "translate(0 " + upward_moving_group.currentY + ")");
upward_moving_group.currentY -= 1.35 * easeInOut(now);
checks.forEach(function (check, i) {
var color_change_boundary = -i * verticalSpacing + verticalSpacing + 15;
if (upward_moving_group.currentY < color_change_boundary) {
var alpha = Math.max(Math.min(1 - (upward_moving_group.currentY - color_change_boundary + 15) / 30, 1), 0);
check.circle.setAttribute("fill", "rgba(255, 255, 255, " + alpha + ")");
var check_color = [Math.round(255 * (1 - alpha) + 120 * alpha), Math.round(255 * (1 - alpha) + 154 * alpha)];
check.check.setAttribute("fill", "rgba(255, " + check_color[0] + "," + check_color[1] + ", 1)");
}
})
if (now - start_time < 30000 && upward_moving_group.currentY > -710) {
requestAnimationFrame(animateLoading);
}
}
animateLoading();
});
|
