Ля-ля-ля Новое

Поделиться12025-10-22 22:51:44

Автор: Merlin
Администратор форума
Откуда: г.Краснодар
Сообщений: 338
Уважение: +19
Пол: Мужской
Знак зодиака:

ыыыыы

Цитировать Сообщение 1

Поделиться22025-10-26 03:10:17

Автор: Merlin
Администратор форума
Откуда: г.Краснодар
Сообщений: 338
Уважение: +19
Пол: Мужской
Знак зодиака:

[html]<div id="watch">
<div class="frame-face"></div>
<ul class="minute-marks">

<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<ul class="digits">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
</ul>
<div class="hours-hand"></div>
<div class="minutes-hand"></div>
<div class="seconds-hand"></div>
</div>

/* Убираем анимации из CSS */
/* @keyframes hours { to {transform:rotate(335deg)} } */
#watch .hours-hand {
width:.8em;
height:7em;
border-radius:0 0 .9em .9em;
background:#232425;
position:absolute;
bottom:50%; left:50%;
margin:0 0 -.8em -.4em;
box-shadow:#232425 0 0 2px;
transform-origin:0.4em 6.2em;
/* transform:rotate(-25deg); Убираем начальный поворот */
/* animation:hours 43200s linear 0s infinite; Убираем анимацию */
}
#watch .hours-hand:before {
content:'';
background:inherit;
width:1.8em;
height:.8em;
border-radius:0 0 .8em .8em;
box-shadow:#232425 0 0 1px;
position:absolute;
top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
content:'';
width:0; height:0;
border:.9em solid #232425;
border-width:0 .9em 2.4em .9em;
border-left-color:transparent;
border-right-color:transparent;
position:absolute;
top:-3.1em; left:-.5em;
}

/* @keyframes minutes { to {transform:rotate(422deg)} } */
#watch .minutes-hand {
width:.8em;
height:12.5em;
border-radius:.5em;
background:#343536;
position:absolute;
bottom:50%; left:50%;
margin:0 0 -1.5em -.4em;
box-shadow:#343536 0 0 2px;
transform-origin:0.4em 11em;
/* transform:rotate(62deg); Убираем начальный поворот */
/* animation:minutes 3600s linear 0s infinite; Убираем анимацию */
}

/* @keyframes seconds { to {transform:rotate(480deg)} } */
#watch .seconds-hand {
width:.2em;
height:14em;
border-radius:.1em .1em 0 0/10em 10em 0 0;
background:#c00;
position:absolute;
bottom:50%; left:50%;
margin:0 0 -2em -.1em;
box-shadow:rgba(0,0,0,.8) 0 0 .2em;
transform-origin:0.1em 12em;
/* transform:rotate(120deg); Убираем начальный поворот */
/* animation:seconds 60s steps(60, end) 0s infinite; Убираем анимацию */
}
#watch .seconds-hand:after {
content:'';
width:1.4em;
height:1.4em;
border-radius:.7em;
background:inherit;
position:absolute;
left:-.65em; bottom:1.35em;
}
#watch .seconds-hand:before {
content:'';
width:.8em;
height:3em;
border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
box-shadow:rgba(0,0,0,.8) 0 0 .2em;
background:inherit;
position:absolute;
left:-.35em; bottom:-3em;
}
</style>

// 360 градусов / 12 часов = 30 градусов на час
const hoursRotation = (hours + minutes / 60) * 30;
// 360 градусов / 60 минут = 6 градусов на минуту
const minutesRotation = (minutes + seconds / 60) * 6;
// 360 градусов / 60 секунд = 6 градусов на секунду
const secondsRotation = seconds * 6;

// Обновляем раз в секунду
setInterval(updateWatch, 1000);
// Обновляем сразу при загрузке
updateWatch();
</script>[/html]

0

Цитировать Сообщение 2

Поделиться32025-10-29 15:59:21

Автор: Merlin
Администратор форума
Откуда: г.Краснодар
Сообщений: 338
Уважение: +19
Пол: Мужской
Знак зодиака:

Туман на фотографии, который убирается курсором мыши

[html]<div class="fog-container">
<canvas id="fog"></canvas>
<canvas id="fog-bg"></canvas>
<canvas id="brush"></canvas>
</div>

/* Десктоп: ограничиваем максимальную ширину */
@media (min-width: 768px) {
.fog-container {
max-width: 60rem; /* ≈960px при базовом шрифте 16px */
/* Или, например: max-width: 80vw; — 80% ширины окна */
margin-left: auto;
margin-right: auto;
}
}
</style>

class Fog {
constructor({ selector, density = 50, velocity = 2, particle, bgi } = {}) {
const canvas = document.querySelector(selector);
const bcr = canvas.parentElement.getBoundingClientRect();
this.ctx = canvas.getContext('2d');
this.canvasWidth = canvas.width = bcr.width;
this.canvasHeight = canvas.height = bcr.height;
this.particleCount = density;
this.maxVelocity = velocity;
this.particle = particle;
this.bgi = bgi;
this._createParticles();
this._setImage();
if (!this.bgi) return;
const img = new Image();
img.onload = () => {
const size = coverImg(img, this.canvasWidth, this.canvasHeight);
this.bgi = { img, w: size.w, h: size.h };
this._render();
};
img.src = this.bgi;
}
_createParticles() {
this.particles = [];
const random = (min, max) => Math.random() * (max - min) + min;
for (let i = 0; i < this.particleCount; i++) {
const particle = new FogParticle(this.ctx, this.canvasWidth, this.canvasHeight);
particle.setPosition(
random(0, this.canvasWidth),
random(0, this.canvasHeight)
);
particle.setVelocity(
random(-this.maxVelocity, this.maxVelocity),
random(-this.maxVelocity, this.maxVelocity)
);
this.particles.push(particle);
}
}
_setImage() {
if (!this.particle) return;
const img = new Image();
img.onload = () => this.particles.forEach(p => p.setImage(img));
img.src = this.particle;
}
_render() {
if (this.bgi) {
this.ctx.drawImage(this.bgi.img, 0, 0, this.bgi.w, this.bgi.h);
} else {
this.ctx.fillStyle = "rgba(0, 0, 0, 1)";
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
}
this.particles.forEach(p => p.render());
requestAnimationFrame(this._render.bind(this));
}
}

class Eraser {
constructor({ bgCanvas, brushCanvas, bgi, radius = 120 } = {}) {
this.bgCanvas = document.querySelector(bgCanvas);
this.brushCanvas = document.querySelector(brushCanvas);
this.bgCtx = this.bgCanvas.getContext('2d');
this.brushCtx = this.brushCanvas.getContext('2d');
this.parentElement = this.bgCanvas.parentElement;
const bcr = this.parentElement.getBoundingClientRect();
this.canvasWidth = this.bgCanvas.width = this.brushCanvas.width = bcr.width;
this.canvasHeight = this.bgCanvas.height = this.brushCanvas.height = bcr.height;
this.brushRadius = radius;

this.bgi = new Image();
this.bgi.src = bgi;
this.bgi.onload = this._attachEvents.bind(this);

_attachEvents() {
const parent = this.parentElement;

// Мышь
parent.addEventListener('mousemove', this._onMouseMove.bind(this));
parent.addEventListener('mouseleave', this._onMouseLeave.bind(this));

// Касания
parent.addEventListener('touchstart', this._onTouchStart.bind(this), { passive: false });
parent.addEventListener('touchmove', this._onTouchMove.bind(this), { passive: false });
parent.addEventListener('touchend', this._onTouchEnd.bind(this), { passive: false });
}

_onMouseMove(e) {
const currentPoint = this.utils.getMousePos(e);
this._drawStroke(currentPoint);
}

_onMouseLeave() {
this.lastPoint = null;
}

_onTouchStart(e) {
e.preventDefault();
const touch = e.touches[0];
const pos = this.utils.getTouchPos(touch);
this.lastPoint = pos;
}

_onTouchMove(e) {
e.preventDefault();
const touch = e.touches[0];
const currentPoint = this.utils.getTouchPos(touch);
this._drawStroke(currentPoint);
}

_onTouchEnd(e) {
e.preventDefault();
this.lastPoint = null;
}

_drawStroke(currentPoint) {
this.lastPoint = this.lastPoint || currentPoint;
const dist = this.utils.distanceBetween(this.lastPoint, currentPoint);
const angle = this.utils.angleBetween(this.lastPoint, currentPoint);

for (let ii = 0; ii < dist; ii += 5) {
const x = this.lastPoint.x + (Math.sin(angle) * ii);
const y = this.lastPoint.y + (Math.cos(angle) * ii);
const brush = this.brushCtx.createRadialGradient(x, y, 0, x, y, this.brushRadius);
brush.addColorStop(0, 'rgba(0, 0, 0, 1)');
brush.addColorStop(0.3, 'rgba(0, 0, 0, 0.1)');
brush.addColorStop(1, 'rgba(0, 0, 0, 0)');
this.brushCtx.fillStyle = brush;
this.brushCtx.fillRect(
x - this.brushRadius,
y - this.brushRadius,
this.brushRadius * 2,
this.brushRadius * 2
);
}

this.lastPoint = currentPoint;

// Перерисовка фона с маской
this.bgCtx.globalCompositeOperation = 'source-over';
const size = coverImg(this.bgi, this.canvasWidth, this.canvasHeight);
this.bgCtx.drawImage(this.bgi, 0, 0, size.w, size.h);
this.bgCtx.globalCompositeOperation = 'destination-in';
this.bgCtx.drawImage(this.brushCanvas, 0, 0);
}
}

const coverImg = (img, width, height) => {
const ratio = img.width / img.height;
let w = width;
let h = w / ratio;
if (h < height) {
h = height;
w = h * ratio;
}
return { w, h };
};

// ⚠️ Убраны лишние пробелы в URL!
const bgi = 'https://atuin.ru/demo/i/fog-bg.webp';

function resize() {
// Очистим старые экземпляры при resize (опционально, но полезно)
new Fog({
selector: '#fog',
particle: 'https://atuin.ru/demo/i/fog-particle.png',
density: 60,
bgi,
});
new Eraser({
bgCanvas: '#fog-bg',
brushCanvas: '#brush',
radius: 80,
bgi,
});
}

resize();
window.addEventListener("resize", resize);
</script>[/html]

0

Цитировать Сообщение 3

Это новая тема с описанием:)))‡очень интересное содержание&	Тестовый форум	2025-11-24
12345	Новый форум	2025-10-29
фаыфыафыа	Новый форум	2025-11-05

Тестовый

Меню навигации

Пользовательские ссылки

Информация о пользователе

Ля-ля-ля Новое

Сообщений 1 страница 3 из 3

Поделиться12025-10-22 22:51:44

Поделиться22025-10-26 03:10:17

Поделиться32025-10-29 15:59:21

Быстрый ответ

Похожие темы