Implement Moon Phases Webpage with Smooth Scroll Transitions
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
Direzione di ricerca
Non vengono indicati file o test; ispeziona innanzitutto l'entry point React del repository e la struttura di pagina esistente. Crea otto sezioni a schermo intero sulle fasi lunari con immagini e descrizioni, quindi verifica la fluidità delle transizioni, la responsività e i dettagli interattivi della fase richiesti.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
📌 Description:
Develop a single-page React website that visually presents the 8 phases of the moon 🌕🌖🌗🌘🌑🌒🌓🌔.
Each phase should be displayed in a dedicated full-screen section, featuring a high-quality image and a brief description.
✨ Implement smooth scroll transitions and engaging animations using Framer Motion or GSAP for a seamless and immersive experience.
✨ Display all 8 moon phases, one at a time 🌕
✨ Ensure smooth transitions between sections (e.g., fade-in, slide-in effects)
Extra Features:
⚡ Make the website responsive
💫 Add interactive elements (e.g., users can click a moon phase for more details)
🎨 Participants are encouraged to explore and express their creativity while designing the animations and transitions!
Sample Images:
Tech Stack
React JS, Framer Motion/GSAP (or any other library)
- Lingua principale
- HTML
- Stelle
- 10
- Fork
- 77
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Preparare l'ambiente
Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di CommunityOfCoders/WebGenesis
-
Movie Night PlannerApertaHard Node + Express React
Difficoltà 5/5 Più di una settimana Idoneità per principianti 25/100
-
Hard Node + Express Vite React
Difficoltà 4/5 3-5 giorni Idoneità per principianti 45/100
-
Hard Node + Express Vite React
Difficoltà 5/5 Più di una settimana Idoneità per principianti 25/100
-
Flask Hard React
Difficoltà 5/5 Più di una settimana Idoneità per principianti 25/100
-
Medium React TailwindCSS
Difficoltà 5/5 Più di una settimana Idoneità per principianti 35/100
Tutte le issue di CommunityOfCoders/WebGenesis
Issue simili
-
💡 [Feature] Add an option to hide the empty screen background illustration (Distraction-Free)Aperta
Difficoltà 2/5 Mezza giornata Idoneità per principianti 72/100
super-productivity/super-productivity#10982 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
mattermost/compass-design#122 ·
I maintainer di solito rispondono entro 1 giorno
-
api-parity
Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100
IBM/carbon-components-ember#1157 ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 73/100
-
good first issue help wanted
Difficoltà 2/5 1-3 ore Idoneità per principianti 82/100