L'ouverture de Star Wars est emblématique. L'effet du texte défilant à la fois vers le haut et à l'extérieur de l'écran était à la fois un effet spécial fou pour un film de 1977 et un style typographique cool qui était tout nouveau à l'époque.
Nous pouvons obtenir un effet similaire avec HTML et CSS! Cet article explique davantage comment obtenir cet effet de texte glissant plutôt que d'essayer de recréer la séquence d'ouverture complète de Star Wars ou de faire correspondre les styles exacts utilisés dans le film, alors arrivons à un endroit où voici le résultat final:
Voir l'intro Pen Star Wars par Geoff Graham (@geoffgraham) sur CodePen.
Le HTML de base
Commençons par configurer le HTML pour le contenu:
Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…
Cela nous donne toutes les pièces dont nous avons besoin:
- Un conteneur appelé
star-warsque nous allons utiliser pour positionner le contenu. Cela est également nécessaire car nous utiliserons laperspectivepropriété CSS, où avoir un élément parent est un moyen utile d'ajouter de la profondeur ou d'incliner latransformpropriété d' un élément enfant . - Un conteneur appelé
crawlqui contiendra le texte réel et sera l'élément auquel nous appliquons l'animation CSS. - Le contenu!
Vous avez peut-être remarqué que le titre du film est enveloppé dans un conteneur supplémentaire appelé title. Ce n'est pas nécessaire, mais pourrait vous fournir des options de style supplémentaires si vous en avez besoin.
Le CSS de base
L'astuce consiste à imaginer un espace tridimensionnel où le texte rampe verticalement vers le haut Y-axiset vers l' extérieur le long du Z-axis. Cela donne l'impression que le texte glisse vers le haut de l'écran et s'éloigne du spectateur en même temps.
Tout d'abord, configurons le document de sorte que l'écran ne puisse pas faire défiler. Nous voulons que le texte vienne du bas de l'écran sans que le spectateur puisse faire défiler et voir le texte avant qu'il n'entre. Nous pouvons utiliser overflow: hiddenpour faire cela:
body ( /* Force the body to fill the entire screen */ width: 100%; height: 100%; /* Hide elements that flow outside the viewable space */ overflow: hidden; /* Black background for the screen */ background: #000; )Nous pouvons maintenant passer au style de notre star-warsconteneur, qui est l'élément parent de notre démo:
.star-wars ( /* Flexbox to center the entire element on the screen */ display: flex; justify-content: center; /* This is a magic number based on the context in which this snippet is used and effects the perspective */ height: 800px; /* This sets allows us to transform the text on a 3D plane, and is somewhat a magic number */ perspective: 400px; /* The rest is totally up to personal styling preferences */ color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; text-align: justify; )Ensuite, nous pouvons appliquer des styles à l' crawlélément. Encore une fois, cet élément est important car il contient les propriétés qui transformeront le texte et seront animés.
.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Making sure the text is fully off the screen at the start and end of the animation */ top: -100px; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; )Jusqu'à présent, nous avons un beau groupe de texte, mais il n'est ni biaisé ni animé. Faisons en sorte que cela se produise.
Animation!
C'est ce qui vous tient vraiment à cœur, non? Tout d'abord, nous allons définir le @keyframespour l'animation. L'animation fait un peu plus qu'animer pour nous, car nous allons ajouter nos transformpropriétés ici, en particulier pour le mouvement le long du Z-axis. Nous commencerons l'animation 0%là où le texte est le plus proche du spectateur et se trouve sous l'écran, hors de vue, puis terminerons l'animation 100%là où elle est loin du spectateur et qui coule vers le haut et au-dessus de l'écran.
/* We're calling this animation "crawl" */ @keyframes crawl ( 0% ( /* The element starts below the screen */ top: 0; /* Rotate the text 20 degrees but keep it close to the viewer */ transform: rotateX(20deg) translateZ(0); ) 100% ( /* This is a magic number, but using a big one to make sure the text is fully off the screen at the end */ top: -6000px; /* Slightly increasing the rotation at the end and moving the text far away from the viewer */ transform: rotateX(25deg) translateZ(-2500px); ) )Maintenant, appliquons cette animation sur l' .crawlélément:
.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; /* Adds the crawl animation, which plays for one minute */ animation: crawl 60s linear; )Des moments amusants avec un réglage fin
Vous pouvez vous amuser un peu plus avec les choses une fois que l'effet principal est en place. Par exemple, nous pouvons ajouter un petit fondu en haut de l'écran pour accentuer l'effet du texte rampant au loin:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Ajoutez cet élément en haut du HTML et le texte coulera derrière un dégradé qui va de transparent au même arrière-plan que le :
L'exemple complet
Voici le code complet de cet article rassemblé.
Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…
body ( width: 100%; height: 100%; background: #000; overflow: hidden; ) .fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; ) .star-wars ( display: flex; justify-content: center; position: relative; height: 800px; color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; perspective: 400px; text-align: justify; ) .crawl ( position: relative; top: 9999px; transform-origin: 50% 100%; animation: crawl 60s linear; ) .crawl > .title ( font-size: 90%; text-align: center; ) .crawl > .title h1 ( margin: 0 0 100px; text-transform: uppercase; ) @keyframes crawl ( 0% ( top: 0; transform: rotateX(20deg) translateZ(0); ) 100% ( top: -6000px; transform: rotateX(25deg) translateZ(-2500px); ) )Autres exemples
D'autres personnes ont fait des interprétations plus fidèles de l'ouverture de Star Wars en utilisant d'autres techniques que celles couvertes ici dans cet article.
Tim Pietrusky a une version magnifiquement orchestrée utilisant toppour le mouvement et opacitypour créer l'effet de fondu:
Voir l'exploration d'ouverture de Pen Star Wars de 1977 par Tim Pietrusky (@TimPietrusky) sur CodePen.
Yukulélé utilise marginpour déplacer le le long de l'écran:
Voir le crawl d'ouverture de Pen Pure CSS Star Wars par Yukulélé (@yukulele) sur CodePen.
Karottes utilise un transformpeu comme ce post, mais s'appuie davantage sur TranslateYle déplacement du texte le long du Y-axis.
Voir le Pen Star Wars Crawl de Karottes (@Karottes) sur CodePen.