Pipchenkovaa / Webpage-With-A-Parallax-Effect

Webpage with a parallax effect, created primarily using JavaScript, GSAP & Photoshop / Веб-страница с эффектом параллакса, созданная в основном при помощи JavaScript, GSAP & Photoshop

Webpage With A Parallax Effect / Веб-страница с Эффектом Параллакса

This is a simple webpage with a parallax effect, created primarily using JavaScript, GSAP (The GreenSock Animation Platform), which is a powerful library for creating animations in JavaScript, and Adobe Photoshop. The main features of this project include smooth scrolling and 3D effects.

Это простая веб-страница с эффектом параллакса, созданная с помощью языка JavaScript, GSAP - мощной библиотеки для создания анимаций на JavaScript, а также Adobe Photoshop. Отличительными особенностями данного проекта являются плавный скроллинг и 3D-эффекты.

💡 Features / Особенности

The webpage is responsive to different screen sizes / Веб-страница адаптирована под различные размеры экранов

The depth effect is achieved through smooth scrolling animation and a multi-layered background image / Эффект глубины достигается за счёт плавной анимации при прокрутке и многослойного фонового изображения

⚙️ Structure / Структура

«libs/» contains modules of the GSAP library / папка «libs» содержит модули библиотеки GSAP

«js/» contains all JavaScript files / папка «js» содержит все скрипты

«fonts/» contains custom fonts / папка «fonts» содержит кастомные шрифты

«images/» contains image assets used on the website / папка «images» содержит использованные в проекте изображения

«css/» contains custom styles / папка «css» содержит файлы со стилями

Built With / Использованные технологии

HTML5 / CSS3 / SCSS / JavaScript (ES6+) / GSAP / Photoshop

Run this project locally / Для запуска проекта локально:

1. Clone the repository / Клонируем репозиторий: git clone https://github.com/Pipchenkovaa/Webpage-With-A-Parallax-Effect.git
   
2. Navigate to the project directory / Переходим в директорию проекта: cd Webpage-With-A-Parallax-Effect
   
3. Install dependencies / Устанавливаем необходимые модули и пакеты: npm install
   
4. Start the development server / Запускаем скрипт для сборки JavaScript модулей: npm start
   
5. Open the project in your browser / Открываем проект локально в браузере: http://localhost:3000
   

©️ Author / Авторство

© Pipchencova Alina, 2024