За добро или лошо, Apple са доказали влиянието си както върху уеб дизайна, така и върху хардуерни решения при смартфони, таблети, умни часовници – you name it.
Като наблюдател (е добре де, и потребител) съм забелязала каква крива следва всеки техен disruptive анонс – в началото е смут, отричане, насмешка. После минаваме през „хмм, това май работи“ фазата, и накрая стигаме до масова употреба и пресъздаване (копиране?) от други брандове.
Спокойно, спокойно, няма да се правя на хроникьор, нито пък на аналитик. Започнах този „урок“ с малко лирично отконение, чиято същина е – всички не харесваме liquid glass ефекта сега, но съвсем скоро ще го виждаме навсякъде и под всякаква форма (опитай да ме разубедиш в коментарите).
Затова и днес реших да ти споделя JS библиотека, на която попаднах, с която създаването на liquid glass ефект е… е не детска игра, но почти.
Запознай се с LiquidGL
LiquidGL* е библиотека, която създава в браузъра ефект, подобен на въпросния „liquid glass“ ефектът на Apple, използвайки много лек WebGL шейдър. Поради съображения за сигурност, WebGL не може да чете картината на страницата в реално време. Затова библиотеката прави една снимка (snapshot) на цялата страница с високо качество, когато стартираш LiquidGL(). По този начин върви гладко и бързо, но означава, че ефектът не може да променя или пречупва видео или анимации (динамична медия), които се движат след това.
Иначе казано – можеш да имаш видео и анимации на страницата, но те няма да се отразяват през ефекта в реално време.
WebGL е технология, която позволява на браузъра да показва 3D графика и сложни визуални ефекти директно в уеб страниците, използвайки видеокартата на компютъра. Това прави възможни красиви и плавни анимации без да е нужна външна програма или плъгин.
* LiquidGL е разработен от уеб студио NaughtyDuk, което се специализира в създаването на иновативни уеб ефекти и визуални решения.
Как да използваш LiquidGL
Преди да започнем, може да си клонираш или свалиш това GitHub repository, което съм създала специално за целите на това демо.
Първо, трябва ти HTML елемент, който да бъде фикциран (position: fixed;) спрямо browser прозореца. В него пък ще имаш друг елемент, който ще има liquid glass ефектa. В моят случай това е div с клас liquid:
<!-- fixed container with liquid glass effect -->
<div class="fixed-container">
<div class="liquid">
<!-- container's content -->
<div class="content">
<!-- add some content here -->
</div>
</div>
</div>Добави файлът на библиотеката – liquidGL.js в проекта си, заедно с html2canvas.js – използваме html2canvas за вземане snapshot на страницата.
Следващата стъпка е да инициализираш LiquidGL():
function initializeLiquidGL() {
glassEffect = LiquidGL({
snapshot: "body",
target: ".liquid",
refraction: 0.01,
bevelDepth: 0.01,
bevelWidth: 0.10,
frost: 8,
shadow: true,
specular: true,
reveal: "fade",
});
}
let glassEffect;
document.addEventListener("DOMContentLoaded", () => {
initializeLiquidGL();
});С малко CSS може да стилизираш елементите във фиксирания контейнер, както и самия него:
/* liquid glass element */
.fixed-container {
position: fixed;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.liquid {
border-radius: 30px;
overflow: hidden;
position: relative;
padding: 20px 100px;
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}Демо на всичко показано горе, а също и как изглежда liquidGL в живия живот, може да видиш тук – https://devblondie.com/liquidgl-demo/
Добре е да знаеш за liquidGL
Ето и няколко важни акцента при употребата на liquidGL:
- Liquid glass ефектът не се прилага над анимирани елементи и видеа
- Трябва да внимаваш за по-сложни интеракции и анимации – завъртането и мащабирането са ресурсоемки процеси за CPU/GPU. Освен това, ефекти като сенки, отблясъци и наклон трябва да се използват внимателно, особено когато имаш много елементи или сложни анимации, тъй като могат да натоварят сериозно рендериращата система.
- Библиотеката се поддържа от всички браузъри (последни версии)
- Liquid glass ефектът работи и на мобилни устройства
- Можеш да имаш повече от един liquid glass елемент
Последни думи
Liquid glass ефектът е интересен и по своему познат (т.нар. glassmorphism). Убедена съм, че скоро ще го виждаме в много уеб и native app решения. И точно тук искам да отбележа личните си раздъждения по темата.
Вече все по-често (за щастие) говорим за уеб достъпност и генерално – за по-добро боравене със съдържанието. В 2025-та всеки от нас иска да получи добре структурирана на вид информация – лесно и бързо. Всеки опит да направим нещата по-модерни и в крак с последните новости при технологиите, би резултирал в намаляване на това желание (и очакване).
Затова, апел към дизайнерите – използвайте liquid glass, но винаги с едно на ум за крайния потребител и това до каква степен този ефект ще подобри преживяването му.
А към колегите разработчици – не се тревожете, на всеки час някъде по света се ражда по една JavaScript библиотека и съм сигурна, че LiquidGL ще има много конкуренция съвсем скоро.
Stay blond
