Когда тебе тяжело, всегда напоминай себе о том, что если ты сдашься, лучше не станет.
28-октября-2023, 21:04 35 0
Предлагаю вашему вниманию ещё одно украшение для сайта к Хеллоуину, анимированного паука который ползает по паутине. Паук сделан с применением JS и HTML. Красивое дополнение для тематического праздника. Так же я недавно публиковал много интересных сниппетов к Хеллоуину, среди которых есть ведьмин кипящий котёл, тыквы и многое другое. Воспользуйтесь навигацией снизу или поиском по сайту. Для того что бы установить красивого паука ползающего по паутине к себе на сайт достаточно скопировать ниже приведённый код, это займет не более двух минут и так поехали.
HTML
<!--
Halloween Spider
- verlet-js Spiderweb demo
https://codepen.io/wakana-k/pen/GRzJEvL
【Spiderweb library info】
verlet-js : Sub Protocol : https://github.com/subprotocol/verlet-js : MIT License
【CircleType library info】
CircleType.js : Peter Hrynkow : https://circletype.labwire.ca/ : MIT License
-->
<script src="https://cdn.jsdelivr.net/gh/peterhry/CircleType@2.3.1/dist/circletype.min.js"></script>
<script type="text/jаvascript" src="https://rawgit.com/subprotocol/verlet-js/master/js/verlet-1.0.0.js"></script>
<canvas id="scratch"></canvas>
<h1><span id="title1"><span class="emoji">🎃</span>Happy<span class="emoji">🎃</span></span><br><span id="title2">Halloween</span></h1>
CSS
@import url("https://fonts.googleapis.com/css?family=Griffy");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overscroll-behavior-x: none;
overscroll-behavior-y: none;
overflow: hidden;
background: #000;
}
body {
position: fixed;
color: DarkOrange;
background-image: url('dаta:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.2"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
font-family: "Griffy", sans-serif;
width: 100vw;
min-height: 100vh;
text-align: center;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 18vmin;
margin-top: -40vh;
}
#title2 {
position: fixed;
bottom: 3vmin;
left: 0;
right: 0;
letter-spacing: 0.08em;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
JS
"use strict";
let t = window.innerWidth,
s = window.innerHeight,
e = Math.max(t, s);
(t = e), (s = e);
let a = Math.min(t, s) / 3;
!(function () {
let t = new CircleType(document.getElementById("title1"));
t.radius(a).dir(1), t.forceHeight(!0);
})(),
(function () {
var e, a, n, i, r, c, o, l, p;
(VerletJS.prototype.spider = function (t) {
var s,
e,
a,
n,
i,
r = 0.99,
c = 0.99,
o = 0.99,
l = 0.99,
p = 1,
h = 0.4,
w = 0.9,
u = 1,
d = 1,
f = new this.Composite();
for (
f.legs = [],
f.thorax = new Particle(t),
f.head = new Particle(t.add(new Vec2(0, -5))),
f.abdomen = new Particle(t.add(new Vec2(0, 10))),
f.particles.push(f.thorax),
f.particles.push(f.head),
f.particles.push(f.abdomen),
f.constraints.push(new DistanceConstraint(f.head, f.thorax, u)),
f.constraints.push(new DistanceConstraint(f.abdomen, f.thorax, u)),
f.constraints.push(
new AngleConstraint(f.abdomen, f.thorax, f.head, 0.4)
),
s = 0;
s < 4;
++s
)
f.particles.push(
new Particle(f.particles[0].pos.add(new Vec2(3, 3 * (s - 1.5))))
),
f.particles.push(
new Particle(f.particles[0].pos.add(new Vec2(-3, 3 * (s - 1.5))))
),
(e = f.particles.length),
f.constraints.push(
new DistanceConstraint(f.particles[e - 2], f.thorax, r)
),
f.constraints.push(
new DistanceConstraint(f.particles[e - 1], f.thorax, r)
),
(a = 1),
1 == s || 2 == s ? (a = 0.7) : 3 == s && (a = 0.9),
f.particles.push(
new Particle(
f.particles[e - 2].pos.add(
new Vec2(20, 30 * (s - 1.5)).normal().mutableScale(20 * a)
)
)
),
f.particles.push(
new Particle(
f.particles[e - 1].pos.add(
new Vec2(-20, 30 * (s - 1.5)).normal().mutableScale(20 * a)
)
)
),
(e = f.particles.length),
f.constraints.push(
new DistanceConstraint(f.particles[e - 4], f.particles[e - 2], c)
),
f.constraints.push(
new DistanceConstraint(f.particles[e - 3], f.particles[e - 1], c)
),
f.particles.push(
new Particle(
f.particles[e - 2].pos.add(
new Vec2(20, 50 * (s - 1.5)).normal().mutableScale(20 * a)
)
)
),
f.particles.push(
new Particle(
f.particles[e - 1].pos.add(
new Vec2(-20, 50 * (s - 1.5)).normal().mutableScale(20 * a)
)
)
),
(e = f.particles.length),
f.constraints.push(
new DistanceConstraint(f.particles[e - 4], f.particles[e - 2], o)
),
f.constraints.push(
new DistanceConstraint(f.particles[e - 3], f.particles[e - 1], o)
),
(n = new Particle(
f.particles[e - 2].pos.add(
new Vec2(20, 100 * (s - 1.5)).normal().mutableScale(12 * a)
)
)),
(i = new Particle(
f.particles[e - 1].pos.add(
new Vec2(-20, 100 * (s - 1.5)).normal().mutableScale(12 * a)
)
)),
f.particles.push(n),
f.particles.push(i),
f.legs.push(n),
f.legs.push(i),
(e = f.particles.length),
f.constraints.push(
new DistanceConstraint(f.particles[e - 4], f.particles[e - 2], l)
),
f.constraints.push(
new DistanceConstraint(f.particles[e - 3], f.particles[e - 1], l)
),
f.constraints.push(
new AngleConstraint(
f.particles[e - 6],
f.particles[e - 4],
f.particles[e - 2],
w
)
),
f.constraints.push(
new AngleConstraint(
f.particles[e - 6 + 1],
f.particles[e - 4 + 1],
f.particles[e - 2 + 1],
w
)
),
f.constraints.push(
new AngleConstraint(
f.particles[e - 8],
f.particles[e - 6],
f.particles[e - 4],
h
)
),
f.constraints.push(
new AngleConstraint(
f.particles[e - 8 + 1],
f.particles[e - 6 + 1],
f.particles[e - 4 + 1],
h
)
),
f.constraints.push(
new AngleConstraint(
f.particles[0],
f.particles[e - 8],
f.particles[e - 6],
p
)
),
f.constraints.push(
new AngleConstraint(
f.particles[0],
f.particles[e - 8 + 1],
f.particles[e - 6 + 1],
p
)
),
f.constraints.push(
new AngleConstraint(
f.particles[1],
f.particles[0],
f.particles[e - 8],
d
)
),
f.constraints.push(
new AngleConstraint(
f.particles[1],
f.particles[0],
f.particles[e - 8 + 1],
d
)
);
return this.composites.push(f), f;
}),
(VerletJS.prototype.spiderweb = function (t, s, e, a) {
var n,
i,
r,
c,
o,
l,
p = 0.6,
h = 0.3,
w = (2 * Math.PI) / e,
u = e * a,
d = s / u,
f = new this.Composite();
for (n = 0; n < u; ++n)
(r = n * w + 0.05 * Math.cos(0.4 * n) + 0.2 * Math.cos(0.05 * n)),
(c = s - d * n + 20 * Math.cos(0.1 * n)),
(o = Math.cos(2.1 * r) * (s / a) * 0.2),
f.particles.push(
new Particle(
new Vec2(t.x + Math.cos(r) * c, t.y + Math.sin(r) * c + o)
)
);
for (n = 0; n < e; n += 4) f.pin(n);
for (n = 0; n < u - 1; ++n)
f.constraints.push(
new DistanceConstraint(f.particles[n], f.particles[n + 1], p)
),
(l = n + e) < u - 1
? f.constraints.push(
new DistanceConstraint(f.particles[n], f.particles[l], p)
)
: f.constraints.push(
new DistanceConstraint(f.particles[n], f.particles[u - 1], p)
);
for (i in (f.constraints.push(
new DistanceConstraint(f.particles[0], f.particles[e - 1], p)
),
f.constraints))
f.constraints[i].distance *= h;
return this.composites.push(f), f;
}),
(VerletJS.prototype.crawl = function (t) {
var s,
e,
a,
n,
i,
r = 100,
c = 35,
o = this.composites[0],
l = this.composites[1],
p = l.particles[0].pos.angle2(
l.particles[0].pos.add(new Vec2(1, 0)),
l.particles[1].pos
),
h = new Vec2(Math.cos(p), Math.sin(p)),
w = new Vec2(Math.cos(p + Math.PI / 2), Math.sin(p + Math.PI / 2)),
u = t < 4 ? 1 : -1,
d = t % 2 == 0 ? 1 : 0,
f = [];
for (s in o.particles)
if (
o.particles[s].pos.sub(l.particles[0].pos).dot(h) * u >= 0 &&
o.particles[s].pos.sub(l.particles[0].pos).dot(w) * d >= 0
) {
if (
!(
(e = o.particles[s].pos.dist2(l.particles[0].pos)) >= c * c &&
e <= r * r
)
)
continue;
for (n in ((a = !1), l.constraints))
for (i = 0; i < 8; ++i)
l.constraints[n] instanceof DistanceConstraint &&
l.constraints[n].a == l.legs[i] &&
l.constraints[n].b == o.particles[s] &&
(a = !0);
a || f.push(o.particles[s]);
}
for (s in l.constraints)
if (
l.constraints[s] instanceof DistanceConstraint &&
l.constraints[s].a == l.legs[t]
) {
l.constraints.splice(s, 1);
break;
}
f.length > 0 &&
(!(function (t) {
for (
var s, e, a = t.length;
a;
s = parseInt(Math.random() * a), e = t[--a], t[a] = t[s], t[s] = e
);
})(f),
l.constraints.push(new DistanceConstraint(l.legs[t], f[0], 1, 0)));
}),
(e = document.getElementById("scratch")),
(a = t),
(n = s),
(i = window.devicePixelRatio || 1),
(e.width = a * i),
(e.height = n * i),
e.getContext("2d").scale(i, i),
(c = (r = new VerletJS(a, n, e)).spiderweb(
new Vec2(a / 2, n / 2),
Math.min(a, n) / 2,
20,
7
)),
(o = r.spider(new Vec2(a / 2, -300))),
(c.drawParticles = function (t, s) {
var e, a;
for (e in s.particles)
(a = s.particles[e]),
t.beginPath(),
t.arc(a.pos.x, a.pos.y, 1.3, 0, 2 * Math.PI),
(t.fillStyle = "#fff"),
t.fill();
}),
(o.drawConstraints = function (t, s) {
var e, a;
for (
t.beginPath(),
t.arc(o.head.pos.x, o.head.pos.y, 4, 0, 2 * Math.PI),
t.fillStyle = "orange",
t.fill(),
t.beginPath(),
t.arc(o.thorax.pos.x, o.thorax.pos.y, 4, 0, 2 * Math.PI),
t.fill(),
t.beginPath(),
t.arc(o.abdomen.pos.x, o.abdomen.pos.y, 8, 0, 2 * Math.PI),
t.fill(),
e = 3;
e < s.constraints.length;
++e
)
(a = s.constraints[e]) instanceof DistanceConstraint &&
(t.beginPath(),
t.moveTo(a.a.pos.x, a.a.pos.y),
t.lineTo(a.b.pos.x, a.b.pos.y),
(e >= 2 && e <= 4) ||
(e >= 19 && e <= 20) ||
(e >= 35 && e <= 36) ||
(e >= 51 && e <= 52)
? (t.save(),
a.draw(t),
(t.strokeStyle = "orange"),
(t.lineWidth = 3),
t.stroke(),
t.restore())
: (e >= 4 && e <= 6) ||
(e >= 21 && e <= 22) ||
(e >= 37 && e <= 38) ||
(e >= 53 && e <= 54)
? (t.save(),
a.draw(t),
(t.strokeStyle = "orange"),
(t.lineWidth = 2),
t.stroke(),
t.restore())
: (e >= 6 && e <= 8) ||
(e >= 23 && e <= 24) ||
(e >= 39 && e <= 40) ||
(e >= 55 && e <= 56)
? (t.save(),
(t.strokeStyle = "orange"),
(t.lineWidth = 1.5),
t.stroke(),
t.restore())
: ((t.strokeStyle = "orange"), t.stroke()));
}),
(o.drawParticles = function () {}),
(l = 0),
(p = function () {
0 == Math.floor(4 * Math.random()) && r.crawl((3 * l++) % 8),
r.frame(16),
r.draw(),
requestAnimFrame(p);
})();
})();