https://github.com/irina-anat/goit-markup-hw-05

Позиціонована елементи. Переходи та анімація
https://github.com/irina-anat/goit-markup-hw-05

after-effects animation-css backdrop cubic-bezier modal-window overlay

Last synced: 3 months ago
JSON representation

Позиціонована елементи. Переходи та анімація

• Host: GitHub
• URL: https://github.com/irina-anat/goit-markup-hw-05
• Owner: Irina-anat
• Created: 2022-12-11T11:38:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-25T10:39:57.000Z (over 1 year ago)
• Last Synced: 2025-01-07T12:22:29.863Z (4 months ago)
• Topics: after-effects, animation-css, backdrop, cubic-bezier, modal-window, overlay
• Language: HTML
• Homepage: https://irina-anat.github.io/goit-markup-hw-05/
• Size: 2.22 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
* Створи репозиторій goit-markup-hw-05.

* Склонуй створений репозиторій і скопіюй в нього файли попередньої роботи.

* Додай анімацію декоративних ефектів для сторінок макета домашнього завдання #5.

* Налаштуй GitHub Pages і додай посилання на живу сторінку в шапку GitHub-репозиторія.

  

## Критерії приймання роботи наставником

## Проект

**«A1»** Всі стилі написані в одному файлі styles.css, який знаходиться в папці css.

**«A2»** Вихідний код відформатований за допомогою Prettier.

**«A3»** Всі зображення та текстовий контент взяті з макета.

**«A4»** На всіх HTML-сторінках підключений нормалізатор стилів modern-normalize.

**«A5»** Код написаний з дотриманням настанови.

**«A6»** Скрипт модального вікна підключений в HTML окремим файлом modal.js.

## Розмітка

**«B1»** Виконана HTML-розмітка всіх елементів макету.

**«B2»** Теги використані відповідно до їх семантичного змісту.

## Оформлення

**«C1»** Для всіх ефектів ховер і фокуса (колір, фон, тінь) зроблені переходи. Час - 250ms, функція розподілу часу - cubic-bezier(0.4, 0, 0.2, 1).

**«C2»** У переходах та анімаціях явно зазначені анімовані властивості. Ніде немає значення all.

**«C3»** В секції Чим ми займаємось текст з фоном спозиційований поверх зображення.

**«C4»** В головній навігації, за допомогою псевдоелемента ::after, зроблено підкреслення посилання поточної сторінки (на якій зараз знаходиться користувач).

**«C5»** Синій оверлей з текстом на картках сторінки Портфоліо з'являється при ховері в будь-якому місці картки.

**«C6»** Синій оверлей в картках сторінки Портфоліо виїжджає знизу

**«C7»** У псевдоелементів відсутній текстовий контент у властивості content. Вони використані виключно для декоративного оформлення.

## Модальне вікно

**«D1»** Виконана розмітка і оформлення «бекдропа» (темного напівпрозорого фону) модального вікна.

**«D2»** «Бекдроп» заповнює 100% висоти і ширини в'юпорту браузера і фіксований в ньому.

**«D3»** Виконана розмітка і оформлення модального вікна.

**«D4»** Модальне вікно вертикально і горизонтально спозиційоване посередині бекдропа.

**«D5»** Виконана розмітка і оформлення кнопки закриття модального вікна у верхньому правому куті.

**«D6»** Спочатку модальне вікно і бекдроп приховані за допомогою класу is-hidden на бекдропі, в селекторі якого використовуються властивості visibility, opacity і pointer-events.

**«D7»** Якщо прибрати з бекдропа клас is-hidden - з'являється бекдроп і модальне вікно.

**«D8»** Поява і приховування модального вікна анімовано за допомогою переходу з довільним ефектом, наприклад scale або translate, і opacity.

## Відкриття/закриття модального вікна

Модальне вікно з формою заявки відкривається по натисканню на кнопку "Замовити послугу". Для того щоб скрипт спрацював, необхідно додати до розмітки спеціальні атрибути, за якими скрипт шукає елементи:

* data-modal-open - на кнопку відкриття модального вікна.

* data-modal-close - на кнопку закриття модального вікна.

* data-modal - на бекдроп модального вікна.

  

Після чого, перед закриваючим тегом body додати тег script з посиланням на файл скрипту для модально вікна. Можна подивитися відео-інструкцію.

< body>

  

  

  < script src="./js/modal.js">>

>

Скрипт, який необхідно скопіювати і вставити у файл modal.js.

(() => {

  const refs = {

    openModalBtn: document.querySelector("[data-modal-open]"),

    closeModalBtn: document.querySelector("[data-modal-close]"),

    modal: document.querySelector("[data-modal]"),

  };

  refs.openModalBtn.addEventListener("click", toggleModal);

  refs.closeModalBtn.addEventListener("click", toggleModal);

  function toggleModal() {

    refs.modal.classList.toggle("is-hidden");

  }

})();