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

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

Данная модификация приукрасит любой Ваш проект, добавив интересных 3D бабочек
Отличный вариант, чтобы добавить динамики в проект, главное не перестараться с бабочками.
Отличная возможность добавить изюминку в Ваш проект.
Данная модификация работает как на десктоп устройствах, так и на мобильных устройствах, что позволит создать по истине уникальный дизайн.
Как это выглядит?
Я просто очень сильно люблю летающих созданий.
More products
Как это добавить?
Первый шаг
Создаем любые блоки, в которых мы хотим применить эффект 3D бабочек. У этих блоков полностью убираем заливку.
Второй шаг
Добавляем код, который дан ниже. Вы спокойно можете менять код так, как Вам хочется. Внутри даны комментарии, по которым Вы можете ориентироваться.

<!--взято с сайта https://digistudio.su/3d-babochki-v-lyubom-blokes-->

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

butterfliesBackground ({
  el: document.getElementsByTagName('body')[0],
  gpgpuSize: 32, // Количество бабочек !ОСТОРОЖНО! БОЛЬШОЕ ЧИСЛО БАБОЧЕК СИЛЬНО НАГРУЖАЕТ УСТРОЙСТВО 
  background: '#f5f5f5', // Цвет фона
  material: 'basic', // 'basic', 'phong', 'standard'
  materialParams: { transparent: true, alphaTest: 0.5 },
  texture: 'https://static.tildacdn.com/tild3937-3935-4930-a239-353861336533/butterflies.png',
  textureCount: 4,
  wingsScale: [1, 1, 1], 
  wingsWidthSegments: 8, // Количество сегментов для анимации крылышек в ширину
  wingsHeightSegments: 8, // Количество сегментов для анимации крылышек в высоту
  wingsSpeed: 0.75, // Скорость взмахов крыльями
  wingsDisplacementScale: 1.25,
  noiseCoordScale: 0.01,
  noiseTimeCoef: 0.0005,
  noiseIntensity: 0.0025,
  attractionRadius1: 100,
  attractionRadius2: 150,
  maxVelocity: 0.1
})
</script>
<style>
    canvas[data-engine="three.js r140"] {
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
    }
</style>
Как Вам модификация?
Made on
Tilda