Star Wars'a açılış ikoniktir. Ekrandan hem yukarı hem de uzağa kaydırmanın etkisi, hem 1977'deki bir film için çılgın bir özel efekt hem de o zamanlar yepyeni olan havalı bir tipografik stildi.
HTML ve CSS ile benzer bir etki elde edebiliriz! Bu gönderi, tam Star Wars açılış sekansını yeniden oluşturmaya çalışmak veya filmde kullanılan tam stilleri eşleştirmek yerine bu kayan metin efektini nasıl elde edeceğinizle ilgili, o halde hadi bunun nihai sonuç olduğu bir yere gidelim:
Geoff Graham (@geoffgraham) tarafından CodePen'de Kalem Yıldız Savaşları Girişine bakın.
Temel HTML
Öncelikle içerik için HTML oluşturalım:
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…
Bu bize ihtiyacımız olan tüm parçaları verir:
star-warsİçeriği konumlandırmak için kullanacağımız bir kap denir . Bu aynı zamanda gereklidir, çünküperspectivebir ana öğeye sahip olmanın, bir alt öğenin özelliğini derinlik eklemek veya eğriltmek için yararlı bir yol olduğu CSS özelliğini kullanacağıztransform.crawlAsıl metni tutacak ve CSS animasyonunu uyguladığımız öğe olacak bir kap olarak adlandırılır .- İçerik!
Film başlığının adlı fazladan bir kapsayıcıya sarıldığını fark etmiş olabilirsiniz title. Bu gerekli değildir, ancak ihtiyacınız olması durumunda size ek stil seçenekleri sağlayabilir.
Temel CSS
İşin püf noktası, metnin dikey olarak yukarı Y-axisve Z-axis. Bu, metnin aynı anda hem ekranda hem de izleyiciden uzağa kaydığı izlenimini verir.
Öncelikle belgeyi ekranın kaydırılamayacağı şekilde ayarlayalım . Metnin, görüntüleyen kişi girmeden önce metni kaydırıp görmeden ekranın altından yukarı çıkmasını istiyoruz. Bunu overflow: hiddenyapmak için kullanabiliriz :
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; )Şimdi star-warsdemomuzun ana unsuru olan kapsayıcımızı şekillendirmeye geçebiliriz :
.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; )Ardından, crawlöğeye stiller uygulayabiliriz . Yine bu eleman, metni dönüştürecek ve canlandırılacak özellikleri içerdiği için önemlidir.
.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%; )Şimdiye kadar güzel görünen bir metin grubumuz var, ancak ne eğri ne de canlandırılmış. Bunu gerçekleştirelim.
Animasyon!
Gerçekten önemsediğin şey bu, değil mi? İlk olarak, @keyframesanimasyon için tanımlayacağız . Animasyon bizim için canlandırmaktan biraz daha fazlasını yapıyor, çünkü transformburada özelliklerimizi, özellikle de boyunca hareket için ekleyeceğiz Z-axis. Animasyonu 0%, metnin izleyiciye en yakın olduğu ve ekranın altında, görünümün dışında olduğu yerde başlatacağız , ardından animasyonu 100%izleyiciden uzakta ve ekranın üstünden yukarı ve yukarı aktığı yerde sonlandıracağız .
/* 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); ) )Şimdi bu animasyonu .crawlelemente uygulayalım :
.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; )İnce Ayarlı Eğlenceli Zamanlar
Ana efekt yerine oturduktan sonra şeylerle biraz daha eğlenebilirsiniz. Örneğin, metnin mesafeye doğru sürünerek etkisini vurgulamak için ekranın üst kısmına biraz solma ekleyebiliriz:
.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )Bu öğeyi HTML'nin en üstüne ekleyin; metin, şeffaftan aynı arka plana giden bir degradenin arkasında akacaktır :
Tam Örnek
İşte bu gönderinin tam kodu bir araya getirildi.
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); ) )Diğer Örnekler
Diğer bazı kişiler, bu yazıda anlatılanlardan başka teknikler kullanarak Yıldız Savaşları açılışının daha sadık yorumlarını yaptılar.
Tim Pietrusky, tophareket opacityiçin ve solma efekti yaratmak için güzel bir şekilde düzenlenmiş bir versiyona sahiptir :
CodePen'de Tim Pietrusky (@TimPietrusky) tarafından 1977'de yapılan Pen Star Wars açılış taramasını görün.
Yukulélé margin, ekranı ekranda hareket ettirmek için kullanır :
CodePen'de Yukulélé (@yukulele) tarafından yapılan Pen Pure CSS Star Wars açılış taramasına bakın.
Karottes transformbu gönderiye çok benziyor, ancak TranslateYmetni Y-axis.
CodePen'de Karottes (@Karottes) tarafından hazırlanan Pen Star Wars Crawl'u görün.