Membuat Animasi Laba-laba dengan Bahasa CSS di Blog

agung wisudhatama November 18, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

SPIDERMAN Ya, hero dengan simbol seekor laba-laba dengan warna khas Merah dan Biru dari buah karya Stan Lee dan Steve Ditko ini sudah cukup terkenal di dunia. Film hero Spiderman seri mana yang tidak booming. Semua seri filmnya mampu menembus singgasana Hollywood. Dan fans fanatiknya tersebar di seluruh dunia.

Hero yang identik dengan jaringnya ini memiliki serial film yang epik. Dibawah ini urutan serialnya :

1. Spiderman dengan tokoh utama Tobey Macquire
2. Spiderman 2 dengan tokoh utama Tobey Macquire
3. Spiderman 3 dengan tokoh utama Tobey Macquire
4. The Amazing Spiderman dengan tokoh utama Andrew Garfield
5. The Amazing Spiderman 2 dengan tokoh utama Andrew Garfield
6. Spiderman : Home Coming dengan tokoh utama Tom Holland
7. Spiderman : Far from Home dengan tokoh utama Tom Holland
8. Spiderman : No way from Home dengan tokoh utama Tom Holland

Masih banyak film-film yang mengadopsi cerita dari Spiderman dan tidak kalah populer diantaranya : Captain America : Civil War, Venom, Spiderman : Into the Spider Verse, Avengers Infinity Game dan Avengers End Game.

Ini dia animasi Spiderman dalam video game nya.

@wonderwworld Spider-Man 2 Be Greater. Together. Trailer #spiderman #spiderman2 #trailer #game #marvel #ps5 #playstation ♬ son original - Live Wallpaper 4K HD

Aktor Tobey Macquire lah yang mampu mengangkat brand Spiderman masuk dalam jajaran film dan hero bergengsi dari Hollywood. Peran yang dimainkan olehnya mampu membawa kisah menarik dan alur cerita yang sarat makna didalamnya. Sehingga tak ayal filmnya mampu disejajarkan dengan film dari produksi Hollywood lainnya.

Baca Juga :

• Memadukan HTML dan CSS dalam Pemrograman Website Modern
• Cara Menuliskan Lambang Kimia dengan Subscript dan Superscript
• Cara Membuat Bangun Datar Dapat Tampil di Blog dengan Pure CSS

Sosok Spiderman diabadikan tidak hanya pada film. Di konsol game, Spiderman juga mampu menembus angka mutlak yang disukai banyak gamer. Gameplay yang menarik dan musuh yang tidak mudah dikalahkan kecuali dengan strategi tertentu, membuat gamer merasakan atmosfir bermain game dengan adrenalin tinggi.

Dikutip dari Wikipedia bahwa Spiderman, meski seorang pahlawan. Tapi keseharian dari tokoh utamanya tidak lepas dari asuhan sang Bibi May dan seorang gadis bernama Mary Jane Watson. Kisah dramatis keluarga dan percintaan mewarnai aksi heroik dari sang hero laba-laba ini.

Tokoh hero selain Spiderman yang sering berada dalam satu film adalah berikut ini :

1. Captain America
2. Thor
3. Hulk
4. Iron Man
5. Ant Man
6. Doctor Strange
7. Black Widow
8. Scarlet Witch
9. Venom

Itulah dia hero-hero yang ada di Film Avengers selain Spiderman.

Baca Juga :

• Cara Menampilkan dan Membaca Langsung File PDF di Blog
• Memasang Musik Player di Blogspot dengan Pemrograman CSS3
• Cara Memasang Tombol Download Film DraKor dan Keterangannya

Awal Spiderman

Adalah Peter Parker, seorang mahasiswa yang sedang melakukan study banding ke laboratorium dan penelitian serangga bersama dengan teman dan gurunya. Tidak disangka, Peter tergigit seekor laba-laba super yang kemudian bermutasi. Peter yang semula seorang mahasiswa, harus menjalani karakter sebagai seorang hero di kota kecilnya.

Gigitan Laba-laba

Laba-laba yang menggigit tangan Peter adalah seekor laba-laba mutant yang memiliki kekuatan super. Tanpa disadari, Peter dapat mengeluarkan jaring laba-laba dari telapak tangannya. Selain itu dia juga dapat memanjat tembok layaknya seekor laba-laba tanpa bantuan alat apapun.

Kekuatan super itu membawa Peter dalam kehidupan yang penuh petualangan heroik. Motonya "In the Great Power, comes the great responsibility" -- kata-kata epik yang banyak dipakai sebagai quote hingga hari ini. Kata-kata itu merasuk ke dalam relung hati Peter, dan ia harus mengemban tanggung jawab membantu orang yang butuh pertolongan.

Musuh Spiderman

Green Goblin
Dia adalah musuh pertama dari Spiderman. Ayah dari temannya, yaitu Hari Osborn ini bermutasi menjadi goblin hijau dan memakai alat terbang. Senjata khasnya peledak berupa granat berwarna hijau untuk mengalahkan lawan-lawannya.

Sand Man
Selanjutnya adalah Sand Man atau manusia pasir. Flint Marko adalah pemilik kekuatan hebat itu. Dia adalah penjahat kecil yang bertaruh nyawa untuk menghidupi keluarganya. Namun dalam aksinya dia terpapar reaksi atom dan memiliki kekuatan super.

Dr. Octopus
Dr. Octopus adalah salah satu musuh Spiderman yang paling berbahaya dan juga paling ikonik. Otto Octavius adalah seorang ilmuan yang menciptakan tentakel mesin yang membuatnya menjadi penjahat yang berbahaya. Dia adalah dosen Peter di kampusnya dan dia juga sangat jenius hingga meraih penghargaan nobel.

Logo Spiderman

Logo Spiderman mencerminkan keterampilan dan kemampuan unik laba-laba. Kekuatannya adalah indra keenam, kelincahan, kecepatan luar biasa, melempar jaring, dan memanjat permukaan curam. Secara visual, gambar ini diwakili oleh seekor laba-laba berwarna hitam yang juga melambangkan kelenturan, misteri, kekuatan dan perlindungan. Laba-laba juga melambangkan interkoneksi, keseimbangan, kesabaran, kebijaksanaan, kekuatan dan manifestasi.

Laba-laba dalam CSS

Malam hari ini, kita akan mulai mempraktekkan animasi laba-laba dalam bahasa CSS. Masih berlanjut dari artikel sebelumnya yang telah kita bahas yaitu Gwenchana dan artikel Becyandya. Namun, kali ini kita menampilkan aksi animasi seekor laba-laba yang ikonik dari hero Spiderman.

Ini dia tutorialnya :

Caranya sebagai berikut :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut

body { background-color: #000; font-family: "Muli", sans-serif; margin: 0; overflow: hidden; padding: 0; }
.bg { background-image: url('https://www.archerycircuit.com/wp-content/uploads/2016/12/grunge-background-14635619239LT-darken.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; left: 0; position: absolute; top: 0; width: 100%; opacity: 0.5; }

$h2:  4px;
$w2:  30px;
$w3:  10px;
$color-black: #CF000F;
$color-shadow: #1F3A93;

.container {
  animation: spider-anima 12s ease-out;
  animation-fill-mode: forwards;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  @keyframes spider-anima {
    0%  { top: -100px; }
    50% { top: 50%; }
  }
  .eye {
    background-color: #fff;
    height: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
  }
  .eye-right {
    right: 6px;
  }
  .eye-left {
    left: 6px;
  }
} 
.spider-web {
  animation: spider-web-anima 6s ease-out;
  animation-fill-mode: forwards;
  background-color: $color-black;
  border-radius: $h2;
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 2px;
  @keyframes spider-web-anima {
    0%    { height: 0; top: -100px; }
    100%  { height: 50vh; top: 0;}
  }
}
.spider-body {
  background-color: $color-black;
  border-radius: 50%;
  height: 20px;
  left: 50%;  
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  &:before {
    content:"";
    background-color: $color-black;
    border-radius: 50%;
    height: 15px;
    left: 2.5px;
    position: absolute;
    top: -5px;  
    width: 15px;
    z-index: -99;
  }  
}
.right {
  transform: rotateY(180deg);
}
.arm-container {
  .arm {
    background-color: $color-black;
    border-radius: $h2;
    height: $h2;
    position: absolute;
    transform-origin: center left;
    width: $w2;
  }
  .A {
    animation: A-anima 3s infinite ease-in-out;
    transform: rotate(75deg);
    @keyframes A-anima {
      0% {transform: rotate(75deg)}
      50% {transform: rotate(-70deg)}
    }
  }  
  .A:nth-child(2) { animation-delay: -0.2s; }
  .A:nth-child(3) { animation-delay: -0.5s; }
  .A:nth-child(4) { animation-delay: -0.4s; }
  .B {
    animation: B-anima 3s infinite ease-in-out;
    left: calc(100% - 2px);
    transform: rotate(10deg);
    @keyframes B-anima {
      0% {transform: rotate(10deg)}
      50% {transform: rotate(120deg)}
      80% {transform: rotate(20deg)}
    }
  }
  .C {
    animation: C-anima 3s infinite ease-in-out;
    left: calc(100% - 2px);
    transform: rotate(10deg);
    @keyframes C-anima {
      0% {transform: rotate(10deg)}
      50% {transform: rotate(90deg)}
      80% {transform: rotate(10deg)}
    }
  }  
}

.shadow {
  left: calc(50% + 10px);
  background-color: $color-shadow;
}
.shadow {
  .arm { background-color: $color-shadow; }
}
.shadow-body {
  background-color: $color-shadow;
  &:before {
   background-color: $color-shadow;
  }
  .eye {
    display: none;
  }
}

#link {
  bottom: 20px;
  color: #fff;
  opacity: 0.6;
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#link p {margin: 0; margin-left: 5px;}
#link:hover {opacity: 1;}

6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu

<div class="bg"></div>
<div class="spider-web shadow"></div>
<div class="container shadow">
  <div class="arm-container right">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="arm-container left">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="spider-body shadow-body">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
</div>

<div class="spider-web"></div>
<div class="container">
  <div class="arm-container right">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="arm-container left">
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
    <div class="arm A"><div class="arm B"><div class="arm C"></div></div></div>
  </div>
  <div class="spider-body">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
  </div>
</div>

LABA-LABA

Asal kita tahu bahwa Spiderman yang sekarang adalah bermula dari sebuah komik. Ya komik. Dari gambar di buku dan beredar waktu itu, tidak dapat disangka bila Spiderman akan menemui kehebatannya setelah tampil di layar kaca untuk pertama kalinya dengan judul Spiderman dengan tokohnya Tobey Macquire.

Tak disangka pula, Stan Lee sang pembuat hero ini harus menerima dua tawaran dari perusahaan raksasa dalam bidang perfilman. Hollywood dan Sony Entertainment memperebutkan hak cipta dan klaim film dari sang maestro komik dari US tersebut. Dan proses hingga sekarang telah menemukan titik akhir bahwa Spiderman menjadi legenda film yang tidak terbantahkan.

Menjadi pelajaran berharga. Sesuatu apapun itu meski kecil asal dikerjakan dengan serius, suatu saat nanti pasti akan menuai dari hasil yang telah dilakukan selama kita berproses. Bayangkan bila Stan Lee tidak menjadi komikus, mungkin kita saat ini tidak dapat melihat para pahlawan / Marvel Avengers beraksi melawan musuh di TV.

Kerja keras dan ketekunan merupakan kakak adik yang saling menopang, bila salah satu tidak ada. Mungkin tidak ada hasil yang didapat dan hanya hampa. Selamat malam. Salam - Spider Web.

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Animasi Laba-laba dengan Bahasa CSS di Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts