Cara Meng-kode Scrolling Situs “Alien Lander”

() translation by (you can also view the original English article)

Dalam tutorial ini, yang kedua dalam dua seri bagian, kami akan mengambil ilustrasi berbasis vektor yang luar biasa yang dihasilkan di "Cara Membuat Latar Belakang Bergulir Panjang untuk Situs web" Yulia Sokolova dan mengodekannya menjadi situs langsung.

Ilustrasi

Cara Membuat Latar Belakang Panjang Bergulir untuk Situs Web

Yulia Sokolova

Apa yang Akan Kita Bangun

Kami akan menempatkan semuanya bersama-sama sehingga ketika Anda menggulir ke bawah dari bagian atas halaman Anda akan melihat "Pendarat Alien" membuat jalan untuk mendarat. Pada awalnya kita akan melihat UFO melayang di angkasa.

Image: https://cms-assets.tutsplus.com/uploads/users/53/posts/26826/image/ufo.png

Saat kami menggulir UFO akan mencapai atmosfer dan menjadi "komet alien".

Image: https://cms-assets.tutsplus.com/uploads/users/53/posts/26826/image/comet.png

Dan akhirnya, ketika melewati garis pohon, itu akan berubah menjadi "pria hijau kecil" yang membuat pendaratannya di tanah.

Lihatlah demo langsung!

Gambar SVG

Dalam proyek ini, kami akan menggunakan gambar SVG sehingga kami dapat mengambil keuntungan dari kemampuan mereka untuk secara otomatis melakukan reskala, dan ukuran file yang kecil.

Sebelum kita mulai coding Anda akan membutuhkan gambar yang dibuat di bagian satu dari seri tutorial ini, dipisahkan menjadi empat file SVG:

UFO sebagai file bernama "ufo.svg"
"Komet alien" sebagai file bernama "alien_comet.svg"
"Manusia hijau kecil" sebagai file bernama "alien_landing.svg"
Gambar latar belakang dengan tiga item di atas dihapus, sebagai file bernama "background.svg"

Anda dapat mengekspor gambar SVG ini sendiri dari aplikasi grafik pilihan Anda jika Anda mau, atau alternatifnya Anda akan menemukan keempat gambar siap digunakan dalam file sumber di GitHub.

Pengaturan Struktur Dasar

Buat folder baru untuk proyek Anda dan di dalamnya buat subfolder bernama "css" dan yang lain bernama "gambar".

Salin dan sisipkan keempat gambar SVG Anda ke folder “gambar” baru.

Dalam folder "css" buat sebuah file bernama "style.css".

Di folder utama buat file baru bernama "index.html".

Struktur folder Anda seharusnya sekarang terlihat seperti ini:

Di "index.html" file tambahkan HTML dasar berikut untuk mendapatkan hal-hal penting dan memuat stylesheet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
</head>
<body>


  
</body>
</html>

Tambahkan Background

Ini mungkin tampak kontra-intuitif, tetapi kami sebenarnya akan menambahkan gambar latar belakang kami menggunakan elemen img daripada sebagai gambar latar belakang CSS. Kami melakukan ini karena:

Kami ingin memanfaatkan kemampuan SVG untuk mengubah ukuran, mengisi seluruh viewport dengan "background.svg" kami gambar tidak peduli apa dimensi dari jendela browser.
Agar teknik pengguliran bekerja, kita perlu mengetahui ketinggian gambar latar belakang.
Karena kami membiarkan gambar latar belakang kami berukuran sangat tipis, kami tidak memiliki cara untuk mengetahui berapa tinggi awalnya.
Karena kami tidak dapat mengetahui ketinggian gambar latar belakang sebelumnya, kami harus mendeteksi setelah gambar setelah dimuat.
Jika kami menetapkan "background.svg" sebagai gambar latar CSS, tingginya tidak akan memengaruhi tata letak situs, membuat tingginya sulit dideteksi.
Dengan memasukkan "background.svg" sebagai gambar biasa, bukan tingginya akan mempengaruhi tata letak situs, membuat tingginya relatif mudah dideteksi menggunakan jQuery.

Sekarang Anda mengerti mengapa kami menggunakan pendekatan ini, mari kita mulai coding!

Di "index.html" Anda file tambahkan kode ini:

1	<img class="background" src="images/background.svg">

Jika Anda melihat file Anda di browser sekarang, Anda harus melihat gambar yang mengisi viewport. Namun, masih ada beberapa ruang putih di sekitar tepi.

Ini karena peramban menyertakan sedikit margin pada elemen body secara default. Untuk mengesampingkan ini, di "style.css" file tambahkan CSS ini:

1	body {
2	margin: 0;
3	}

Ada juga standar browser lain yang harus kita ganti, yaitu properti tampilan pada gambar yang diatur ke inline. Jika Anda menggulir ke bagian bawah halaman Anda, Anda akan melihat saat ini ada ruang putih kecil di bawah gambar karena default ini. Ubah dengan menambahkan:

1	img {
2	display: block;
3	}

Ubah dengan menambahkan: gambar isi jendela flush dengan tepinya, dan jika Anda mengubah ukuran lebar jendela Anda akan melihat gambar SVG melakukan rescale sendiri agar sesuai dengan ukuran baru. Ketinggian tata letak situs juga akan berubah untuk mempertahankan rasio aspek yang benar untuk "background.svg" gambar.

Tambahkan Kontainer Foreground

Untuk membuat gambar yang baru saja kita tempatkan sebagai gambar latar belakang, kita perlu cara untuk membuat sisa konten kita duduk di atasnya di latar depan. Kita dapat mencapai ini dengan menambahkan elemen div yang akan bertindak sebagai wadah, kemudian memodifikasi posisi dan properti z-index-nya.

Di "index.html" Anda file, setelah gambar yang baru saja Anda tambahkan, masukkan div baru ini:

1	<div class="foreground">
2	</div>

Dan dalam "style.css" tambahkan CSS ini:

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

Mari kita jalankan apa yang kita lakukan dengan kode di atas.

Pertama, dengan mengatur posisi ke absolut kita mengambil elemen dari aliran dokumen biasa, (yang jika tidak akan menempatkannya di bawah gambar latar belakang), memungkinkan kita untuk menempatkannya di mana saja kita pilih.

Kemudian, kita mengatur properti atas dan kiri ke 0 yang menggeser elemen ke atas jendela dan secara horizontal menyelaraskannya dengan gambar latar belakang kita.

Setelah itu kami berikan elemen tinggi dan lebar 100%. Ini memastikan elemen tidak runtuh hingga tidak ada, menyembunyikan konten apa pun di dalamnya.

Akhirnya, kami mengatur indeks-z ke 1 yang membawa elemen ke depan sehingga duduk di depan gambar latar belakang kami (yang pada indeks-z standar otomatis). Ini mencegah konten di dalam elemen tidak dikaburkan oleh gambar latar belakang.

Penampung latar depan kami sekarang siap untuk menambahkan konten ke dalamnya.

Tambahkan Panel UFO

Cara kami akan membuat "tanah" UFO kami di tanah di bagian bawah adalah dengan membuat tiga panel, satu untuk setiap tahap "pendaratan". Kami kemudian akan menambahkan gambar SVG yang sesuai untuk setiap panel, seperti "ufo.svg" file misalnya, sebagai gambar latar belakang posisi tetap. Gambar akan tetap ada selama bergulir sementara latar belakang bergerak di belakangnya, menciptakan ilusi keturunan.

Di dalam div "foreground" Anda, tambahkan div baru ini:

1	<div class="ufo_section"></div>

Sekarang tambahkan kode berikut ke CSS Anda:

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

Di baris pertama kode kami di atas, kami memberikan elemen tinggi 100% untuk memastikan kontennya akan terlihat. Kemudian, kami menambahkan "ufo.svg" kami gambar sebagai latar belakang. Kami menetapkan pengulangan latar belakang ke tidak berulang karena kami hanya ingin satu UFO muncul, dan kemudian kami membuat posisi latar belakang menempatkan gambar di tengah secara horizontal dan vertikal.

Dengan properti ukuran latar belakang kami, kami menetapkan lebar sebagai nilai berbasis persentase dan memungkinkan tinggi untuk dihitung secara otomatis. Lebar ini diambil dari gambar vektor asli di mana lebar UFO sekitar 40% dari lebar keseluruhan ilustrasi.

Dengan mengatur lebar "ufo.svg" kami gambar sebagai persentase, ketika jendela diubah ukurannya dan "background.svg" gambar berubah dengan itu, gambar UFO juga akan menyesuaikan lebar untuk mempertahankan proporsi yang diinginkan.

Pada baris terakhir, kami mengatur lampiran latar belakang untuk diperbaiki, yang berarti bahwa gambar akan tetap di tempatnya saat kami menggulir, memberi kami ilusi kami tentang keturunan.

Coba segarkan halaman Anda dan gulirkan sekarang - Anda akan melihat UFO bergerak secara vertikal di antara planet-planet.

Tambahkan Comet dan Landing Panels

Saat Anda menggulir ke bawah di situs Anda, setelah Anda turun cukup jauh Anda akan melihat UFO menghilang. Ini terjadi karena kami bergulir melewati ketinggian panel ufo_section sehingga pada saat itu kami tidak dapat lagi melihat latar belakangnya.

Kami akan menumpuk tiga panel seperti ini di atas satu sama lain, sehingga ketika kami menggulir melewati satu dan latar belakangnya menghilang, latar belakang panel berikut muncul, menciptakan efek dari satu gambar yang digantikan oleh yang berikutnya.

Jadi sekarang kami akan mengulangi proses yang kami gunakan di atas untuk memasukkan "alien_comet.svg" dan “alien_landing.svg” gambar.

Untuk HTML Anda, tambahkan berikut ini tepat setelah div ufo_section Anda dan masih di dalam div latar depan Anda:

1	<div class="comet_section"></div>
2	<div class="landing_section"></div>

Kemudian ke CSS Anda tambahkan kelas-kelas baru ini:

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

Kami menggunakan semua kode dan teknik yang sama di sini, hanya dengan nama file gambar yang diubah dan lebar pada properti ukuran latar belakang disetel menjadi 15% untuk menyesuaikan dengan gambar yang lebih sempit yang baru saja kami tambahkan.

CSS Anda yang Selesai

"Style.css" Anda file sekarang selesai dan harus berisi kode berikut:

body {
  margin: 0;
}

img {
  display: block;
}

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

Kembali ke situs Anda sekarang, gulir ke bawah dan Anda akan melihat UFO berubah menjadi komet, kemudian sedikit lebih jauh ke bawah menjadi "manusia hijau kecil".

Tambahkan Kalkulasi Tinggi Panel

Saat ini Anda akan melihat kami memiliki beberapa masalah yang harus diselesaikan saat menggulir, dan mereka adalah:

Ketiga panel itu masing-masing tidak cukup tinggi. Ini membuatnya tampak seperti pendarat asing berubah dari satu bentuk ke bentuk lainnya terlalu cepat sehingga tidak pernah sampai ke tanah.
Anda dapat melihat "alien_comet.svg" gambar mulai muncul sebelum "ufo.svg" gambar telah sepenuhnya menghilang, yang terlihat aneh.

Karena "background.svg" kami gambar tidak memiliki ukuran yang tetap, kami tidak akan tahu tinggi piksel yang tepat setiap panel harus sebelum memuat. Namun, apa yang bisa kita putuskan di depan adalah tinggi setiap panel harus sebagai persentase dari ketinggian "background.svg".

Dengan menggunakan jQuery kita dapat menerapkan proses ini:

Tentukan tinggi yang kita inginkan setiap panel sebagai persentase, (atau fraksi), dari "background.svg" tinggi gambar.
Mendeteksi ketinggian "background.svg" setelah itu dimuat.
Hitung dan atur ketinggian panel berdasarkan dua bagian informasi di atas.

Sementara kami melakukannya, kami juga akan menambahkan beberapa div kosong tambahan untuk bertindak sebagai spacer di antara setiap panel dan menyetel tinggi mereka menggunakan jQuery juga. Menambahkan ruang di antara panel akan membuat transisi yang lebih mulus, memecahkan masalah melihat "alien_comet.svg" gambar sebelum "ufo.svg" gambar hilang.

gambar hilang. Perbarui HTML Anda sehingga ada spacer div di antara setiap div yang ada seperti ini:

<div class="foreground">
  <div class="ufo_section"></div>
  <div class="spacer_one"></div>
  <div class="comet_section"></div>
  <div class="spacer_two"></div>
  <div class="landing_section"></div>
</div>

Dan di bagian kepala, muat di jQuery dengan menambahkan yang berikut:

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Pengaturan Fungsi JavaScript

Sebelum tag </body> penutup, buat sepasang tag <script></script> dan siapkan fungsi baru didalamnya seperti ini: dan siapkan fungsi baru di dalamnya seperti ini:

<script>

  function set_section_heights(){

  }
  
</script>

Kami ingin fungsi ini diaktifkan saat halaman pertama memuat, dan kapan saja diubah ukurannya, jadi untuk mencapai ini juga tambahkan kode berikut setelah tag scriptpembuka Anda:

$(document).ready(function(){
  set_section_heights();
});

$(window).resize(function(){
  set_section_heights();
});

Dapatkan Ketinggian Gambar Latar Belakang

Di dalam fungsi set_section_heights (), hal pertama yang perlu kita lakukan adalah mencari tahu berapa tinggi gambar latar belakang kita saat ini dan menyimpannya sebagai variabel. 5

1	var doc_height = $(".background").height();

Dengan bagian pertama dari kode, $ (". Background"), jQuery menemukan elemen dengan latar belakang nama kelas. 5 fungsi kemudian mendapatkan tinggi piksel elemen tersebut sebagai bilangan bulat. Ini memberitahu kita seberapa tinggi "background.svg" kami gambar adalah dan menyimpan nomor itu di variabel doc_height.

Tentukan Heights Bagian Ditujukan

Sekarang kami akan menyiapkan objek yang dapat kami definisikan:

Nama kelas dari setiap elemen yang ingin kita atur tingginya.
Seberapa tinggi elemen itu harus sebagai pecahan tinggi latar belakang.

Kami akan melakukan iterasi melalui objek ini dan menggunakan nilai yang dikandungnya untuk mengubah ukuran bagian di latar depan kami.

Mari mulai hanya dengan satu entri di objek:

1	var section_heights = {
2	"ufo_section": 0.25
3	}

Di sini kami telah menetapkan indeks, (nilai di sebelah kiri), ke ufo_section agar cocok dengan nama kelas dari bagian pertama kami.

Lalu kami menetapkan nilai ke 0,25 yang merupakan cara lain untuk mengekspresikan 25%. Sebentar lagi, kami akan mengalikan nilai ini dengan jumlah yang disimpan dalam variabel doc_height, yaitu tinggi gambar latar belakang. Dengan melakukan ini, kami akan mengatakan bahwa kami ingin panel ufo_section menjadi 25% dari tinggi "background.svg" saat ini.

Misalnya, jika ketinggian "background.svg" adalah 1000px tinggi ufo_section akan keluar sebagai 250px:

1000 * 0.25 = 250

Setelah kami mempelajari cara kerja objek ini, mari tambahkan beberapa entri untuk elemen lain yang ingin kami atur. Perbarui objek Anda ke yang berikut:

var section_heights = {
  "ufo_section": 0.25,
  "spacer_one": 0.03,
  "comet_section": 0.36,
  "spacer_two": 0.06,
  "landing_section": 0.298
}

Catatan: Saya memilih nilai-nilai ini berdasarkan trial and error sehingga merasa bebas untuk bermain-main dengan angka setelah menyelesaikan tutorial ini untuk melihat efeknya.

Iterasi `section_heights` Objek

Dengan objek kami selesai, kami siap memulai iterasi melaluinya dan mengubah ukuran panel kami.

Pertama-tama, kita memerlukan fungsi $ .each () untuk mengulang objek section_heights dan mengekstrak indeks dan nilai, (mewakili nama kelas dan tinggi masing-masing), dari setiap entri yang dikandungnya.

Tambahkan kode ini setelah objek section_heights Anda:

1	$.each( section_heights, function( index, value ) {
2	console.log( "Index: " + index, "\| Value: " + value );
3	});

Untuk memungkinkan Anda melihat bagaimana fungsi iterasi di atas menghasilkan variabel indeks dan nilai, kami menggunakan console.log () untuk menulis pesan kecil ke konsol untuk setiap entri di objek section_heights.

Muat ulang situs Anda, buka Alat Pengembang Web Chrome (atau yang setara di browser pilihan Anda), dan lihat konsol. Anda seharusnya melihat ini:

Di sebelah kiri setiap pesan setelah Indeks: Anda dapat melihat indeks untuk setiap entri, yaitu nama kelas dari elemen yang ingin diubah ukurannya.

Di sebelah kanan setiap pesan setelah Nilai: Anda dapat melihat nilai untuk setiap entri, yaitu fraksi tinggi keseluruhan setiap panel seharusnya.

Hitung dan Tetapkan Heights Bagian

Sekarang alih-alih hanya mencatat data ini ke konsol, mari kita gunakan untuk mengatur ukuran bagian latar depan. Hapus console.log () garis dan ganti dengan ini:

1	$( "." + index ).height( Math.floor(value * doc_height) );

Mari kita merinci apa yang garis ini lakukan.

Pertama kita memiliki $ ("." + Index). Kami menggunakan ini untuk menemukan elemen yang ingin kami ubah ukurannya. Sebagai contoh, dengan entri pertama di objek kami, indeks diatur ke ufo_section. Dalam hal ini bagian pertama dari kode kami akan dievaluasi menjadi $. (".ufo_section"). Dengan kode ini, jQuery diminta untuk mencari halaman untuk elemen dengan kelas ufo_section.

Selanjutnya kita tambahkan .height (...). 5Dengan kode ini, jQuery akan mengatur ketinggian elemen yang ditemukannya, mengubahnya menjadi nilai yang diteruskan di antara tanda kurung.

Di antara tanda kurung Anda akan melihat nilai * doc_height. Di sinilah kita melakukan perkalian yang kami sebutkan sebelumnya untuk menghitung tinggi panel yang dimaksud. Sebagai contoh, entri pertama dari objek kami memiliki nilai 0,25. Nomor ini akan dikalikan dengan jumlah yang disimpan dalam variabel doc_height.

Di sekitar perkalian kedua variabel tersebut, Anda akan melihat Math.floor (). Ini membulatkan hasil perkalian kami ke bilangan bulat terdekat.

So putting it all together, if the value of doc_height is 5197, the first entry in our object would multiply that by 0.25 giving us a result of 1299.25.

Math.floor () akan membulatkan jumlah itu menjadi 1299. Ini berarti kode kami sekarang akan dievaluasi menjadi: $. (".ufo_section") .height (1299);

Dengan baris ini, jQuery akan menemukan elemen dengan kelas ufo_section dan mengatur tingginya ke 1299px.

HTML & JavaScript Lengkap Anda

Itu membungkus HTML dan JavaScript Anda. "Index.html" Anda selesai file sekarang harus berisi kode ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>

  <img class="background" src="images/background.svg">

  <div class="foreground">
    <div class="ufo_section"></div>
    <div class="spacer_one"></div>
    <div class="comet_section"></div>
    <div class="spacer_two"></div>
    <div class="landing_section"></div>
  </div>

<script>

  $(document).ready(function(){
    set_section_heights();
  });

  $(window).resize(function(){
    set_section_heights();
  });

  function set_section_heights(){

    var doc_height = $(".background").height();

    var section_heights = {
      "ufo_section": 0.25,
      "spacer_one": 0.03,
      "comet_section": 0.36,
      "spacer_two": 0.06,
      "landing_section": 0.298
    }

    $.each( section_heights, function( index, value ) {
      $( "." + index ).height( Math.floor(value * doc_height) );
    });

  }
  
</script>

</body>
</html>

Muat ulang situs Anda sekarang untuk melihat kode dalam tindakan, dan ketika Anda memeriksa HTML Anda, Anda akan melihat ukuran yang baru dihitung muncul sebaris:

Ubah ukuran jendela browser Anda dan Anda akan melihat nilai ini menghitung ulang dan memperbarui, misalnya:

Dan Anda Selesai!

Lihatlah hasil akhirnya! Sekarang ketika Anda mulai di bagian paling atas halaman dan mulai menggulir Anda akan melihat UFO mulai turun. Ketika mencapai atmosfer itu menghilang untuk sedikit dan "komet alien" mengambil tempatnya dan terus turun. Di atas pohon-pohon itu menghilang sekali lagi dan seorang "pria hijau kecil" menyelesaikan perjalanan ke tanah.

Seperti yang saya sebutkan sebelumnya, adalah ide bagus untuk bermain-main dengan nilai yang ditetapkan di objek section_heights sehingga Anda dapat melihat bagaimana efeknya aliran pendarat melalui berbagai tahapannya.

Saya harap Anda menikmati tutorial ini dan mendapatkan beberapa ide baru untuk hal-hal keren yang dapat Anda lakukan dengan gambar SVG dan latar belakang tetap.

Terima kasih sekali lagi kepada Yulia atas ilustrasi vektor aslinya, terima kasih telah membaca, dan saya akan berjumpa lagi dengan Anda!