Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Фон с 3D частицами в любой части сайта

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит добавить динамики в сайт и создать очень интересный дизайн
Для Вашего удобства в коде есть комментарии, чтобы Вы могли ориентироваться и менять все так, как хотите.
Добавьте уникальность в Ваш проект
Обратите внимание, что данный эффект будет работать как на десктоп версии сайта, так и на мобильной версии сайта без модификации текущего кода. Внутри кода также стоят заметки для Вашего удобства.
Как это выглядит?
Как это добавить?
Первый шаг
Создаем Zero блок. В нем убираем заливку. В этом Zero блоке создаем shape с CSS классом - particles
Второй шаг
Создаем блок T123 и добавляем на нужную страницу, где должен применяться эффект или размещаем в подвале сайта, чтобы модификация применялась на всем сайте

<!--Взято с сайта https://digistudio.su/fon-s-3d-chasticami-->

<script type="module">
import { swarmBackground } from 'https://cdn.jsdelivr.net/npm/threejs-toys@0.0.8/+esm'

const bg = swarmBackground({
  el: document.querySelector('.particles'),
  eventsEl: document.querySelector('.particles'),
  gpgpuSize: 64, /*Задаем количество частиц*/
  colors: ['#c0817d', '#ffffff'], /*Задаем частицам начальный цвет*/
  geometry: 'default'
})

bg.three.camera.position.set(0, 0, 200)
bg.three.renderer.setClearColor( '#000000', 1 ) /*Указываем цвет фона*/

 document.querySelector('#rec691458487').addEventListener('click', (element) => {
  bg.setColors([Math.random() * 0xffffff, Math.random() * 0xffffff])
})

var interact = false
document.querySelector('#rec691458487').addEventListener('dblclick', (element) => {
  if (interact === false) {
  interact = true
  $('.particles').addClass('interact')
  }
  else {
   interact = false  
   $('.particles').removeClass('interact')
  }
})
</script>
<style>
    canvas[data-engine="three.js r140"] {
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
        overflow: hidden;
        height: unset !important;
    }
    .interact {
        pointer-events: auto !important;
    }
    .particles {
        pointer-events: none;
    }
    .unselect {
        user-select: none;
    }
</style>
Как Вам модификация?
Made on
Tilda