https://github.com/notacat1/website-about-john-wick
https://github.com/notacat1/website-about-john-wick
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/notacat1/website-about-john-wick
- Owner: NotACat1
- Created: 2023-05-14T09:44:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-14T19:26:09.000Z (about 3 years ago)
- Last Synced: 2025-02-28T21:27:15.140Z (over 1 year ago)
- Language: HTML
- Size: 40.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Вебсайт о Джоне Уике
Данный веб сайт был создан, для пробы творческого пера как UIX дизайнера и WEB программиста. Но а также искренней любви франшизы Джона Уика.
____
## Реализованный функционал:
### 1. Favicon
**Favicon** — это иконка, которая отображается во вкладке браузера перед названием сайта.
```html
```
### 2. Open Graph
**Open Graph** — это интернет-протокол, который был создан Facebook, чтобы стандартизировать использование мета-данных, представляющих содержимое веб-страницы.
```html
```
### 3. Адаптивная верстка
**Адаптивная верстка** — это такой способ создания веб-страниц, при котором они автоматически подстраиваются под размеры и ориентацию экрана устройства, а их дизайн варьируется в зависимости от действий пользователя.
### 4. Адаптивный текст
**Адаптивный или отзывчивый шрифт** — это такой способ задания размера текста, при котором размер текста изменяется в зависимости от пропорций размера экрана.
```css
/* Добавление локальных перменных */
.page {
--index: calc(1vh + 1vw);
--text-factor: 1;
}
/* Экран уже 1199px */
@media screen and (max-width: 1199px) {
.page {
--text-factor: 1.5;
}
}
/* Экран шире 1200px */
@media screen and (min-width: 1200px) {
.page {
--text-factor: 1;
}
}
/* Задания размера текста */
.header__title {
font-size: calc(var(--index) * 2.6 * var(--text-factor));
}
```
### 5. Прелоадер
**Прелоадер** (от англ."preloader") - предварительный загрузчик, особый индикатор, который информирует пользователя о том, что страница или контент находятся в процессе загрузки.
```html
Loading...
Loading...
```
```css
.PreloaderBlock {
position: fixed;
top: 0;
left: 0;
height: 130vh;
padding-bottom: 30vh;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
.PreloaderBlock__text {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: #d8d8d8;
font-size: calc(var(--index) * 3 * var(--text-factor));
font-weight: 700;
margin-bottom: 0;
}
.PreloaderBlock__text_transparent {
position: absolute;
top: 0;
left: 0;
background-color: #000;
font-size: calc(var(--index) * 3 * var(--text-factor));
font-weight: 700;
width: 0;
z-index: 50000;
}
.PreloaderBlock__Preloader {
width: calc(var(--index) * 25);
height: calc(var(--index) * 25);;
display: flex;
justify-content: center;
align-items: center;
border: #000 calc(var(--index) * .5 * var(--text-factor)) solid;
background-color: white;
}
.PreloaderBlock__BoxText {
position: relative;
}
```
```js
let tl = gsap.timeline();
function ready() {
tl.to(".PreloaderBlock__text_transparent", { duration: 1, width: "100%", repeat: -1, yoyo: true });
}
document.addEventListener("DOMContentLoaded", ready);
let t2 = gsap.timeline();
window.onload = function() {
tl.pause();
t2.to(".PreloaderBlock__text_transparent", { duration: 1, width: "100%" });
t2.to(".PreloaderBlock", { duration: 1.2, y: '-130vh' }, 1);
t2.to(".PreloaderBlock", { duration: 0, display: "none" }, 2.2);
};
```
### 6. Анимации
На сайте анимации могут решать целый ряд конкретных задач. Одна из них – заполнение времени, которое пользователю нужно ждать загрузки страницы. Смотреть на статичную страницу не так интересно, как на красивую анимацию. В итоге те пользователи, которые могли бы покинуть сайт, остаются на нем – и как результат растет конверсия.
1. Анимация прелоудера;
2. Анимация появления заголовка;
3. Анимация исчезновения блоков;
4. Анимация появления постеров фильмов и саундреков.
### 7. Iframe
**IFrame** — это кадр внутри кадра. Это компонент HTML-элемента, который позволяет встраивать документы, видео и интерактивные медиафайлы на страницу. Сделав это, вы сможете отобразить дополнительную страницу на главной веб-странице.
```html
Слушайте John Wick 3 Official Soundtrack — Yamineralog на Яндекс Музыке
```
```css
.main__AudioIframe {
width: 100%;
height: 90vh;
border: none;
}
```
### 8. Методология разработки БЭМ
**БЭМ** — это современный метод верстки, который расшифровывается как «блок — элемент — модификатор». БЭМ позволяет соблюдать единые правила верстки, которые помогают быстро разрабатывать интерфейсы, гибко их настраивать и легко модифицировать.
**В данной работе реализованы такие блоки:**
1. Header - шапка сайта;
2. Main - блоки с основным контентом;
3. Footer - подвал сайта;
4. PreloaderBlock - блок прелоудера.
### 8. Файловая структура Nested
Классическая схема организации файловой структуры БЭМ-проектов:
- Блоку соответствует одна директория.
- Код модификаторов и элементов находится в отдельных файлах.
- Файлы модификаторов и элементов хранятся в отдельных директориях.
- Директория блока является корневой для поддиректорий его элементов и модификаторов.
- Имена директорий элементов начинаются с двойного подчеркивания (__).
- Имена директорий модификаторов начинаются с одинарного подчеркивания (_).
____
## Использованные технологии
### 1. Normalize.css
**Normalize.css** — это небольшой CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Это современная, готовая к HTML5 альтернатива традиционному reset.css.
### 2. Bootstrap v5.1.3
**Bootstrap** — это открытый и бесплатный HTML -, CSS - и JS-фреймворк, который используют веб-разработчики для быстрой верстки адаптивных дизайнов сайтов и веб-приложений. Включает в себя CSS - и HTML-шаблоны оформления для веб-форм, меток, типографики, кнопок, блоков навигации и других компонентов веб-интерфейса.
*Использовался:*
- Система сеток, мощную сетку flexbox, ориентированную на мобильные устройства, для создания макетов всех форм и размеров благодаря системе из двенадцати колонок, шести адаптивным уровням по умолчанию, переменным и миксинам Sass, а также десяткам предопределенных классов.
- Иконки Bootstrap - бесплатная высококачественная библиотека иконок с открытым исходным кодом, содержащая более 1600 иконок.
### 3. GSAP
**GreenSock Animation Platform** (сокращенно GSAP)- это мощная библиотека JavaScript, которая позволяет разработчикам и дизайнерам создавать надежные анимации на основе временной шкалы. Это позволяет точно управлять более сложными анимационными последовательностями, а не иногда ограничивающими ключевыми кадрами и анимацией свойства, которые предлагает CSS.
*Использовался:*
- GSAP анимации.
- ScrollTrigger - анимации при прокрутке сайта.