Плавно падающие геометрические фигурки с параллакс эффектом на HTML5 Canvas
Интересный эффект для фона вашего сайта - плавно падающие геометрические фигурки с объёмным parallax эффектом
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
canvas { display: block; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; } body { display: grid; place-content: start; min-height: 100vh; background: #000; } |
2#: Следующий код поместите между тегами body и /body:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<script src="/js/pixi.min.new.js"></script> <script id="rendered-js" type="module"> import { App } from '/js/ywdxpn.js'; const $ = new App(); class Psy0 extends $.Psy { constructor({ nPtc = 100, scale = 1 } = {}) { super({ nPtc }); this.scale = scale; } buildTexture(graphic) { graphic.beginFill(0xffffff, 1); graphic.drawRect(0, 0, this.scale, this.scale); graphic.endFill(); } recycle(sprite, isFirstRun) { const { width, height } = sprite.getBounds(); if (isFirstRun) { sprite.position.y = Math.random() * innerHeight; sprite.anchor.set(0.5, 0.5); sprite.angle = Math.random() * 360; } else { sprite.position.y = -height * 2; } sprite.position.x = Math.random() * innerWidth; sprite.tint = Math.random() * 0xffffff; sprite.scale.set(Math.random()); sprite.$w = 0.2 + Math.random() * 0.2; sprite.$vy = (0.4 + Math.random() * 0.6) * 2; sprite.$vx = (-0.5 + Math.random()) * 0.2; } update() { for (const sprite of this.container.children) { sprite.angle += sprite.$w; sprite.position.y += sprite.$vy; sprite.position.x += sprite.$vx; const { y, x, width } = sprite.getBounds(); if (y > innerHeight || x < -width || x > innerWidth) { this.recycle(sprite); } } }} // ----- mutli systems ------ const blurFilter = new PIXI.filters.BlurFilter(10); // ----- sys 1 const psy0 = new Psy0({ scale: 10, nPtc: 500 }); psy0.container.filters = [blurFilter]; $.regPsy(psy0); // ----- sys2 const psy0b = new Psy0({ scale: 10, nPtc: 200 }); $.regPsy(psy0b); </script> |
Осталось лишь залить два JS файла из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
