Сьогодні гуляючи по просторах інтернету мені зустрілася цікава реалізація повноекранного модального вікна, яке було створено за допомогою елементів SVG і JS, і я не зміг втриматися щоб не поділиться красивим анімованим спливаючим вікном з вами.
Це дуже просте але в той же час надзвичайно красиве модальне вікно, а графіка SVG в даний час стрімко набирає обертів серед веб розробників, модальне вікно з анімованим фоном з використанням сучасних технологій які зараз дозволяють створювати для будь-якого сайту чи інтернет магазину приголомшливі ефекти. Плюс присутня повна підтримка IE9 +.
Ми вже давно експериментуємо з анімацією SVG і сьогодні в даній статті на прикладі створення сучасного спливаючого вікна ми розповімо вам як можна анімувати відразу кілька шляхів SVG, і зробити дивовижно стильний фоновий ефект для модального вікна.
Для чого потрібен скрипт модального вікна запитаєте Ви? - Ну як же! Ви напевно не раз бачили як на різних сайтах дані вікна застосовуються, хтось використовує сучасні спливаючі вікна для того щоб прийняти заявку на будь-яке замовлення на сайті, комусь модальне вікно служить для того щоб приховати якийсь громіздкий контент який буде відкриватися при натисканні кнопки, деякі використовують модуль спливаючого вікна для того щоб надати користувачеві якусь важливу інформацію, загалом мета використання модальних вікон у кожного сайту своя, але вони дуже затребувані практично на будь-якому сайті.
Я вже колись писав багато статтей на тему спливаючих вікон з деякими ви можете ознайомитись на нашому сайті тут, але сьогодні ми вивчимо абсолютно новий підхід до створення модального вікна, яке буде відкриватися так само при натисканні кнопки і буде приховувати повністю задній фон сайту, тим самим дозволить повністю сконцентрувати увагу користувача на надану йому інформацію, при цьому модальне вікно має красиву плавну анимацію.
Як завжди скачати готове модальне вікно ви можете на нашому сайті під цією статтею, там же ви зможете подивитися наш приклад модального вікно з анімованим фоном, який ми зараз і вивчимо. Ну що ж давайте ми відступимо від теорії і приступимо до практики, створимо сучасне модальне вікно для вашого сайту.
Перший крок з якого ми почнемо створення спливаючого вікна це буде HTML розмітка, яка має дуже просту структуру, і складається з двох основних елементів <section>, дія для обгортки самої кнопки #modal-trigger, блок div.cd-modal тобто саме модальне вікно, блок контенту .cd-modal-content модального вікна, ну і послідне це div.cd-svg-bg, який і буде створювати ефект покриття фону.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<main class="cd-main-content"> <section class="center"> <h1>SVG Модальне вікно</h1> <a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Кнопка модального вікна</a> </section> </main> <!-- .cd-main-content --> <div class="cd-modal" data-modal="modal-trigger"> <div class="cd-svg-bg" data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z"> <svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500"> <title>SVG Modal background</title> <path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/> <path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/> <path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/> </svg> </div> <div class="cd-modal-content"> <!-- modal content here --> </div> <!-- cd-modal-content --> <a href="#0" class="modal-close">Close</a> </div> <!-- cd-modal --> <div class="cd-cover-layer"></div> <!-- .cd-cover-layer --> |
Наступним нашим кроком буде додавання стилів для нашого вікна, початкове значення в .cd-modal visibility: hidden; position: fixed; height: 100%; і width: 100%;, а при виклику дії кнопки модального вікна тобто при натисканні на a # modal-trigger змінюється видимість вікна з прихованого на видиме положення .modal-is-visible.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.cd-modal { position: fixed; z-index: 2; top: 0; left: 0; height: 100%; width: 100%; visibility: hidden; transition: visibility 0s 0.6s; } .cd-modal.modal-is-visible { visibility: visible; transition: visibility 0s 0s; } .cd-cover-layer { position: fixed; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: #f2f2f2; visibility: hidden; opacity: 0; transition: opacity 0.3s 0.3s, visibility 0s 0.6s; } .cd-cover-layer.modal-is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s 0s, visibility 0s 0s; } .cd-modal-content { color: #f2f2f2; opacity: 0; transform: translateY(50px); transition: opacity 0.3s 0s, transform 0.3s 0s; } .modal-is-visible .cd-modal-content { opacity: 1; transform: translateY(0); transition: opacity 0.3s 0.3s, transform 0.3s 0.3s; } |
Зі стилями закінчили, тепер залишився останній пункт це нам потрібно підключити обробник JS щоб наше спливаюче вікно працювало.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
modalTrigger.on('click', function(event){ //modalTrigger = $('a[data-type="cd-modal-trigger"]') event.preventDefault(); $([modal.get(0), coverLayer.get(0)]).addClass('modal-is-visible'); //modal = $('.cd-modal'), coverLayer = $('.cd-cover-layer') animateModal(pathsArray, pathSteps, duration, 'open'); }); function animateModal(paths, pathSteps, duration, animationType) { var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0], // pathSteps[n] = $('.cd-svg-bg').data('step'+(n+1)); path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2], path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4]; paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation); //paths[0] = Snap('#cd-changing-path-1') paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation); //paths[1] = Snap('#cd-changing-path-2') paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation); //paths[2] = Snap('#cd-changing-path-3') } |
Ось власне і все, ми створили приклад гарної форми спливаючого вікна і тепер ви можете успішно підключити модальне вікно на свій сайт. Що ще можна тут сказати користуйтеся на здоров'я, а я буду радий якщо дана реалізація спливаючого вікна комусь буде корисною.
Також ви можете скачати готове повноекранне модальне вікно нижче.
Немає коментарів
Ви можете залишити коментар першим.