Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thounny/day_021
Video-based animated landing page using HTML, CSS, and GSAP
https://github.com/thounny/day_021
css gsap html javascript landing-page video-player
Last synced: about 1 month ago
JSON representation
Video-based animated landing page using HTML, CSS, and GSAP
- Host: GitHub
- URL: https://github.com/thounny/day_021
- Owner: thounny
- Created: 2024-10-21T23:49:58.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T23:53:21.000Z (2 months ago)
- Last Synced: 2024-10-22T20:53:09.947Z (2 months ago)
- Topics: css, gsap, html, javascript, landing-page, video-player
- Language: HTML
- Homepage: https://thounny.github.io/DAY_021/
- Size: 47.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DAY_021 | Video-Based Animated Landing Page
## Project Overview
For **DAY_021** of my daily code challenge series, I built a **video-based animated landing page** using **HTML**, **CSS**, and **GSAP**. The landing page features a looping video background and smooth animations to create a visually appealing and engaging experience.
---
### Inspiration from Awwwards Element by Elkruff
Check the site out here! [Elkruff](https://elkruff.ava-case.com/)
---
## Preview
## Inspiration
---
## Key Features
- **Video Background**: A looping video background creates visual interest and sets the tone of the landing page.
- **GSAP Animations**: Key animations are powered by **GSAP**, providing smooth transitions and dynamic effects.
- **Static Layout**: The page is designed to be visually captivating without requiring scrolling interactions.
- **Clean Design**: Focuses on a minimalist design approach with carefully placed animations for a polished look.
---
## GSAP in Action
### Video Fade-in Animation
```javascript
gsap.from(".hero-video", {
opacity: 0,
duration: 2,
ease: "power3.out",
});
```
The video background smoothly fades in when the page loads, creating an elegant entrance effect.
### Header Animation
```javascript
gsap.from(".header-item", {
y: 100,
opacity: 0,
duration: 1.5,
ease: "power3.out",
stagger: 0.2,
});
```
This snippet animates the header items, sliding them into view with staggered timing to make the introduction more dynamic.
---
## How to Run
1. **Clone the repository**:
```bash
git clone https://github.com/thounny/DAY_021.git
```
2. **Navigate to the project directory**:
```bash
cd DAY_021
```
3. **Open the `index.html` file** in your browser, or use a local development server like **Live Server** in VSCode.
---
## Project Structure
```bash
DAY_021/
├── assets/
├── fonts/
├── styles.css
├── index.html
```
---
## Technologies Used
- **HTML5**: Provides structure and layout.
- **CSS3**: For styling and visual presentation.
- **JavaScript (ES6)**: Implements logic and animation control.
- **GSAP (GreenSock Animation Platform)**: Powers smooth transitions and animations.
---
## Author
**Thounny Keo**
Creative Developer & Designer
Frontend Development Student | Year Up United
---
