URL скопирован в буфер обмена!
Как сделать анимацию падающего снега для всей старницы на Tilda?
С помощью этой модификации можно добавить на сайт эффект падающих снежинок или любых других частиц. Анимация адаптирована под мобильные устройства. Можно указать свой набор символов, включить показ только на первом экране, а также настроить скорость и цвет.
Модификация работает с включенным Autoscale в блоках
Модификация работает c Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode
Количество частиц
Поддержка мобилок
Цвет частиц
Проигрывание анимации
Тип частиц
Символы для анимации
Настройки частиц
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD135--><script>
document.addEventListener("DOMContentLoaded",function(){
if(window.innerWidth<320) return;
const tcReduce=window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if(tcReduce) return;
const tcdCv=document.createElement("canvas");
const tiCx=tcdCv.getContext("2d",{alpha:true});
const tiZ=10001;
tcdCv.style.cssText="position:fixed;inset:0;pointer-events:none;z-index:"+tiZ+";";
document.body.appendChild(tcdCv);
const tcChars="❄,❅,❆".split(",");
const TildatcCols="#bbfbff,#cce7ff,#e0f7fa".split(",");
let tcW=0,tcH=0,tcDpr=1,tiRun=1,tcdLast=performance.now();
const tcdFlakes=[];
let tcLastW=window.innerWidth;
let tcGateH=window.innerHeight;
function tcPick(n){return n[(Math.random()*n.length)|0]}
function tiRand(a,b){return Math.random()*(b-a)+a}
function tcGetY(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0}
function TildatcResize(){
tcDpr=Math.min(2,window.devicePixelRatio||1);
tcW=window.innerWidth; tcH=window.innerHeight;
tcdCv.width=Math.floor(tcW*tcDpr);
tcdCv.height=Math.floor(tcH*tcDpr);
tcdCv.style.width=tcW+"px";
tcdCv.style.height=tcH+"px";
tiCx.setTransform(tcDpr,0,0,tcDpr,0,0);
}
function tcMake(){
const tcMinSize=8,tcMaxSize=18;
const tcSz=tiRand(tcMinSize,tcMaxSize);
return{
x:Math.random()*tcW,
y:tiRand(-tcH,0),
s:tcSz,
v:0,
o:tiRand(0.55,0.95),
c:tcPick(TildatcCols),
t:tcPick(tcChars),
p:Math.random()*Math.PI*2,
w:tiRand(0.6,1.4)
};
}
function tcFill(){
const tcdCount=60;
const tcM=window.innerWidth<640?0.5:1;
const tcN=Math.max(1,Math.round(tcdCount*tcM));
tcdFlakes.length=0;
for(let i=0;i<tcN;i++){
const tcF=tcMake();
const TildatcMinSpd=18,TildatcMaxSpd=55;
tcF.v=tiRand(TildatcMinSpd,TildatcMaxSpd);
tcdFlakes.push(tcF);
}
}
let tiFirstScreenOnly=0;
let tcDotMode=0;
let tcSpawnOn=1,tcSpawnWasOn=1;
function tcApplyGate(){
tcSpawnOn = (tiFirstScreenOnly? (tcGetY()<=(tcGateH-1)) : 1);
if(tcSpawnOn===tcSpawnWasOn) return;
if(!tcSpawnOn){
for(let i=0;i<tcdFlakes.length;i++) if(tcdFlakes[i].y<0) tcdFlakes[i].y=tcH+9999;
}else{
for(let i=0;i<tcdFlakes.length;i++){
if(tcdFlakes[i].y>tcH+500){tcdFlakes[i].y=tiRand(-tcH,0);tcdFlakes[i].x=Math.random()*tcW;}
}
}
tcSpawnWasOn=tcSpawnOn;
}
function tcdStep(now){
if(!tiRun) return;
tcApplyGate();
const tcDt=Math.min(0.034,(now-tcdLast)/1000);
tcdLast=now;
tiCx.clearRect(0,0,tcW,tcH);
const tcdWind=14;
for(let i=0;i<tcdFlakes.length;i++){
const tcF=tcdFlakes[i];
tcF.p+=tcDt*tcF.w;
tcF.y+=tcF.v*tcDt;
tcF.x+=Math.sin(tcF.p)*tcdWind*tcDt;
if(tcF.y>tcH+30){
if(tcSpawnOn){tcF.y=tiRand(-80,-10);tcF.x=Math.random()*tcW;}
else{tcF.y=tcH+9999;}
}
if(tcF.x<-30) tcF.x=tcW+30;
if(tcF.x>tcW+30) tcF.x=-30;
if(tcF.y<=tcH+50){
tiCx.globalAlpha=tcF.o;
tiCx.fillStyle=tcF.c;
if(tcDotMode){
tiCx.beginPath();
tiCx.arc(tcF.x,tcF.y,tcF.s*0.28,0,Math.PI*2);
tiCx.fill();
}else{
tiCx.font=tcF.s+"px system-ui,Segoe UI,Apple Color Emoji,Noto Color Emoji";
tiCx.fillText(tcF.t,tcF.x,tcF.y);
}
}
}
requestAnimationFrame(tcdStep);
}
function tcStop(){tiRun=0}
function tiStart(){if(tiRun) return; tiRun=1; tcdLast=performance.now(); requestAnimationFrame(tcdStep)}
window.addEventListener("resize",function(){
if(window.innerWidth<320){tcStop();tiCx.clearRect(0,0,tcW,tcH);return;}
const tcNewW=window.innerWidth;
const tcWidthChanged=Math.abs(tcNewW-tcLastW)>1;
if(!tcWidthChanged){TildatcResize();return;}
tcLastW=tcNewW;
tcGateH=window.innerHeight;
TildatcResize(); tcFill(); tcApplyGate();
},{passive:true});
document.addEventListener("visibilitychange",function(){document.hidden?tcStop():tiStart()});
window.addEventListener("pagehide",tcStop);
TildatcResize();
tcFill();
tcApplyGate();
requestAnimationFrame(tcdStep);
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Настраиваем анимацию снега в генераторе кода
Количество частиц — сколько снежинок может быть на экране одновременно. Оптимально 40–60. Рабочий диапазон 20–100. Можно ставить и больше 100, но нагрузка будет выше. На мобилках количество снежинок автоматически уменьшается в 2 раза от заданного значения.
Поддержка мобилок — если выключить, анимация будет работать только на десктопах.
Цвет частиц — указываем цвет для символов. Можно указать несколько цветов через запятую, тогда каждый раз цвет снежинки выбирается случайно из списка.
Режим проигрывания — если выбрать «первый блок», снег показывается только пока пользователь находится на первом экране. При прокрутке ниже, новые снежинки не появляются, а при возврате к шапке эффект снова включается. Удобно, если хочешь создать новогоднее настроение, но не отвлекать пользователя от контента дальше по странице.
Тип частиц— можно задать свой набор символов (через запятую), они будут выпадать в случайном порядке. Если выбрать режим «круги», вместо символов рисуются круглые частицы — это легче для браузера, полезно для тяжёлых страниц. В режиме «символы» также можно писать слова вместо символов, разделяя запятыми или комбинировать символы и слова. Например: ❄,merry christmas,❆
2. Копируем готовый код и вставляем в HTML блок T123.
Количество частиц — сколько снежинок может быть на экране одновременно. Оптимально 40–60. Рабочий диапазон 20–100. Можно ставить и больше 100, но нагрузка будет выше. На мобилках количество снежинок автоматически уменьшается в 2 раза от заданного значения.
Поддержка мобилок — если выключить, анимация будет работать только на десктопах.
Цвет частиц — указываем цвет для символов. Можно указать несколько цветов через запятую, тогда каждый раз цвет снежинки выбирается случайно из списка.
Режим проигрывания — если выбрать «первый блок», снег показывается только пока пользователь находится на первом экране. При прокрутке ниже, новые снежинки не появляются, а при возврате к шапке эффект снова включается. Удобно, если хочешь создать новогоднее настроение, но не отвлекать пользователя от контента дальше по странице.
Тип частиц— можно задать свой набор символов (через запятую), они будут выпадать в случайном порядке. Если выбрать режим «круги», вместо символов рисуются круглые частицы — это легче для браузера, полезно для тяжёлых страниц. В режиме «символы» также можно писать слова вместо символов, разделяя запятыми или комбинировать символы и слова. Например: ❄,merry christmas,❆
2. Копируем готовый код и вставляем в HTML блок T123.
