• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды HTML для сайта » Анимационный фон звездное небо на JS + CSS (интересный анимационный эффект падающих звезд на HTML и CSS)
Анимационный фон звездное небо на JS + CSS
Kosten
Дата: Понедельник, 2020-05-11, 19:58 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29698
Награды: 62


Вашему вниманию интересный по своей стилистике анимационный эффект, который идет под фон страницы или сайта, это звездное небо при помощи HTML, CSS и JS. Больше всего такой эффект навигаций можно увидеть в блоке, где будет идти как фон, а также на отдельных страницах, что безусловно станет намного ярче. Ведь идет цветовая палитра, которая по своим стилям украсит элементы дизайна на сайте.

Установка:



HTML

Код
<div id="desanum-lodepas">
    <canvas id="canvas">
        ZorNet.Ru — сайт для вебмастера
    </canvas>
</div>

CSS

Код
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

#desanum-lodepas {
    height: 100%;
    width: 100%;
}

canvas {
    display: block;
}

JS

Код
class Vector2 {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    set(x, y) {
        this.x = x;
        this.y = y;
        return this;
    }

    clone() {
        return new Vector2(this.x, this.y);
    }

    add(v) {
        this.x += v.x;
        this.y += v.y;
        return this;
    }

    sub(v) {
        this.x -= v.x;
        this.y -= v.y;
        return this;
    }

    mult(v) {
        this.x *= v.x;
        this.y *= v.y;
        return this;
    }

    magnitude() {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    }
  
    setFromScalarAngle(scalar, angle) {
        this.x = Math.cos(angle) * scalar;
        this.y = Math.sin(angle) * scalar;
    }
}

class Particle {
    constructor(canvas, x, y, scalar, direction, radius, color) {
        this.canvas = canvas;

        this.position = new Vector2(x, y);

        this.velocity = new Vector2();
this.velocity.setFromScalarAngle(scalar, direction);

        this.radius = radius;
        this.color = color;
        this.range = 100;
    }

    update() {

        this.position.add(this.velocity);

        if (this.position.x - this.range > this.canvas.width) {
            this.position.x = this.canvas.width / 2;
            this.position.y = this.canvas.height / 2;
        };
        if (this.position.x + this.range < 0) {
            this.position.x = this.canvas.width / 2;
            this.position.y = this.canvas.height / 2;
        };
        if (this.position.y - this.range > this.canvas.height) {
            this.position.x = this.canvas.width / 2;
            this.position.y = this.canvas.height / 2;
        };
        if (this.position.y + this.range < 0) {
            this.position.x = this.canvas.width / 2;
            this.position.y = this.canvas.height / 2;
        };
    }
}

window.onload = function () {

    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        width = canvas.width = window.innerWidth,
        height = canvas.height = window.innerHeight,
        particles = [],
        particleNum = 100,
        colors = ["#1656b5", "#97b5ec", "#1d97e0", "#0ca3de", "#eadeb6"];

    window.onresize = () => {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
    }

    function randomIntFromRange(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }
  
    function randomColor(colors) {
        return colors[Math.floor(Math.random() * colors.length)]
    }

    for (let i = 0; i < particleNum; i++) {
        particles.push(new Particle(
            canvas,
            canvas.width / 2,
            canvas.height / 2,
            Math.random() * 8 + 2,
            Math.random() * Math.PI * 2,
            randomIntFromRange(5, 7),
            randomColor(colors),
        ));
    }

    function draw() {
        for (let i = 0; i < particleNum; i++) {
            var p = particles[i];
            p.update();
            ctx.save();
            ctx.beginPath();
            ctx.arc(p.position.x, p.position.y, p.radius, 0, Math.PI * 2)
            ctx.shadowColor = p.color;
            ctx.shadowBlur = 5;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.globalAlpha = '1'
            ctx.fillStyle = p.color;
            ctx.fill();
            ctx.restore();
        }
    }

    render();

    function render() {
        ctx.fillStyle = 'hsla(260,40%,5%,.2)';
        ctx.fillRect(0, 0, width, height);
        draw();
        requestAnimationFrame(render);
    }
}

Оригинальный экспериментов, который выстроен под фоновое обозначение, где присутствует анимация при помощи CSS3.


See the Pen
Starry Sky #02
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 5622077.jpg(28.1 Kb) · starry-sky-CSS.zip(4.7 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2020-05-12, 19:10 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29698
Награды: 62



See the Pen
sea anemone
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Вторник, 2020-05-12, 19:11 | Сообщение 3
Оффлайн
Администраторы
Сообщений:29698
Награды: 62


Звездное небо


See the Pen
Starry Sky
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Вторник, 2020-05-12, 19:13 | Сообщение 4
Оффлайн
Администраторы
Сообщений:29698
Награды: 62



See the Pen
Starry sky
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Вторник, 2020-05-12, 19:15 | Сообщение 5
Оффлайн
Администраторы
Сообщений:29698
Награды: 62



See the Pen
starry sky
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Вторник, 2020-05-12, 19:19 | Сообщение 6
Оффлайн
Администраторы
Сообщений:29698
Награды: 62


Фон на анимации движущий звезд


See the Pen
Single element animated & randomized starry sky
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » Коды HTML для сайта » Анимационный фон звездное небо на JS + CSS (интересный анимационный эффект падающих звезд на HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: