https://github.com/pipchenkovaa/webpage-with-a-parallax-effect

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

adobe-photoshop css3 git gsap gsap-animation html5 javascript scss

Last synced: 22 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/pipchenkovaa/webpage-with-a-parallax-effect
• Owner: Pipchenkovaa
• Created: 2024-09-04T11:51:37.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T19:49:33.000Z (about 2 months ago)
• Last Synced: 2024-10-15T16:05:32.687Z (22 days ago)
• Topics: adobe-photoshop, css3, git, gsap, gsap-animation, html5, javascript, scss
• Language: SCSS
• Homepage: https://pipchenkovaa.github.io/Webpage-With-A-Parallax-Effect/
• Size: 5.55 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 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