Loading...
Nolim Academy
Расширение
Онлайн-чат
Академия
Расширение
Техподдержка
Расширение
Онлайн-чат
Nolim Academy
Модификации
Профиль
Подписка
Партнерская программа




Делаем анимированный эффект северного сияния для фона в Tilda

С помощью нашей модификации ты можешь настроить у эффекта "северное сияние" цвета, зернистость и размытие фона
Время настройки: 1 минута
Генератор кода
Видео инструкция
Цвет фона
Шум (noise) фона
Размытие (blur) фона
Цвет 1
Цвет 2
Цвет 3
 Копировать код<!-- Как сделать эффект северного сияния в TILDA? -->
<!-- https://nolim.cc/severnogo-siyaniya-tilda -->
<style> body { min-height: 100vh; background: hsl(0, 0%, 100%); } canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 120vh; z-index: -1; } </style> <script type="module"> import * as PIXI from "https://cdn.skypack.dev/pixi.js"; import SimplexNoise from "https://cdn.skypack.dev/simplex-noise"; import { KawaseBlurFilter } from "https://cdn.skypack.dev/@pixi/filter-kawase-blur"; const width = window.innerWidth; const height = window.innerHeight; const res = 15; const cols = 1 + width / res; const rows = 1 + height / res; const app = new PIXI.Application({ width: width, height: height, resolution: 1, autoDensity: false, backgroundColor: 0x }); document.body.appendChild(app.view); const simplex = new SimplexNoise(); const graphics = new PIXI.Graphics(); app.stage.addChild(graphics); const graphics1 = new PIXI.Graphics(); app.stage.addChild(graphics1); const graphics2 = new PIXI.Graphics(); app.stage.addChild(graphics2); let inc = 0.025; let zOff = 0; const blurFilter = new KawaseBlurFilter(, , true); const noise = new PIXI.filters.NoiseFilter(0.); app.stage.filters = [blurFilter, noise]; const container = new PIXI.Container(); app.stage.addChild(container); container.mask = graphics; const container1 = new PIXI.Container(); app.stage.addChild(container1); container1.mask = graphics1; const container2 = new PIXI.Container(); app.stage.addChild(container2); container2.mask = graphics2; const fill = new PIXI.Graphics(); container.addChild(fill); fill.beginFill(0x); fill.drawRect(0, 0, width, height); const fill1 = new PIXI.Graphics(); container1.addChild(fill1); fill1.beginFill(0x); fill1.drawRect(0, 0, width, height); const fill2 = new PIXI.Graphics(); container2.addChild(fill2); fill2.beginFill(0x); fill2.drawRect(0, 0, width, height); fill.alpha = 1; fill1.alpha = 1; fill2.alpha = 1; let cutoff = 0; if (window.innerWidth < 700) { cutoff = -0.125; } const canvas = app.renderer.view; function render() { noise.seed = Math.random(); let xOff = 0; let xOff1 = 1000; let xOff2 = 2000; graphics.clear(); graphics1.clear(); graphics2.clear(); graphics.beginFill(0x000000); graphics1.beginFill(0x000000); graphics2.beginFill(0x000000); for (let i = 0; i < cols; i++) { xOff += inc; xOff1 += inc; xOff2 += inc; let yOff = 0; let yOff1 = 1000; let yOff2 = 2000; for (let j = 0; j < rows; j++) { const noise = simplex.noise3D(xOff, yOff, zOff); const noise1 = simplex.noise3D(xOff1, yOff1, zOff); const noise2 = simplex.noise3D(xOff2, yOff2, zOff); if (noise > cutoff) { graphics.drawRect(i * res, j * res, res, res); } if (noise1 > cutoff) { graphics1.drawRect(i * res, j * res, res, res); } if (noise2 > cutoff) { graphics2.drawRect(i * res, j * res, res, res); } yOff += inc; yOff1 += inc; yOff2 += inc; } } zOff += 0.005; graphics.endFill(); graphics1.endFill(); graphics2.endFill(); } app.ticker.add(() => { render(); }); </script>  
Код доступен только тем, кто оплатил подписку
Подписка стоит 400р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Инструкция
1. Настраиваем основной цвет фона;

2. Настраиваем зернистость и размытие;

3. Настраиваем вспомогательные цвета:

4. Добавляем блок Т123 и вставляем в него сгенерированный HTML код
или вставляем код в Настройки сайта → Еще → Пользовательские CSS-стили;

ВАЖНО: Когда устанавливаете фон, то он работает на всей странице. Что бы фон был на конкретном блоке, нужно у этого блока фон сделать прозрачным, а у остальных нет.
Нужна помощь в установке?
Made on
Tilda