Site Web de Voyage Cinématographique à Défilement pour le Tour de Mumbai

Créez un site web premium et cinématographique sur une seule page pour une visite guidée de Mumbai intitulée « MUMBAI : LA VILLE QUI NE S'ARRÊTE JAMAIS ». L'expérience doit ressembler à un film de voyage interactif plutôt qu'à un site web touristique conventionnel, en utilisant une séquence de défilement collante en plein écran, une photographie en couches, une profondeur dramatique, un parallaxe fluide, une typographie éditoriale surdimensionnée, une narration immersive et des cartes de destinations interactives. 1. Direction Visuelle Principale Créez une expérience visuelle cinématographique et immersive inspirée des documentaires de voyage haut de gamme et des sites web touristiques éditoriaux de luxe. Le site web doit combiner : Une photographie de Mumbai en plein écran et cinématographique Des images en couches de premier plan, de plan intermédiaire et d'arrière-plan Une narration contrôlée par le défilement Un parallaxe fluide basé sur la profondeur Un mouvement subtil réactif au pointeur Une typographie serif élégante et de grande taille Des éléments d'interface minimalistes de couleur crème Un éclairage atmosphérique d'heure dorée Des ombres profondes et des reflets chaleureux Un zoom fluide entre les lieux Des transitions visuelles fluides créées par le mouvement, l'échelle, le flou et l'opacité Une photographie de voyage éditoriale haut de gamme Une hiérarchie visuelle forte avec un encombrement d'interface minimal Évitez le style générique des modèles touristiques, les cartes excessives, les dégradés, les couleurs néon, les illustrations cartoon et les sections de site web conventionnelles en boîtes. 2. Scène Héroïque Ouvrez avec une vue cinématographique en plein écran à couper le souffle de Mumbai à l'heure dorée. Construisez la scène à partir de plusieurs couches visuelles : Arrière-plan : La ligne d'horizon de Mumbai, la mer d'Arabie, un ciel atmosphérique, des bâtiments lointains et une brume de coucher de soleil chaleureuse. Plan intermédiaire : La porte de l'Inde et l'architecture historique environnante. Premier plan : Des éléments architecturaux ou de bord de mer qui créent une forte profondeur cinématographique. Placez un titre serif centré et énorme : MUMBAI En dessous : La ville indienne des rêves, des histoires, des rues, de la mer et d'une énergie inarrêtable. Ajoutez trois pastilles crème : Patrimoine Vie de Rue Mer d'Arabie La scène doit réagir subtilement au mouvement du pointeur afin que les éléments de premier plan bougent plus que les éléments lointains. Lorsque le visiteur fait défiler, MUMBAI doit lentement monter, rétrécir légèrement et disparaître tandis que l'architecture de premier plan s'étend vers le spectateur. 3. Navigation Créez une barre de navigation transparente positionnée au-dessus de la scène cinématographique. À gauche : Mumbai Experiences Navigation centrale : Explorer Monuments Culture Visite Réserver À droite : EN ⌄ Utilisez une typographie crème élégante avec un espacement généreux. Gardez la navigation visuellement légère afin que la photographie reste dominante. 4. Expérience de Défilement Créez une scène cinématographique collante et longue couvrant environ 3 500 à 4 500 pixels de distance de défilement. La fenêtre d'affichage reste épinglée pendant que Mumbai se transforme autour du visiteur. Le défilement doit donner l'impression de voyager physiquement à travers Mumbai plutôt que de passer d'une section de site web normale à une autre. Utilisez l'interpolation et un easing de type smoothstep pour toutes les animations contrôlées par le défilement. Utilisez requestAnimationFrame pour un rendu fluide. Ajoutez un léger lissage du défilement et un parallaxe du pointeur sur ordinateur. Prenez en charge prefers-reduced-motion en désactivant l'inertie et le parallaxe du pointeur tout en préservant la séquence de contenu. 5. Scène Un : La Porte de l'Inde Commencez avec la Porte de l'Inde dominant la composition. Au début du défilement : La typographie héroïque monte et s'estompe L'architecture de premier plan s'agrandit lentement L'arrière-plan se déplace à une vitesse plus lente La caméra semble avancer vers la Porte de l'Inde La brume atmosphérique augmente subtilement Les couches environnantes se séparent pour créer de la profondeur Introduisez un texte narratif centré : La porte où Mumbai rencontre la mer. Texte d'accompagnement : Debout au bord de la mer d'Arabie depuis 1924, la Porte de l'Inde reste l'un des monuments emblématiques de Mumbai et le point de départ idéal pour découvrir la ville. En dessous, affichez : 1924 Porte achevée 20e Siècle Le monument emblématique du front de mer de Mumbai Gardez la typographie élégante, minimale, centrée et cinématographique. 6. Scène Deux : Marine Drive Continuez à défiler dans une transformation cinématographique vers Marine Drive. Le premier plan de la Porte de l'Inde doit se séparer vers l'extérieur et sortir de la fenêtre d'affichage tandis qu'une nouvelle scène côtière en plein écran émerge en dessous. Montrez : La mer d'Arabie La promenade de Marine Drive Le littoral incurvé Les bâtiments Art déco Le trafic en mouvement représenté visuellement Les reflets chaleureux du coucher de soleil Les lumières atmosphériques de la ville commençant à apparaître Appliquez un flou de profondeur temporaire aux couches sortantes pendant que la nouvelle scène devient nette. Titre narratif : Mumbai respire au bord de la mer d'Arabie. Texte d'accompagnement : Suivez la courbe majestueuse de Marine Drive, où la brise marine, l'architecture Art déco, les couchers de soleil, le trafic et la vie urbaine se rencontrent le long de l'une des promenades les plus reconnaissables de Mumbai. La transition visuelle doit donner l'impression que la caméra traverse la photographie précédente pour entrer dans Marine Drive. 7. Scène Trois : Chhatrapati Shivaji Maharaj Terminus Transitionnez vers une scène architecturale centrée sur Chhatrapati Shivaji Maharaj Terminus. Utilisez une photographie dramatique de soirée ou d'heure dorée mettant en valeur : L'architecture néo-gothique Les détails en pierre Les tours et les dômes Le trafic de Mumbai Les rues historiques L'atmosphère urbaine dense Titre : L'histoire avance à la vitesse de Mumbai. Texte d'accompagnement : Explorez l'un des grands monuments architecturaux de Mumbai et vivez le contraste extraordinaire entre la pierre historique et le mouvement incessant de la ville moderne. Utilisez le trafic ou les éléments architecturaux de premier plan pour créer une forte profondeur de parallaxe. 8. Scène Quatre : La Vie de Rue de Mumbai Passez de l'architecture monumentale à l'échelle humaine de Mumbai. Créez une composition de rue immersive avec des références visuelles authentiques telles que : Kala Ghoda Les rues de Colaba Les cafés locaux Les taxis noirs et jaunes Les vendeurs de rue Les façades historiques Les rues piétonnes animées Les marchés locaux Titre : La vraie Mumbai vit entre les monuments. Texte d'accompagnement : Parcourez des rues remplies de nourriture, d'architecture, de marchés, de taxis, de conversations, de cafés et d'innombrables petites histoires qui révèlent la personnalité de Mumbai. Gardez la présentation sophistiquée et documentaire plutôt que chaotique. 9. Explorateur de Destinations Près de l'étape finale du défilement cinématographique, introduisez un curseur de destinations horizontal interactif. Le curseur doit voler dramatiquement dans la fenêtre d'affichage depuis la droite. Créez de grandes cartes crème aux coins arrondis, avec une typographie noire, de petites étiquettes de catégorie, des descriptions concises et des épingles de localisation photographiques ou illustrées. Cartes : La Porte de l'Inde Catégorie : Monument du Front de Mer Description : Commencez près du monument le plus reconnaissable de Mumbai, surplombant la mer d'Arabie. Marine Drive Catégorie : Mumbai Côtier Description : Vivez le célèbre boulevard du front de mer de Mumbai et ses vues imprenables sur la mer. Chhatrapati Shivaji Maharaj Terminus Catégorie : Architecture Description : Découvrez l'un des monuments ferroviaires historiques les plus spectaculaires de Mumbai. Kala Ghoda Catégorie : Quartier des Arts Description : Explorez l'architecture patrimoniale, les galeries, les cafés, les musées et le côté créatif de Mumbai. Colaba Catégorie : Quartier Historique Description : Parcourez des rues animées remplies d'architecture, de boutiques, de cafés et de caractère local. Dhobi Ghat Catégorie : Mumbai Local Description : Découvrez l'un des monuments de travail les plus distinctifs de Mumbai et comprenez une autre facette de la vie quotidienne de la ville. Les cartes doivent se déplacer horizontalement avec une animation inertielle fluide. Incluez des contrôles circulaires de flèches précédent et suivant. Créez une boucle infinie fluide en clonant les ensembles de cartes et en normalisant la position du curseur après les transitions. Les cartes doivent prendre en charge l'interaction à la souris, au toucher et au clavier. 10. Section de Conversion de Visite Guidée Après la séquence de destinations, transitionnez vers une scène de réservation finale dramatique. Utilisez une ligne d'horizon cinématographique de Mumbai à l'heure bleue avec des bâtiments lumineux, des lumières côtières, des traînées de trafic et la mer d'Arabie. Grand titre : Ne vous contentez pas de visiter Mumbai. Vivez-la. Texte d'accompagnement : Découvrez Mumbai avec une visite guidée de la ville reliant ses monuments, son patrimoine, ses rues, son architecture, sa culture et ses vues inoubliables sur le front de mer. Appel à l'action principal : Réservez Votre Visite de Mumbai Appel à l'action secondaire : Voir les Détails de la Visite Sous les boutons, affichez trois indicateurs de confiance compacts : Expérience Guidée Locale Points Forts Emblématiques de Mumbai Itinéraire de Ville Sélectionné L'appel à l'action de réservation doit être l'élément de conversion le plus fort du site web tout en restant fidèle à l'esthétique éditoriale minimale. 11. Conception de l'Interaction Tout le mouvement doit sembler cinématographique plutôt que décoratif. Utilisez la position de défilement pour contrôler : La translation des couches L'échelle de l'image L'opacité des scènes Le flou de profondeur La luminosité La saturation La visibilité des panneaux narratifs La séparation des premiers plans Le zoom de l'arrière-plan L'entrée horizontale des cartes de destinations Le mouvement du pointeur doit produire un parallaxe subtil. Les éléments de premier plan doivent réagir plus fortement que les éléments d'arrière-plan. Ne rendez jamais le mouvement agressif ou distrayant. Les animations doivent utiliser une interpolation fluide plutôt que des transitions CSS abruptes. 12. Typographie Utilisez une serif éditoriale élégante à fort contraste pour les titres principaux et la narration des destinations. Utilisez une sans-serif moderne et propre pour la navigation, les descriptions, les étiquettes, les boutons et les informations complémentaires. Le mot MUMBAI doit initialement dominer la fenêtre d'affichage avec une typographie extrêmement grande. Utilisez du texte crème ou blanc cassé chaleureux plutôt que du blanc pur. Palette suggérée : Crème : #FDF1E1 Charbon : #111411 Nuit Profonde : #0B1110 Bleu Mer d'Arabie : #4AB5E0 Coucher de Soleil Chaud : #D99A55 Utilisez les couleurs avec parcimonie et laissez la photographie définir la majeure partie de la palette visuelle. 13. Exigences Techniques Construisez le site web comme une expérience responsive soignée en utilisant la pile technologique demandée. Pour une implémentation simple, utilisez : HTML CSS JavaScript Vanilla Pour les créateurs de sites web IA qui utilisent React par défaut, recréez la même architecture avec des composants React sans changer le comportement visuel. Utilisez : position : sticky pour la scène cinématographique Les propriétés personnalisées CSS pour l'état d'animation requestAnimationFrame pour l'animation de défilement transform : translate3d() pour un mouvement performant will-change uniquement sur les éléments animés dimensionnement responsive clamp() object-fit : cover pour la photographie cinématographique composition en couches avec z-index interpolation smoothstep pour les entrées et sorties de scènes transformations compatibles GPU HTML sémantique navigation accessible aria-labels descriptifs cartes de destinations accessibles au clavier mises en page responsives pour ordinateur, tablette et mobile Évitez les bibliothèques d'animation tierces inutiles, sauf si la plateforme l'exige. 14. Comportement Responsive L'ordinateur doit offrir l'expérience cinématographique complète en couches. La tablette doit conserver la même narration de défilement tout en réduisant la typographie surdimensionnée et l'échelle des premiers plans. Le mobile doit : Préserver la narration cinématographique Réduire l'intensité du parallaxe Recadrer intelligemment les photographies Garder MUMBAI lisible Rendre la navigation défilable horizontalement si nécessaire Utiliser des cartes de destinations d'environ 80 à 85 vw Maintenir de grandes zones tactiles Garder les appels à l'action de réservation bien visibles Empêcher le débordement horizontal de la page Ne vous contentez pas d'empiler chaque scène cinématographique dans des sections mobiles ordinaires. 15. Direction des Images Utilisez des photographies de Mumbai haute résolution, réalistes et cinématographiques. Priorisez les visuels authentiques de : La Porte de l'Inde Marine Drive Chhatrapati Shivaji Maharaj Terminus Kala Ghoda Colaba Dhobi Ghat La mer d'Arabie La ligne d'horizon de Mumbai Les taxis noirs et jaunes L'architecture historique du sud de Mumbai Les images doivent sembler être des plans d'un documentaire de voyage haut de gamme. Privilégiez l'heure dorée, le coucher de soleil, l'heure bleue, la lumière du jour atmosphérique, l'éclairage de rue réaliste, la perspective profonde, le cadrage de premier plan, les foules naturelles et l'architecture authentique de Mumbai. Évitez l'architecture manifestement générée par IA, les monuments inexacts, l'imagerie futuriste de Mumbai, l'imagerie indienne générique, les photographies sursaturées et les graphiques touristiques clichés. 16. Expérience Finale Le site web final doit donner l'impression de faire défiler un voyage cinématographique à travers Mumbai. La séquence doit s'écouler naturellement : HÉROS MUMBAI ↓ LA PORTE DE L'INDE ↓ MARINE DRIVE ↓ CSMT ↓ LA VIE DE RUE DE MUMBAI ↓ DESTINATIONS EMBLÉMATIQUES ↓ RÉSERVEZ VOTRE VISITE GUIDÉE DE LA VILLE Le visiteur doit se sentir progressivement attiré plus profondément dans Mumbai avant d'atteindre l'appel à l'action de réservation. Priorisez l'atmosphère, la narration, la photographie, la profondeur, le mouvement et l'immersion émotionnelle plutôt que les mises en page de sites web conventionnelles. L'expérience finale doit sembler suffisamment haut de gamme pour une entreprise touristique de luxe à Mumbai tout en restant suffisamment excitante pour donner immédiatement envie d'explorer la ville et de réserver la visite guidée.