jquery (23)

Простий спосіб додавання CSS анімації до переходів між сторінками

Радий з вами поділитися цікавим та дуже простим jQuery плагіном Аnimsition. Animsition дає можливість додавати до посилань CSS анімацію при переході. Animsition має 18 різних анімацій: Зникнення `fade-in, fade-out, fade-in-up, fade-out-up, fade-in-do...

Codeguida · 03 червня 2020 · 52

Зміна SVG іконок

Метод №1: сховати/показати SVG елемент Включаємо обидві іконки: <a class="expand-link" href="#0"> <svg class="icon icon-expand" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg> <svg class="icon icon-contract" viewBox="0...

Codeguida · 15 липня 2020 · 44

Гід по оптимізації веб-сторінок та додатків

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

Codeguida · 27 червня 2021 · 38

jQuery для чайників ч.1 - типи даних та селектори

Вирішили спробувати себе у front-end розробці? Подобається Вам це чи ні, але знання JavaScript або jQuery \- основа для кожного фронтендера. Настав час дізнатися, як це працює і почати створювати інтерактивні веб-сайти. Цей пост розповість Вам про вс...

Codeguida · 06 жовтня 2020 · 35

Показ YouTube відео вбудованого за допомогою iframe в модальному вікні

Показ YouTube відео вбудованого за допомогою iframe в модальному вікні Нам, звісно ж, потрібна буде бібліотека jQuery і, оскільки модальні вікна ми самі робити не будемо бо ліниві, то візьмемо додаток до jQuery спеціально для цього створений. fancyBo...

Codeguida · 3 роки тому · 29

Адаптивне меню з допомогою CSS3 та jQuery

В цьому уроці ми створимо адаптивне меню за допомогою CSS3 і JQuery. Ось як це виглядатиме (перейдіть на Codepen та пограйтеся з шириною сторінки): {full-post-img} HTML Ми обертаємо все в nav елемент з класом nav-bar. Далі створюємо div з класом nav...

Codeguida · 27 грудня 2021 · 22

Скрол-анімація за допомогою JQuery

Що таке скрол-анімація та ефекти? Скрол-анімація та ефекти - це нова, але вже добре знана техніка, яка дає front-end розробникам можливість створювати гарні інтерактивні веб-інтерфейси. Щоб розпізнати, коли користувач прокручує сторінку, ми використо...

Codeguida · 10 серпня 2020 · 20

jQuery для чайників ч.4 - функції

В першій статті, ми почали розглядати основи jQuery - типи даних і селектори; Далі, ми дізналися про події jQuery; В минулій статті, ми навчилися оброблювати помилки; Сьогодні, ми поговоримо про: Як запустити функцію; Як передати дані в функцію; Як...

Codeguida · 29 квітня 2021 · 17

Керівництво по Fetch – зручний заміні XMLHttpRequest

Кожен раз, коли ми отримуємо або відправляємо дані за допомогою JavaScript, ми використовуємо Ajax. Ajax — це технологія, що дозволяє виконувати HTTP-запити без необхідності перезавантажувати сторінку. Зауважте, що для прикладів ми будемо використову...

Codeguida · 6 років тому · 14

Динамічні географічні карти з SVG і JQuery

Створюємо SVG мапу в Illustrator Створимо мапу Італії в Illustrator: Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовуваному в базі даних, щоб ідентифікувати відповідні...

Codeguida · 3 роки тому · 11

Використовуємо jQuery правильно

Завантаження з CDN Замість того, щоб зберігати jQuery на Вашому сервері, краще завантажувати бібліотеку з популярних CDN. Це дозволить зменшити час завантаження сторінки. <script src="/vendor/jquery/jquery.min.js"></script> <script src="//aj...

Codeguida · 13 січня 2021 · 10

jQuery для чайників ч.2 - події

В минулій статті, ми почали розгляд основ jQuery, навчилися визначати типи даних та працювати з селекторами. Проте, вміти вибирати елементи на сторінці - це дуже добре, але ще краще - знати як з ними працювати. Сьогодні ми розглянемо саме цей аспект....

Codeguida · 20 січня 2020 · 10