❤️Креативная веб-страница: HTML5, холст для создания специальных эффектов технологических частиц (технологические частицы, отслеживание мышью js, соединение частиц)
Веб-страница спецэффектов технологических частиц
В этом техническом блоге мы научимся создавать потрясающую Веб-страницу. спецэффектов технологических частицы. Эта веб-страница со спецэффектами будет отображать динамичный и изысканный эффект частиц и будет создавать связующий эффект при движении мыши, добавляя крутую научную атмосферу. и атмосфера техники. Для достижения этого эффекта мы будем использовать HTML, CSS и JavaScript.
Динамическое отображение изображения
Статическое отображение изображения
Рисунок 1
Рисунок 2
Видео дисплей
Соединение частиц HTML5
Анализ кода проекта
HTML-структура
первый,давайте посмотримHTMLструктура。кодтолько один из<canvas>элемент,Это то, что мы используем для рисования частицспецэффектыхолст。Мы также можем дать<canvas>элемент设置背景图片来增加更多的效果。
<!DOCTYPE html>
<html>
<head>
<title>Веб-страница спецэффектов технологических частиц</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
background-image: url("your_background_image_url.jpg"); /* Замените URL-адрес собственного фонового изображения. */
background-size: cover;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
// Сюда будет добавлен JavaScript-код
</script>
</body>
</html>JavaScript-код
Сейчас,Давайте разберем это подробноJavaScriptкодчасть。используется здесь<script>лейбл будетJavaScriptкодвстроенный вHTMLсередина。код К основным функциям относятся：
- Создайте классы для частиц и проводов.
- Инициализируйте массив частиц и нарисуйте частицы на холсте.
- Обновите статус движения частиц в зависимости от положения мыши и нарисуйте связи между частицами.
- Реализуйте эффекты анимации, чтобы частицы и соединения со временем обновлялись.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const particles = [];
const connections = [];
const particleCount = 300; // Количество частиц
const particleSpeed = 1; // скорость движения частицы
const particleSize = 2; // размер частиц
const maxDistance = 100; // Максимальное расстояние между частицами
const lightningColor = "#fff"; // Цвет соединения частиц
// Создать класс частиц
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.color = "#fff";
this.angle = Math.random() * 360;
this.speed = Math.random() * particleSpeed;
this.opacity = Math.random() * 0.5 + 0.5;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
// Если частица выходит за пределы холста, позиция сбрасывается случайным образом.
if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
this.x = Math.random() * width;
this.y = Math.random() * height;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.fill();
}
}
// Создать массив частиц
function createParticles() {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
// Нарисуйте связи между частицами
function drawConnections() {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDistance) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = lightningColor;
ctx.lineWidth = 0.2 * (1 - distance / maxDistance);
ctx.stroke();
ctx.closePath();
}
}
}
}
// цикл анимации
function animate() {
ctx.clearRect(0, 0, width, height);
for (const particle of particles) {
particle.update();
particle.draw();
}
drawConnections();
requestAnimationFrame(animate);
}
// Слушайте события движения мыши и обновляйте статус движения частиц в зависимости от положения мыши.
document.addEventListener("mousemove", (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
for (const particle of particles) {
const dx = mouseX - particle.x;
const dy = mouseY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDistance) {
particle.angle = Math.atan2(dy, dx);
particle.speed = 5;
} else {
particle.speed = Math.random() * particleSpeed;
}
}
});
// Инициализировать массив частиц и запустить анимацию
createParticles();
animate();
</script>
Полный код проекта
<!DOCTYPE html>
<html>
<head>
<title>Веб-страница спецэффектов технологических частиц</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
background-image: url("your_background_image_url.jpg");
background-size: cover;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const particles = [];
const connections = [];
const particleCount = 300;
const particleSpeed = 1;
const particleSize = 2;
const maxDistance = 100;
const lightningColor = "#fff";
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.color = "#fff";
this.angle = Math.random() * 360;
this.speed = Math.random() * particleSpeed;
this.opacity = Math.random() * 0.5 + 0.5;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
this.x = Math.random() * width;
this.y = Math.random() * height;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.fill();
}
}
function createParticles() {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
function drawConnections() {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDistance) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = lightningColor;
ctx.lineWidth = 0.2 * (1 - distance / maxDistance);
ctx.stroke();
ctx.closePath();
}
}
}
}
function animate() {
ctx.clearRect(0, 0, width, height);
for (const particle of particles) {
particle.update();
particle.draw();
}
drawConnections();
requestAnimationFrame(animate);
}
document.addEventListener("mousemove", (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
for (const particle of particles) {
const dx = mouseX - particle.x;
const dy = mouseY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < maxDistance) {
particle.angle = Math.atan2(dy, dx);
particle.speed = 5;
} else {
particle.speed = Math.random() * particleSpeed;
}
}
});
createParticles();
animate();
</script>
</body>
</html>Как использовать код (очень просто, не нужно ничего скачивать)
🍓1.Откройте блокнот.
🍓2. Скопируйте и вставьте приведенный выше исходный код в Блокнот, сохраните файл как HTML-файл и нажмите «Сохранить».
🍓3. Откройте html-файл (готово (Может'◡'ا))
Заключение
На этом глава заканчивается. Если вы считаете, что она вам полезна, поддержите блоггера~
Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).
Прочитайте нейросетевую модель Трансформера в одной статье
.ART Теплые зимние предложения уже открыты
Сравнительная таблица описания кодов ошибок Amap
Уведомление о последних правилах Points Mall в декабре 2022 года.
Даже новички могут быстро приступить к работе с легким сервером приложений.
Взгляд на RSAC 2024｜Защита конфиденциальности в эпоху больших моделей
Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.
Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)
Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов
[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста
Обзор Cloud-init и этапы создания в рамках PVE
Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)
Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.
Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!
[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !
[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз
Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.
Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?
Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента
Дополнительные правила вознаграждения амбассадоров акции в марте 2023 г.
Можно ли открыть частный сервер Phantom Beast Palu одним щелчком мыши? Супер простой урок для начинающих! (Прилагается метод обновления сервера)
[Играйте с Phantom Beast Palu] Обновите игровой сервер Phantom Beast Pallu одним щелчком мыши
Maotouhu делится: последний доступный внутри страны адрес склада исходного образа Docker 2024 года (обновлено 1 декабря)
Кодирование Base64 в MultipartFile
5 точек расширения SpringBoot, супер практично!
Глубокое понимание сопоставления индексов Elasticsearch.
15 рекомендуемых платформ разработки с нулевым кодом корпоративного уровня. Всегда найдется та, которая вам понравится.
