Анімована заглушка «Sorry, your browser doesn't support WebGL»

Вітаю тебе читач. Сьогодні я хочу розповісти про свій досвід створення заглушки з помилкою «Sorry, your browser doesn't support WebGL». Цю заглушку я придумав, працюючи над одним із своїх компонентів, де я використовував технологію WebGL.

WebGL добре працює в основних сучасних десктопних браузерах, але в мобільному інтернеті справи не так гарні. Тому, для обробки помилки я використовував виклик діалогового повідомлення — alert. Погодьтеся, що це не дуже елегантне рішення. Тому й прийшла ідея зробити гарне повідомлення про помилку.

Реалізація фону

Для початку реалізації нам потрібно створити тег div з класом demo-smile, який буде служити обгорткою для нашої заглушки.

<div class="demo-smile"></div>


Тепер нам треба розтягти цей елемент на весь viewport браузера. Для цього ми будемо використовувати властивість width зі значенням 100% і властивість height зі значенням 100vh.

.demo-smile{
width: 100%;
height: 100vh;
}


Далі встановимо колір фону за допомогою властивості background-color.

.demo-smile{
width: 100%;
height: 100vh;
background: #32bfd3;
}


В результаті в браузері ми побачимо.



Реалізація смайлика

Реалізовувати смайлик ми будемо за допомогою кола. Для цього додамо всередину demo-smile тег div з класом sad-smile.

<div class="demo-smile">
<div class="sad-smile"></div>
</div>


Для створення кола за допомогою CSS нам потрібно зробити квадрат і, використовуючи border-radius: 50%, закруглити у нього кути.

.sad-smile{
width: 250px;
height: 250px;
border-radius: 50%;
}


Тепер закрасимо коло за допомогою лінійного градієнта, а також додамо внутрішню тінь для більшої реалістичності.

.sad-smile{

width: 250px;
height: 250px;
border-radius: 50%;

background: linear-gradient(to bottom, #efee5f, #ecc837);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}




Розташуємо наш майбутній смайлик по центру. Для вирішення цієї задачі нам допоможуть флексбоксы. Додамо до елемента demo-smile властивості display зі значенням flex, justify-content зі значенням center align-items зі значенням center.

.demo-smile{

width: 100%;
height: 100vh;
background: #32bfd3;

display: flex;
align-items: center;
justify-content: center; 
}




Голова у нас готова! Далі ми додамо очі. Для цього нам потрібно створити два тега div з класом sad-smile__eyes. Потім для лівого ока додамо клас sad-smile__lefteye, а для правого — sad-smile__righteye.

<div class="demo-smile">
<div class="sad-smile">
<div class="sad-smile__sad eyes-smile__lefteye"></div>
<div class="sad-smile__sad eyes-smile__righteye"></div>
</div>
</div>


Для позиціонування елементів ми будемо використовувати position: absolute, тому елементу sad-smile потрібно додати position: relative.

.sad-smile{

width: 250px;
height: 250px;

position: relative;
border-radius: 50%;

background: linear-gradient(to bottom, #efee5f, #ecc837);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}


Після цього встановимо для наших очей розміри, заллємо їх білим фоном, зробимо чорну підводку і закругливши верхній лівий і правий верхній кут.

.sad-smile__eyes{

background-color: #fff;
border: 8px solid #000;
border-radius: 50% 50% 0 0;

height: 20%;
width: 20%;
}


Тепер потрібно розташувати очі. Ліве око буде позиціонуватися щодо лівого верхнього кута елемента sad-smile, а праве око щодо правого верхнього кута.

.sad-smile__eyes{

position: absolute;
top: 13.3%;

background-color: #fff;
border: 8px solid #000;
border-radius: 50% 50% 0 0;

height: 20%;
width: 20%;
}

.sad-smile__lefteye{
left: 20%;
}

.sad-smile__righteye{
right: 20%;
}




Далі потрібно додати зіниці у вигляді кружечків. Реалізовувати ми їх будемо, використовуючи псевдоэлемент :after. Також, їх потрібно розташувати у лівому нижньому куті щодо елемента sad-smile__eyes.

.sad-smile__eyes:after{

content: "";
display: block;
background-color: #000;

position: absolute;
left:0;
bottom: 0;

width: 41.7%;
height: 41.7%;
border-radius: 50%; 
}




Тепер ми додамо нашому смайли брови. Для цього використовуємо псевдоэлемент :before і властивості width, height і border-radius. З допомогою width і height ми створимо прямокутники, а border-radius допоможе нам заокруглені кути.

.sad-smile__eyes:before{

content: "";
display: block;
position: absolute;
background-color: #000;

border-radius: 100% 100% 0 0;
height: 13.3%;
width: 66.7%;

right: 16.7%;
top: -33.3%;
}




Ми майже закінчили. Нам залишилося тільки додати рот. Для його реалізації ми додати div з класом sad-smile__mouth.

<div class="demo-smile">
<div class="sad-smile">
<div class="sad-smile__sad eyes-smile__lefteye"></div>
<div class="sad-smile__sad eyes-smile__righteye"></div>
<div class="sad-smile__mouth"></div>
</div>
</div>


Задамо розміри елементу і встановимо властивість border. Також отцентрируем і його притиснемо до низу елемента sad-smile.

.sad-smile__mouth{

width: 66.7%;
height: 30%;

border-bottom: 7px solid #222;
border-right: 7px solid transparent;
border-left: 7px solid transparent;

position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, 0);
}




Для створення дуги залишилося додати border-radius: 50%.

.sad-smile__mouth{

width: 66.7%;
height: 30%;

border-bottom: 7px solid #222;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-radius: 50%;

position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, 0);
}




А тепер ми зробимо сумний смайлик, додавши rotateX(180deg) до властивості transform.

.sad-smile__mouth{

width: 66.7%;
height: 30%;

border-bottom: 7px solid #222;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-radius: 50%;

position: absolute;
bottom: 5%;
left: 50%;
transform: rotateX(180deg) translate(-50%, 0);
}




Наш смайлик готовий!

Реалізація сліз

Для початку реалізації сліз створимо в елементах sad-smile__eyes по одному тегу div з класом sad-smile__tear.

<div class="demo-smile">
<div class="sad-smile">
<div class="sad-smile__sad eyes-smile__lefteye">
<div class="sad-smile__tear"></div>
</div>
<div class="sad-smile__sad eyes-smile__righteye">
<div class="sad-smile__tear"></div>
</div>
<div class="sad-smile__mouth"></div>
</div>
</div>


Так як сльози мають трикутну форму, реалізовувати ми їх буде за допомогою рівнобедреного CSS трикутника. Для цього потрібно обнулити геометричні розміри елементів з класом sad-smile__tear і задати їм властивості border-left, border-right і border-bottom. Важливим моментом є те, що значення властивості border-bottom повинно бути в 3 рази більше, ніж border-left border-right.

.sad-smile__tear{

position: absolute;
top: 50%;
left: 0%;
z-index: 2;

width: 0;
height: 0;

border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 24px solid #1ca5e2;

transform: translateZ(0) translate(0, 0);
}




І додамо border-radius: 50%.

.sad-smile__tear{

position: absolute;
top: 50%;
left: 0%;
z-index: 2;

width: 0;
height: 0;

border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 24px solid #1ca5e2;
border-radius: 50%

transform: translateZ(0) translate(0, 0);
}




Анімація для сліз

Для початку реалізації анімації потрібно приховати сльози, тому потрібно видалити z-index, додати opacity: 0 і scale(0) у класі sad-smile__tear.

.sad-smile__tear{

position: absolute;
top: 50%;
left: 0%;

width: 0;
height: 0;
opacity: 0;

border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 24px solid #1ca5e2;
border-radius: 50%;

transform: translateZ(0) translate(0, 0) scale(0);
}


Далі напишемо сценарій анімації.

@keyframes animation-tear{

5%{
opacity: 1;
}

10%{
transform: translateZ(0) translate(0, 25px) scale(1);
}

100%{
transform: translateZ(0) translate(0, 125px) scale(1);
}

} 


І додамо в селекторі sad-smile__tear виклик анімації.

.sad-smile__tear{

position: absolute;
top: 50%;
left: 0%;

width: 0;
height: 0;
opacity: 0;

border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 24px solid #1ca5e2;
border-radius: 50%;

transform: translateZ(0) translate(0, 0) scale(0);
animation: animation-tear 2.5 s cubic-bezier(0.63, 0.49, 1,-0.15) .2s infinite;
}


Важливо відзначити, що для створення тимчасової функції я використовував інструменти devTools браузера Google Chrome.



Також нам потрібно додати затримку в 1 секунду для правої сльозинки.

.sad-smile__righteye .sad-smile__tear{
animation-delay: 1s;
}




Реалізація повідомлення

Для реалізації повідомлення нам потрібно створити тег span з текстом «Sorry, your browser doesn't support WebGL» і додати йому клас demo-smile__label.

<div class="demo-smile">
<div class="sad-smile">
<div class="sad-smile__sad eyes-smile__lefteye">
<div class="sad-smile__tear"></div>
</div>
<div class="sad-smile__sad eyes-smile__righteye">
<div class="sad-smile__tear"></div>
</div>
<div class="sad-smile__mouth"></div>
</div>
<span class="demo-smile__label"> Sorry, your browser doesn't support WebGL</span>
</div>


Далі стилізуємо повідомлення.

.demo-smile__label{
margin-left: 20px;
font-size: 30px;
font-family: arial;
color: #fff;
}




Висновок

У цій статті я хотів показати вам, що створити оригінальну анімацію не дуже складне завдання. Тому мені особисто хотілося б стимулювати вас на створення таких візуальних ефектів.

PS: Якщо вам сподобалася моя робота, то ставте лайки та підписуйтесь на мої новини на сайті codepen.io.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.