Современные сайты всё чаще используют небольшие визуальные эффекты, чтобы сделать интерфейс живым и приятным для пользователя.
Простые приёмы на JavaScript, HTML5 и CSS3 помогают добавить динамику и акцент в дизайн без сложных решений. Такие элементы улучшают восприятие контента, удерживают внимание и делают страницу более запоминающейся.
Итак, сделаем три разных визуальных трюка — без лишней воды, только HTML5 + CSS3 + JavaScript. Все примеры минимальные, мы сделали их так, чтобы можно было вставить в один HTML и сразу запустить. Для каждого случая приведена ссылка на демонстрацию работы.
Трюк 1: Радужный текст с плавной анимацией
Текст заливается градиентом, который “ездит” по буквам, создавая эффект живого света. Демонстрация трюка: ссылка
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Rainbow Text</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #111;
}
h1 {
font-size: 4em;
font-family: sans-serif;
background: linear-gradient(270deg, red, orange, yellow, green, cyan, blue, violet);
background-size: 1400% 1400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbowMove 10s linear infinite;
}
@keyframes rainbowMove {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
Трюк 2: Частицы-метеоры на фоне
Простая анимация “звёздного дождя”. Звёзды двигаются вниз, создавая ощущение движения в пространстве. Демонстрация трюка: ссылка
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Starfield</title>
<style>
body { margin: 0; background: black; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<script>
// Настраиваем канвас
const canvas = document.getElementById("starfield");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Star {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2;
this.speed = Math.random() * 2 + 0.5;
}
update() {
this.y += this.speed;
if (this.y > canvas.height) this.reset();
}
draw() {
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
const stars = Array.from({ length: 200 }, () => new Star());
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const s of stars) {
s.update();
s.draw();
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Трюк 3: Переливающийся 3D-куб (CSS-трансформация)
Используем transform-style: preserve-3d и perspective, чтобы создать вращающийся 3D-куб прямо в CSS. Демонстрация трюка: ссылка
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>3D Cube</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
perspective: 1000px; /* задаём перспективу */
}
.cube {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
animation: spin 8s linear infinite;
}
.face {
position: absolute;
width: 150px;
height: 150px;
background: linear-gradient(135deg, #00f, #0ff);
opacity: 0.9;
border: 2px solid #fff;
}
.front { transform: translateZ(75px); }
.back { transform: rotateY(180deg) translateZ(75px); }
.right { transform: rotateY(90deg) translateZ(75px); }
.left { transform: rotateY(-90deg) translateZ(75px); }
.top { transform: rotateX(90deg) translateZ(75px); }
.bottom { transform: rotateX(-90deg) translateZ(75px); }
@keyframes spin {
0% { transform: rotateX(0) rotateY(0); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
Трюк 4: Плавающий текст, реагирующий на движение мыши
Текст слегка «плавает» за мышкой, создавая эффект глубины и живого интерфейса: на ПК текст двигается за курсором, а на смартфоне — за пальцем при движении. Демонстрация трюка: ссылка
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Floating Text Mobile</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #111;
overflow: hidden;
color: white;
font-family: sans-serif;
}
h1 {
font-size: 4em;
position: relative;
}
</style>
</head>
<body>
<h1 id="floatText">JS Magic</h1>
<script>
const text = document.getElementById("floatText");
// Функция для смещения текста
function moveText(x, y) {
const offsetX = (x / window.innerWidth - 0.5) * 40;
const offsetY = (y / window.innerHeight - 0.5) * 40;
text.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
}
// Для ПК
document.addEventListener("mousemove", (e) => {
moveText(e.clientX, e.clientY);
});
// Для смартфонов (тач)
document.addEventListener("touchmove", (e) => {
const touch = e.touches[0]; // берём первый палец
moveText(touch.clientX, touch.clientY);
});
</script>
</body>
</html>
Трюк 5: Волновая анимация точек на Canvas
На экране появляется сетка из светящихся точек, которые колышутся волнами, создавая гипнотический эффект. Демонстрация трюка: ссылка
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Wave Dots</title>
<style>
body { margin: 0; background: #000; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="wave"></canvas>
<script>
const canvas = document.getElementById("wave");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let time = 0;
// Рисуем сетку точек, которые двигаются как волна
function drawWave() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const spacing = 40; // расстояние между точками
for (let x = 0; x < canvas.width; x += spacing) {
for (let y = 0; y < canvas.height; y += spacing) {
// Каждая точка "колышется" по синусоиде
const offset = Math.sin((x + time) * 0.05) * 10;
ctx.fillStyle = "cyan";
ctx.beginPath();
ctx.arc(x, y + offset, 3, 0, Math.PI * 2);
ctx.fill();
}
}
time += 2; // ускорение анимации
requestAnimationFrame(drawWave);
}
drawWave();
</script>
</body>
</html>
Трюк 6: Продвинутый уровень (на WebGL2)
Ниже представлен «шедевр» визуализации (ирония конечно же): динамическая 3D-сфера из частиц, которая пульсирует и переливается цветами.
Демонстрация кода: ссылка
Код рассчитан на современные браузеры (ES2024) и использует JavaScript + Three.js, чтобы облегчить работу с WebGL и сделать визуализацию стабильной.
Сфера создана через объектTHREE.Points, использующий геометрию сферы (SphereGeometry) и материал точек (PointsMaterial). Пульсация реализована с помощью модификации координат каждой точки через цикл обновления в анимации, с плавным уменьшением радиуса до половины и возвратом к исходному состоянию. Цвет сферических точек переливается с помощью HSL и учитывает сдвиг цвета, который можно изменять через ползунок.
Для управления визуализацией добавлена UI-панель с ползунками:
- Размер точек — регулирует величину каждой точки.
- Скорость вращения — задаёт скорость вращения сферы вокруг осей.
- Амплитуда пульсации — регулирует интенсивность «дыхания» сферы.
- Сдвиг цвета (HUE) — меняет основной тон сферы.
UI сделан на обычных HTML <input type="range">, что позволяет работать панели на ПК и мобильных устройствах.
Анимация использует requestAnimationFrame для плавного обновления сцены и автоматически масштабируется при изменении размера окна.
Код демонстрирует продвинутую работу с частицами, анимацией, цветовой динамикой и UI-контролами, оставаясь относительно лёгким для интеграции в браузерные проекты.
Это не для новичка: здесь FBO (ping-pong), фрагментные шейдеры, буферизация ввода и аккуратное управление ресурсами. Для браузеров вроде Chrome (особенно если видеодрайверы строгие) шейдеры нужно писать максимально «чисто» и корректно.
Всё на JavaScript + WebGL (через Three.js), потому что вручную писать WebGL шейдеры слишком громоздко. Этот код будет работать в Chrome «из коробки».
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Живая сфера с правильной пульсацией</title>
<style>
body { margin:0; overflow:hidden; background:#000; font-family:sans-serif; }
canvas{ display:block; }
#ui{
position: fixed; top: 12px; left: 12px;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(6px);
padding: 10px;
border-radius: 10px;
border:1px solid rgba(255,255,255,0.05);
color: #ddd;
font-size: 13px;
z-index: 20;
width: 280px;
display: flex;
flex-direction: column;
gap: 8px;
}
label{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
input[type=range]{ width:140px; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
<div style="font-weight:600">Параметры сферы</div>
<label>Размер точек <output id="sizeVal">2</output>
<input id="size" type="range" min="1" max="10" step="0.1" value="2">
</label>
<label>Скорость вращения <output id="speedVal">0.002</output>
<input id="speed" type="range" min="0" max="0.02" step="0.001" value="0.002">
</label>
<label>Амплитуда пульсации <output id="ampVal">0.5</output>
<input id="amp" type="range" min="0" max="1" step="0.01" value="0.5">
</label>
<label>Сдвиг цвета <output id="hueVal">0</output>
<input id="hue" type="range" min="0" max="360" step="1" value="0">
</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
const canvas = document.getElementById('c');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 200;
const renderer = new THREE.WebGLRenderer({canvas: canvas, antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
// Геометрия и точки
const geometry = new THREE.SphereGeometry(80, 120, 120);
const material = new THREE.PointsMaterial({color:0x00ffff, size:2, transparent:true, opacity:0.9});
const particles = new THREE.Points(geometry, material);
scene.add(particles);
// Сохраняем исходные позиции для точек
const originalPositions = geometry.attributes.position.array.slice();
// Параметры
let time = 0;
let params = {
speed: parseFloat(document.getElementById('speed').value),
amp: parseFloat(document.getElementById('amp').value),
size: parseFloat(document.getElementById('size').value),
hueShift: parseInt(document.getElementById('hue').value)
};
// UI
function updateUI(){
document.getElementById('speedVal').value = params.speed;
document.getElementById('ampVal').value = params.amp;
document.getElementById('sizeVal').value = params.size;
document.getElementById('hueVal').value = params.hueShift;
}
document.getElementById('speed').addEventListener('input', e => { params.speed=parseFloat(e.target.value); updateUI(); });
document.getElementById('amp').addEventListener('input', e => { params.amp=parseFloat(e.target.value); updateUI(); });
document.getElementById('size').addEventListener('input', e => { params.size=parseFloat(e.target.value); material.size=params.size; updateUI(); });
document.getElementById('hue').addEventListener('input', e => { params.hueShift=parseInt(e.target.value); updateUI(); });
function animate(){
requestAnimationFrame(animate);
time += 0.01;
particles.rotation.y += params.speed;
particles.rotation.x = Math.sin(time*0.3)*0.3;
// Пульсация: фактор от 0.5 до 1.0
const pulseFactor = 0.75 + 0.25 * Math.sin(time * 2);
const positions = particles.geometry.attributes.position;
for(let i=0; i<positions.count; i++){
positions.setX(i, originalPositions[i*3] * (1 - params.amp + params.amp * pulseFactor));
positions.setY(i, originalPositions[i*3+1] * (1 - params.amp + params.amp * pulseFactor));
positions.setZ(i, originalPositions[i*3+2] * (1 - params.amp + params.amp * pulseFactor));
}
positions.needsUpdate = true;
// Цвет с учетом сдвига
const hue = (time*10 + params.hueShift)%360;
material.color.setHSL(hue/360, 1, 0.5);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', ()=>{
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
Я, Итан Картер – американский разработчик и технический автор с более чем 20-летним опытом в системном и прикладном программировании. Мой основной профиль — низкоуровневая разработка на Assembler: 22 года практики, включая глубокую работу с оптимизацией кода, архитектурой процессоров и производительностью критичных по скорости решений. Я защитил PhD dissertation по Assembler, а также более 18 лет работаю с ASP.NET, создавая корпоративные веб-системы, API и масштабируемые backend-решения.
Дополнительно я имею 9 лет опыта в C++ и C#, а также 7 лет практики программирования микроконтроллеров на Assembler. Благодаря моему сочетанию академической подготовки и прикладного инженерного опыта я могу писать статьи на стыке архитектуры ПО, низкоуровневой оптимизации и современной разработки, делая сложные технические темы понятными для профессиональной аудитории.
