Star Wars

Keluarkan popcorn! Hari ini kami sedang membangun judul film Star Wars dari "The Force Awakens" trailer.

Contoh ini menggabungkan animasi CSS dengan beberapa properti CSS lainnya yang mungkin membantu Anda, khususnya transformasi scale, translate and rotate.

Transformasi

Meskipun mungkin terdengar seperti itu menciptakan animasi, properti transformasi sebenarnya digunakan pengaturan posisi statis, miring atau skala elemen. Kita dapat menggunakannya untuk menciptakan efek yang hebat tetapi untuk melakukannya kita harus memiliki transformasi yang berbeda untuk setiap bingkai utama atau negara yang kita animasikan.

Transform: scale(), translateZ() and rotateY()

Kita dapat membuat elemen yang lebih besar atau lebih kecil menggunakan scale . Menggunakan translateZ kita dapat memindahkan elemen dalam sumbu-Z. Sumbu ini akan menjadi yang diwakili dengan menggambar garis dari Anda, melalui monitor.

Dalam hal ini kita akan menggunakan kombinasi skala dan menerjemahkanZ untuk membuatnya terlihat seperti beberapa kata terbang melintasi angkasa.

Terakhir kami akan gunakan rotateY untuk memutar huruf dari tagline. Berputar di sekitar sumbu Y akan membutuhkan sedikit kerja 3D di browser.

SVG, HTML and CSS

Sebagai persiapan untuk contoh ini saya membuat dua file SVG untuk bagian Star and Wars pada logo. Jangan ragu untuk mengambilnya untuk digunakan jika Anda ingin bermain bersama.

HTML untuk demo adalah sebagai berikut:

<div class="starwars-demo">
  <img src="/images/star.svg" alt="Star" class="star">
  <img src="/images/wars.svg" alt="Wars" class="wars">
  <h2 class="byline" id="byline">The Force Awakens</h2>
</div>

Gambar statis dari beberapa bintang digunakan untuk latar belakang. Font di byline sangat sulit ditemukan, jadi saya telah mereferensikan font web "Lato" dalam contoh ini.

Dengan beberapa posisi absolut untuk memusatkan konten di tengah layar, kita mulai dengan ini:

Mengaktifkan Star and Wars

Kami ingin teks yang lebih besar memudar, sementara juga mulai lebih besar dan semakin kecil dari waktu ke waktu. Ini adalah kasus yang bagus untuk scale() trannsformasi. Mari kita gunakan pada kata "Star" dengan bingkai utama ini:

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

Ada dua properti yang berubah selama animasi ini. pada opacity dan transform. Perubahan opasitas membuatnya mulai transparan, dan memudar pada bagian akhir sehingga kita dapat mengulang animasi.

Transformasi dimulai dengan menetapkan skala pada 1.5. Ini berarti ukuran awal teks 150% lebih besar dari biasanya. Pada 89%, kami mengatur properti transformasi ke skala 1. Ini berarti bahwa antara 0% dan 89%, skala ini meningkat dari 150% menjadi 100%.

pada akhir transformZ menyebabkan kata untuk memperbesar dengan cepat.

Kita dapat menerapkan bingkai utama ini ke kata "Star" seperti ini:

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

Properti animasi di sini menentukan animasi yang disebut bintang, dan durasi sepuluh detik. Ini berlaku fungsi pengaturan waktu ease-out, dan memberitahukannya untuk mengulang tanpa batas. Kami menerapkan aturan serupa untuk kata "Wars".

Membuat 3D

Menggunakan transformasi 3D dalam CSS, baik menerjemahkan sepanjang sumbu Z, atau memutar di sekitar sumbu Y dan Z mengharuskan kita menetapkan panggung untuk 3D. Dalam istilah HTML ini berarti kita membuat wadah, dan memberi tahu browser bahwa beberapa hal 3D akan terjadi.

Kami melakukan ini dengan menambahkan yang berikut ke .starwars-demo div:

.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

Kedua properti ini memberi tahu browser bahwa anak-anak penampung harus diposisikan dalam 3D, bukan datar. [CSS Tricks[ masuk ke lebih detail tentang properti.

Kedua, properti persective memberitahu browser bagaimana "deep" adegan itu perlu. Seandainya kami membuatnya 800px. Nilai yang lebih kecil menciptakan lebih banyak efek perspektif "ekstrim" karena adegannya lebih pendek.

Dengan itu, kami akan memperkenalkan tagline.

Awaken the Force

Tagline "The Force Awakens" muncul di trailer dengan setiap huruf berputar pada tempatnya. Kita dapat membuat efek ini menggunakan rotateY transform. Dalam hal ini kami telah membungkus masing-masing huruf dalam elemen span, sehingga kami dapat menerapkan animasi untuk setiap huruf.

Masalah yang saya temukan dengan cepat adalah bahwa tidak ada cara langsung untuk menghidupkan masing-masing huruf di garis. Pendekatan pertama saya adalah membungkus setiap huruf secara manual dalam tag span. Ini berhasil tetapi membuat HTML sedikit berantakan. Demo saat ini termasuk beberapa JavaScript (thanks to Tady for the assist) yang membungkus setiap huruf secara otomatis dalam span.

Kami akan menerapkan animasi untuk setiap huruf.

Pertama, bingkai utama:

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%, 86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

Untuk mulai dengan, surat-surat diputar 90 derajat, kemudian dengan 70% melalui animasi, mereka telah animasi untuk menghadapi pemirsa.

Kita dapat menerapkan kumpulan bingkai utama ini ke setiap rentang seperti:

.byline span {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}

Hasilnya adalah setiap kontainer spanyang menahan setiap huruf akan memudar dan berputar perlahan ke tempatnya, sebelum memudar pada akhir animasi.

Menyusunnya bersama kita memiliki finished demo.