Loading repository data…
haseebjaved4212 / repository
A single-page scrolling experience inspired by Magma, built with HTML, CSS, and JavaScript. It uses GSAP ScrollTrigger, Locomotive Scroll, canvas-driven frame sequences, and simple text animations to create a smooth, immersive landing page.
A single-page scrolling experience inspired by Magma, built with HTML, CSS, and JavaScript. It uses GSAP ScrollTrigger, Locomotive Scroll, canvas-driven frame sequences, and simple text animations to create a smooth, immersive landing page.
├── index.html
├── style.css
├── script.js
└── Assets/
├── Images/
│ └── Screenshot 2023-05-30 220719.png (Logo used in nav)
├── Fonts/
│ ├── jost-variable.ttf (font-family: a)
│ ├── KFOlCnqEu92Fr1MmEU9fBBc4 (1).ttf (font-family: b)
│ └── KFOmCnqEu92Fr1Mu4mxK (1).ttf (font-family: c)
├── Frames/ (Page 3 canvas sequence)
│ ├── frames00007.png
│ ├── frames00010.png
│ ├── ...
│ └── frames00202.png
└── Bridges/ (Page 5 canvas sequence)
├── bridges00004.png
├── bridges00007.png
├── ...
└── bridges00202.png
⚠️ Note: If you keep assets at the project root, update the paths in HTML/CSS/JS accordingly. Web paths should use forward slashes (/) even on Windows.
Images
index.html references ./Assets/Images/Screenshot 2023-05-30 220719.png (recommended)../Screenshot 2023-05-30 220719.png).Fonts (style.css)
./Assets/Fonts/jost-variable.ttf./Assets/Fonts/KFOlCnqEu92Fr1MmEU9fBBc4 (1).ttf./Assets/Fonts/KFOmCnqEu92Fr1Mu4mxK (1).ttfFrames (script.js, Page 3)
framesNNNNN.png files in Assets/Frames/.files(index) points to ./Assets/Frames/framesXXXXX.png consistently.Bridges (script.js, Page 5)
bridgesNNNNN.png files in Assets/Bridges/.files(index) points to ./Assets/Bridges/bridgesXXXXX.png.Remote sequences (Page 7)
https://thisismagma.com/assets/home/lore/seq/*.webp. Internet connectivity is required.Videos and External Media
https://thisismagma.com/wp-content/themes/magma/assets/home/hero/1.mp4?2https://thisismagma.com/wp-content/themes/magma/assets/home/glass/1.webm?2thisismagma.com CDNs.Prerequisites
Run Locally
Assets/ subfolders as described.index.htmldirectly in your browser, or serve the folder with a local server.Smooth Scrolling
#main.scrollerProxy to sync GSAP with Locomotive’s scroll container.Text Animation
Canvas Sequences
<canvas> to render image sequences (Frames and Bridges respectively).Pinned Sections
end: "250% top").index.htmlstyle.css (colors, sizes, spacing).Assets/Fonts/ and updating @font-face entries.Assets/Frames/ or Assets/Bridges/ and updating the lists in script.jsBroken paths
CDN issues
Performance
This project is provided as-is for educational and demonstration purposes. Please ensure you have rights to any media assets used.
Selected from shared topics, language and repository description—not editorial ratings.
ayush-techgeu /
This is a single-page website built using HTML, CSS, JavaScript, and GSAP animation. It showcases the beauty, culture, and tourism of Uttarakhand with smooth scroll-triggered effects and a modern UI. Deployed via Vercel for fast, accessible browsing.