Анімоване SVG модальне вікно
✭ Повноекранне SVG модальне вікно ✭
Створення, розробка, виготовлення сайтів | WEB-STYDIA.COM

5/51 rating

Сьогодні гуляючи по просторах інтернету мені зустрілася цікава реалізація повноекранного модального вікна, яке було створено за допомогою елементів SVG і JS, і я не зміг втриматися щоб не поділиться красивим анімованим спливаючим вікном з вами.

Це дуже просте але в той же час надзвичайно красиве модальне вікно, а графіка SVG в даний час стрімко набирає обертів серед веб розробників, модальне вікно з анімованим фоном з використанням сучасних технологій які зараз дозволяють створювати для будь-якого сайту чи інтернет магазину приголомшливі ефекти. Плюс присутня повна підтримка IE9 +.

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

Для чого потрібен скрипт модального вікна запитаєте Ви? - Ну як же! Ви напевно не раз бачили як на різних сайтах дані вікна застосовуються, хтось використовує сучасні спливаючі вікна для того щоб прийняти заявку на будь-яке замовлення на сайті, комусь модальне вікно служить для того щоб приховати якийсь громіздкий контент який буде відкриватися при натисканні кнопки, деякі використовують модуль спливаючого вікна для того щоб надати користувачеві якусь важливу інформацію, загалом мета використання модальних вікон у кожного сайту своя, але вони дуже затребувані практично на будь-якому сайті.

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

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

Перший крок з якого ми почнемо створення спливаючого вікна це буде HTML розмітка, яка має дуже просту структуру, і складається з двох основних елементів <section>, дія для обгортки самої кнопки #modal-trigger, блок div.cd-modal тобто саме модальне вікно, блок контенту .cd-modal-content модального вікна, ну і послідне це div.cd-svg-bg, який і буде створювати ефект покриття фону.

Тут також було використання додатково шар div.cd-cover-layer який призначений для покриття основного вмісту в момент відкриття анімованого спливаючого вікна.

Наступним нашим кроком буде додавання стилів для нашого вікна, початкове значення в .cd-modal visibility: hidden; position: fixed; height: 100%; і width: 100%;, а при виклику дії кнопки модального вікна тобто при натисканні на a # modal-trigger змінюється видимість вікна з прихованого на видиме положення .modal-is-visible.

У зв'язку з тим що колір блоку .cd-modal-content однаковий з блоком фону .cd-cover-layer , основним відображуваним контентом буде той, який знаходиться на зеленому тлі svg , в той час як .cd-cover-layer буде приховано.
Зі стилями закінчили, тепер залишився останній пункт це нам потрібно підключити обробник JS щоб наше спливаюче вікно працювало.

Ось власне і все, ми створили приклад гарної форми спливаючого вікна і тепер ви можете успішно підключити модальне вікно на свій сайт. Що ще можна тут сказати користуйтеся на здоров'я, а я буду радий якщо дана реалізація спливаючого вікна комусь буде корисною.

Подивитися живий приклад

Також ви можете скачати готове повноекранне модальне вікно нижче.

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.