рд╢реБрдн рджрд┐рди, рджреЛрд╕реНрддреЛрдВ!рдЗрд╕ рд▓реЗрдЦ рдореЗрдВ, рдЬреИрд╕рд╛ рдХрд┐ рдирд╛рдо рд╕реЗ рд╣реА рд╕реНрдкрд╖реНрдЯ рд╣реИ, рд╣рдо рдПрдХ рдЬрд┐рдЬреНрдЮрд╛рд╕реБ рдкреБрд╕реНрддрдХрд╛рд▓рдп ( рдПрдиреАрдо.рдЬреЗрдПрд╕ ) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рджрд┐рд▓рдЪрд╕реНрдк рдкреНрд░рднрд╛рд╡ рдХреЛ рд▓рд╛рдЧреВ рдХрд░реЗрдВрдЧреЗ ред рдореИрдВ рдЗрд╕ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреЗ рд▓рд┐рдП рдкреНрд░рд╢рдВрд╕рд╛ рдирд╣реАрдВ рдЧрд╛рдКрдВрдЧрд╛, рд▓реЗрдХрд┐рди рдЬреЛ рд▓реЛрдЧ рдПрдиреАрдореЗрд╢рди рдореЗрдВ рд╡реНрдпрд╕реНрдд рд╣реИрдВ, рдЙрдиреНрд╣реЗрдВ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдЗрд╕ рдкрд░ рдзреНрдпрд╛рди рджреЗрдирд╛ рдЪрд╛рд╣рд┐рдПред рд╕рд░рд▓ рдЗрдВрдЯрд░рдлрд╝реЗрд╕ + рдЙрддреНрдХреГрд╖реНрдЯ рдкреНрд░рд▓реЗрдЦрди, рд░рдЪрдирд╛рддреНрдордХрддрд╛ рдХреЗ рд▓рд┐рдП рдФрд░ рдХреНрдпрд╛ рдЖрд╡рд╢реНрдпрдХ рд╣реИ? рдЗрд╕ рдЕрджреНрднреБрдд рд▓реЗрдЦрдХреА рд╕рд╛рдордЧреНрд░рд┐рдпреЛрдВ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ ред рдЗрд╕ рд▓реЗрдЦ рдХреЗ рд▓реЗрдЦрдХ рдиреЗ рдЕрдкрдиреЗ рдкреНрд░рднрд╛рд╡ рдХреЛ "рдкрд╛рд░реНрдЯрд┐рдХрд▓ рдЯреНрд░реЗрд▓ рдПрдирд┐рдореЗрд╢рди" рдХрд╣рд╛ред рд╣рдо рд▓реЗрдЦ рд╕реЗ рдХреЛрдб рд▓реЗрдВрдЧреЗ, рдЗрд╕рдХрд╛ рд╡рд┐рд╕реНрддрд╛рд░ рд╕реЗ рд╡рд┐рд╢реНрд▓реЗрд╖рдг рдХрд░реЗрдВрдЧреЗ рдФрд░ рдЗрд╕реЗ рдереЛрдбрд╝рд╛ рд╕реБрдзрд╛рд░реЗрдВрдЧреЗред рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рдХрдгреЛрдВ рдХреЛ рд░рдВрдЧреАрди рдмрдирд╛рдПрдВред рдХреНрдпреЛрдВрдХрд┐ рдПрдХ рд░рдВрдЧ рдЙрдмрд╛рдК рд╣реИред
рджреВрд╕рд░реЗ, рдПрдиреАрдореЗрд╢рди рдХреНрд▓рд┐рдХ рд╕реЗ рд╢реБрд░реВ рд╣реЛрдЧрд╛ред рдХреНрдпреЛрдВрдХрд┐ рдЕрдВрддрд╣реАрди рдПрдиреАрдореЗрд╢рди рдХрд╖реНрдЯрдкреНрд░рдж рд╣реИредрддреАрд╕рд░рд╛, рд╣рдо рдПрдиреАрдореЗрд╢рди рдХреЗ рдХреЗрдВрджреНрд░ (рд╕рд░реНрдкрд┐рд▓) рдХреЛ рдХреНрд▓рд┐рдХ рдХреЗ рд╕реНрдерд╛рди рдкрд░ рд╕рдВрд▓рдЧреНрди рдХрд░рддреЗ рд╣реИрдВред рдХреНрдпреЛрдВрдХрд┐ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЕрдиреБрднрд╡ рдкрд╣рд▓реЗ рдЖрддрд╛ рд╣реИредрд╣рдо рдХреИрдирд╡рд╛рд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░реЗрдВрдЧреЗред рдХрдИ рдЫреЛрдЯреЗ рдмреНрд▓реЙрдХ (divs) рдПрдирд┐рдореЗрдЯреЗрдб рд╣реЛрдВрдЧреЗредрддреЛ, рдЪрд▓рд┐рдП (рдЬреИрд╕рд╛ рдХрд┐ рдЧрдЧрд╛рд░рд┐рди рдиреЗ рдХрд╣рд╛, рдЕрдВрддрд░рд┐рдХреНрд╖ рдореЗрдВ рдЬрд╛ рд░рд╣рд╛ рд╣реИ)редрд╣рдорд╛рд░рд╛ HTML рдХрд┐рд╕рд╕реЗ рдмрдирд╛ рд╣реИ? рдЗрд╕рдореЗрдВ, рд╣рдо рд▓рд╛рдЗрдмреНрд░реЗрд░реА, рд╣рдорд╛рд░реА рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдФрд░ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ, рд╕рдм рдХреБрдЫ рдХрдиреЗрдХреНрдЯ рдХрд░рддреЗ рд╣реИрдВредрд╢реИрд▓рд┐рдпрд╛рдБ рднреА рд╢рд╛рдпрдж рд╣реА рдкреНрд░рднрд╛рд╡рд╢рд╛рд▓реА рд╣реИрдВ:body {
margin: 0;
background: #333;
overflow: hidden;
}
.dot {
position: absolute;
border-radius: 50%;
}
рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рджреЗ рджреЛ! рдЬреИрд╕реА рдЖрдкрдХреА рдЗрдЪреНрдЫрд╛редрд╣рдо рдЕрдкрдирд╛ рд╕рднреА рдХреЛрдб рд╡рд┐рдВрдбреЛ рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЗ рдПрдХ рдХреНрд▓рд┐рдХ рдИрд╡реЗрдВрдЯ рд╣реИрдВрдбрд▓рд░ рдореЗрдВ рд▓рдкреЗрдЯрддреЗ рд╣реИрдВ:window.addEventListener('click', event => { ... })
рд╡рд░реНрдЧ "рдмреЙрдХреНрд╕" рдХреЗ рд╕рд╛рде рдХрдгреЛрдВ рдХреЗ рд▓рд┐рдП рдПрдХ рдХрдВрдЯреЗрдирд░ рдмрдирд╛рдПрдВ:let box = document.createElement('div')
box.classList.add('box')
document.body.appendChild(box)
рд╣рдо рдХреБрдЫ рдорд╛рди рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддреЗ рд╣реИрдВ (рдЬрд╛рджреВ рдирдВрдмрд░ рдирд╣реАрдВ, рдЪрд┐рдВрддрд╛ рди рдХрд░реЗрдВ, рдЦреБрд╢ рд░рд╣реЗрдВ):
let n = 10
let a = 20
let l = 110
рд╣рдо рджреЛ рдЫреЛрд░реЛрдВ рдХреЗ рд▓рд┐рдП рдХрдгреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ:for (let i = 0; i <= l; i++) {
let angle = 0.1 * i
let x = (a * angle) * Math.cos(angle) + event.clientX
let y = (a * angle) * Math.sin(angle) + event.clientY
for (let j = 0; j < n; j++) {
let dot = document.createElement('div')
dot.classList.add('dot')
box.appendChild(dot)
let size = anime.random(5, 10)
dot.setAttribute('style',
`width: ${size}px; height: ${size}px;
// anime.random()
top: ${y + anime.random(-15, 15)}px; left: ${x + anime.random(-15, 15)}px;
//
opacity: 0;
//
background: #${ }`)
}
}
рдПрдХ рдордирдорд╛рдирд╛ рд░рдВрдЧ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХрд╛ рдХрд╛рд░реНрдп рдХреБрдЫ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ:function getRandomColor() {
let letters = '0123456789abcdef',
color = '#'
for (let i = 0; i < 6; i++) {
color += letters[Math.trunc(Math.random() * 16)]
}
return color
}
рд▓реЗрдХрд┐рди рд╣рдо рдЖрд╕рд╛рди рддрд░реАрдХреЛрдВ рдХреА рддрд▓рд╛рд╢ рдирд╣реАрдВ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдЗрд╕ рддрд░рд╣ рджрд┐рдЦреЗрдЧрд╛:(Math.random()*0xffffff<<0).toString(16)
рдпрд╣ рдПрдХ рдмрд┐рдЯрд╡рд╛рдЗрд╕ рд▓реЗрдлреНрдЯ рд╢рд┐рдлреНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ рдФрд░ рдПрдХ рд╣реЗрдХреНрд╕рд╛рдбреЗрд╕рд┐рдорд▓ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдбрд╛рд▓реА рдЬрд╛рддреА рд╣реИредрдЕрдЧрд▓рд╛, рд╣рдорд╛рд░реЗ рджреНрд╡рд╛рд░рд╛ рдмрдирд╛рдП рдЧрдП рдХрдг рдПрдиреАрдореЗ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдирд┐рдореЗрдЯреЗрдб рд╣реИрдВ:anime({
targets: document.querySelectorAll('.dot'),
loop: false,
easing: 'linear',
opacity: [
{
value: 1,
duration: 50,
delay: anime.stagger(2)
},
{
value: 0,
duration: 1200
}
],
width: {
value: 2,
duration: 500,
delay: anime.stagger(2)
},
height: {
value: 2,
duration: 500,
delay: anime.stagger(2)
},
translateX: {
value: () => anime.random(-30, 30),
duration: 1500,
delay: anime.stagger(2)
},
translateY: {
value: () => anime.random(-30, 30),
duration: 1500,
delay: anime.stagger(2)
}
})
рдЕрдВрддрд┐рдо, рд▓реЗрдХрд┐рди рдХрдо рд╕реЗ рдХрдо, рд╢реБрд░реБрдЖрдд рдореЗрдВ рдмреЙрдХреНрд╕ рдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ рдХреЗ рд▓рд┐рдП рдЪреЗрдХ рдЬреЛрдбрд╝реЗрдВ:if (document.querySelector(".box")) {
document.body.removeChild(document.querySelector(".box"));
}
рдкрд░рд┐рдгрд╛рдо:рдЧрд┐рдЯрд╣рдм
рдХреЛрдб редрдмрд╕ рдЖрдЬ рдХреЗ рд▓рд┐рдП рдЗрддрдирд╛ рд╣реА! рдзреНрдпрд╛рди рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред