Посмотреть можно по ссылке: https://w1llow1sp.github.io/ParalaxHtml/
Вы можете склонировать репозиторий и запустить через индексный файл или открыв папку в VSCode через LiveServer ❤
| Название файла | Содержание файла |
|---|---|
| fonts/ | Папка, содержащая шрифты для проекта (Raleway двух начертаний) |
| img/ | Папка, содержащая необходимые layout-ы для реализации Paralax |
| js/ | Папка, содержащая файл app.js .В котором написан скрипт для автоматического динамического добавления css-класса для элементов thml при прокрутке по оси Y |
| libs/ | Папка, содержащую библиотеку GSAP.JS для мягкого скролла и лучшего эффекта реализации Paralax |
| index.html | Основной индексный файл веб-страницы |
| main.css | Основной файл c таблицей стилей для веб-страницы |
Проект сделан в целях обучения, пониманию принципа работы Paralax-эффекта на сайтах, а также знакомтво с библиотекой GSAP.JS и улучшения стилизации веб-страниц.
1.HTML-код с использованием методологии БЭМ;
2.CSS
3.Java-script:
3.1 Основной исполняющий скрипт на ES6
3.2 JS-библиотека GSAP.JS для улучшенного скролла
Как правило, для пользовательского глаза, сайты с использованием paralax-эффекта выглядят более профессиональными и цепляющими глаз.
Основная нагрузка идет на css и рендер. Эффект Paralax идет за счет хорошой работой дизайнера, который сделает хорошие слои и разработчика. Если схематично представить весь сайт, то выйдет примерно так:
Чем светлее слой -- тем "ниже" лежит слой. В бОльшей мере здесь использовались блочные элементы.