One place for hosting & domains

      Cara

      Cara Menggunakan ViewChild di Angular untuk Mengakses Komponen Anak, Arahan, atau Elemen DOM


      Pengantar

      Artikel ini akan memperkenalkan Anda dengan dekorator ViewChild dari Angular.

      Mungkin ada kalanya Anda ingin mengakses arahan, komponen anak, atau elemen DOM dari kelas komponen induk. Dekorator ViewChild menghasilkan elemen pertama yang sesuai dengan suatu arahan, komponen, atau pemilih referensi templat yang ditentukan.

      Menggunakan ViewChild dengan Arahan

      ViewChild memungkinkan untuk mengakses arahan.

      Umpamakan kita memiliki SharkDirective.

      Idealnya, Anda akan menggunakan @angular/cli untuk melakukan generate arahan Anda:

      • ng generate directive shark

      Cara lainnya, Anda mungkin perlu menambahkannya secara manual ke app.module.ts:

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Arahan kita akan mencari elemen dengan atribut appShark dan mengawali teks di dalam elemen dengan kata Shark:

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      Selanjutnya, kita akan menambahkan Shark ke Fin dengan menggunakannya di dalam templat komponen:

      app.component.html

      <span appShark>Fin!</span>
      

      Ketika melihat aplikasi di dalam peramban, akan muncul tampilan seperti:

      Output

      Shark Fin!

      Sekarang, kita dapat mengakses variabel instans creature dari SharkDirective dan menetapkan variabel instans extraCreature dengan nilainya:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Kita menggunakan penentu di sini untuk menentukan variabel extraCreature. Perhatikan bahwa kita menunggu kait siklus hidup AfterViewInit untuk mengakses variabel, karena ini saatnya komponen anak dan arahan menjadi tersedia.

      Ketika melihat aplikasi di peramban, kita akan tetap melihat pesan "Shark Fin!". Namun, dalam log konsol, akan muncul tampilan:

      Output

      Dolphin

      Komponen induk dapat mengakses nilai dari arahan.

      Menggunakan ViewChild dengan Elemen DOM

      ViewChild memungkinkan untuk mengakses elemen DOM asli yang memiliki variabel referensi templat.

      Umpamakan kita memiliki <input> dalam templat dengan variabel referensi #someInput:

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Sekarang, kita dapat mengakses <input> dengan ViewChild dan menetapkan value:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Ketika ngAfterViewInit dijalankan, nilai <input> akan ditetapkan menjadi:

      Output

      Whale!

      Komponen induk dapat mengatur nilai dari Element DOM anak.

      Menggunakan ViewChild dengan Komponen Anak

      ViewChild memungkinkan untuk mengakses komponen anak dan memanggil variabel instans akses atau metode yang tersedia bagi anak.

      Umpamakan kita memiliki ChildComponent. Idealnya, Anda akan menggunakan @angular/cli untuk melakukan generate kompenen:

      • ng generate component child --flat

      Cara lainnya, Anda mungkin perlu menciptakan berkas child.component.css dan child.component.html serta menambahkannya secara manual ke app.module.ts:

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Kita akan menambahkan metode whoAmI ke ChildComponent yang menghasilkan pesan:

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      Selanjutnya, kita akan mereferensikan komponen di dalam templat aplikasi kita:

      app.component.html

      <app-child>child works!</app-child>
      

      Sekarang, kita dapat memanggil metode whoAmI dari dalam kelas komponen induk dengan ViewChild seperti ini:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Ketika melihat aplikasi di peramban, log konsol akan menampilkan:

      Output

      I am a child component!

      Komponen induk dapat memanggil metode whoAmI dari komponen anak.

      Kesimpulan

      Anda telah mempelajari cara menggunakan ViewChild untuk mengakses suatu arahan, komponen anak, dan elemen DOM dari kelas komponen induk.

      Jika referensi berubah menjadi elemen baru secara dinamis, ViewChild akan secara otomatis memperbarui referensinya.

      Dalam kasus saat Anda ingin mengakses beberapa anak, Anda akan menggunakan ViewChildren.

      Jika Anda ingin mempelajari lebih lanjut tentang Angular, lihat halaman topik Angular kami untuk proyek latihan dan pemrograman.



      Source link

      Cara Mencegah Ganti Baris dengan CSS


      Pengantar

      Para pengembang biasanya suka mengemas teks di halaman web. Mengemas teks yang dibatasi dengan cara tertentu dan mencegah masalah desain. Pengemasan teks juga dapat mencegah guliran horizontal. Namun, ada saatnya Anda ingin memblokir teks agar tetap di baris yang sama, berapa pun panjangnya. Anda dapat mencegah ganti-baris dan pengemasan teks untuk elemen tertentu dengan properti white-space di CSS.

      Dalam tutorial ini, Anda akan menata gaya blok teks yang sama dengan empat cara berbeda, pertama dengan ganti baris, kemudian tiga kali tanpa ganti baris:

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon.  Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Hal ini akan memberi Anda sejumlah opsi untuk mengemas atau tidak mengemas teks.

      Prasyarat

      Untuk menyelesaikan tutorial ini, Anda akan memerlukan:

      Langkah 1 — Mencegah dan Memaksa Ganti-Baris di CSS

      Dalam langkah ini, Anda akan membuat lembar gaya dengan tiga kelas berbeda. Masing-masing akan menangani ganti-baris yang berbeda: yang pertama akan memutus teks secara asali, sedangkan yang kedua dan ketiga akan memaksa teks tidak membuat baris baru dan berganti baris.

      Pertama, buat dan buka berkas baru bernama main.css dengan nano atau editor pilihan Anda:

      Tambahkan konten berikut, yang akan memperkenalkan tiga kelas CSS yang menggunakan beberapa properti, termasuk white-space:

      ./main.css

      .sammy-wrap {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
      }
      .sammy-nowrap-1 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
      }
      .sammy-nowrap-2 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      

      Kelas pertama adalah .sammy-wrap. Ini mendefinisikan enam properti CSS umum yang meliputi border-radius, background-color, border max-width, padding, dan margin-bottom. Kelas ini akan membuat kotak visual, tetapi tidak mendefinisikan properti pengemasan khusus. Berarti ini akan mengganti baris secara asali.

      Kelas kedua adalah .sammy-nowrap-1. Ini mendefinisikan kotak yang sama seperti .sammy-wrap, tetapi kini Anda menambahkan properti lain: white-space. Properti white-space memiliki banyak opsi, semuanya mendefinisikan cara memperlakukan white space di dalam elemen yang ditentukan. Di sini, Anda telah mengatur white-space ke nowrap, yang akan mencegah semua ganti baris.

      Kelas ketiga adalah .sammy-nowrap-2. Ini menambahkan white-space dan dua properti tambahan: overflow dan text-overflow. Properti overflow menangani scrollable overflow, yang terjadi bila konten di dalam elemen melampaui tepi elemen itu. Properti overflow dapat membuat konten bisa digulir, terlihat, atau tersembunyi. Anda mengatur overflow ke hidden kemudian menggunakan properti text-overflow untuk menambahkan penyesuaian lebih lebih banyak. text-overflow dapat membantu Anda memberi petunjuk kepada pengguna bahwa teks tambahan masih tersembunyi. Anda telah mengaturnya ke ellipsis, sehingga baris Anda tidak akan berganti atau melampaui kotak. CSS akan menyembunyikan teks yang melampaui batas dan menyembunyikan konten dengan ....

      Simpan dan tutup berkas Anda.

      Kini Anda sudah memiliki lembar gaya, Anda siap membuat berkas HTML pendek dengan beberapa teks sampel. Kemudian, Anda akan memuat laman web di peramban dan memeriksa cara CSS mencegah ganti baris.

      Langkah 2 — Membuat Berkas HTML

      Dengan kelas CSS yang didefinisikan, Anda dapat menerapkannya ke beberapa teks sampel.

      Buat dan buka berkas bernama index.html di editor pilihan Anda. Pastikan menempatkannya dalam folder yang sama seperti main.css:

      Tambahkan konten berikut, yang akan menghubungkan main.css sebagai stylesheet, kemudian terapkan kelas ke blok teks sampel:

      ./index.html

      <!DOCTYPE HTML>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>How To Prevent Line Breaks with CSS</title>
      <link href="https://www.digitalocean.com/community/tutorials/main.css" rel="stylesheet">
      </head>
      
      <body>
      <p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
      </body>
      </html>
      

      Anda telah memberi gaya pengemasan standar ke blok teks pertama, gaya nowrap pada blok teks kedua, dan nowrap yang dibuat hidden dengan ellipsis pada blok teks ketiga. Anda telah memberikan sammy-wrap ke sampel keempat, tetapi Anda mengesampingkan pengemasan asali dengan memasukkan spasi penggabung (&nbsp;) secara langsung ke dalam HTML. Jika Anda perlu mencegah ganti baris sebagai situasi sekali jalan, maka spasi penggabung dapat menjadi solusi cepat.

      Buka index.html di peramban web dan lihat hasilnya. Empat blok teks Anda akan terlihat seperti ini:

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon.  Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Anda berhasil menyesuaikan properti CSS untuk mencegah atau memungkinkan ganti baris dalam empat cara berbeda.

      Kesimpulan

      Dalam tutorial ini, Anda menggunakan CSS untuk mencegah ganti baris pada blok teks. Anda telah menata gaya teks di dalam kotak, lalu menambahkan properti white-space untuk mengesampingkan pengemasan teks asali. Untuk mempelajari lebih lanjut tentang menangani pengemasan teks dan spasi kosong, sebaiknya mendalami properti white-space di CSS selengkapnya.



      Source link

      Cara Membuat Efek Gulir Parallax Menggunakan Murni CSS Saja di Chrome


      Pengantar

      CSS modern adalah alat bantu andal yang dapat Anda gunakan untuk membuat banyak fitur Antarmuka Pengguna (UI) mutakhir. Dahulu, fitur ini mengandalkan pustaka JavaScript.

      Dalam panduan ini, Anda akan menyiapkan beberapa baris CSS untuk membuat efek gulir parallax pada halaman web. Anda akan menggunakan gambar dari placekitten.com sebagai gambar latar belakang penampung.

      Anda akan memiliki halaman web dengan efek gulir parallax yang murni menggunakan CSS saja setelah menyelesaikan tutorial.

      Peringatan: Artikel ini menggunakan properti CSS eksperimental yang tidak berfungsi di semua peramban. Proyek ini telah diuji dan berfungsi di Chrome. Teknik ini kurang berhasil di Firefox, Safari, dan iOS karena adanya beberapa optimalisasi di peramban-peramban tersebut.

      Langkah 1 — Membuat Proyek Baru

      Dalam langkah ini, gunakan baris perintah untuk menyiapkan folder dan berkas proyek baru. Untuk memulai, buka terminal Anda dan buat folder proyek baru.

      Ketikkan perintah berikut untuk membuat folder proyek:

      Dalam hal ini, Anda menamai folder tersebut css-parallax. Sekarang, masuk ke folder css-parallax:

      Selanjutnya, buat berkas index.html di folder css-parallax dengan perintah nano:

      Anda akan menempatkan semua HTML untuk proyek ke dalam berkas ini.

      Di langkah selanjutnya, Anda akan mulai membuat struktur halaman web.

      Langkah 2 — Menyiapkan Struktur Aplikasi

      Dalam langkah ini, Anda akan menambahkan HTML yang diperlukan untuk membuat struktur proyek.

      Di dalam berkas index.html, tambahkan kode berikut:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Ini adalah struktur dasar kebanyakan halaman web yang menggunakan HTML.

      Tambahkan kode berikut di dalam tag <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Kode ini menghasilkan tiga bagian berbeda. Dua bagian akan memiliki gambar latar belakang, dan satu lagi akan berupa latar belakang statis dan polos.

      Dalam beberapa langkah selanjutnya, Anda akan menambahkan gaya untuk setiap bagian menggunakan kelas yang Anda tambahkan di HTML.

      Langkah 3 — Membuat Berkas CSS dan Menambahkan CSS Awal

      Dalam langkah ini, Anda akan membuat sebuah berkas CSS. Kemudian, Anda akan menambahkan CSS awal untuk menata gaya situs web dan membuat efek parallax.

      Pertama, buat berkas styles.css di folder css-parallax dengan perintah nano:

      Di sinilah Anda akan menempatkan semua CSS yang diperlukan untuk membuat efek gulir parallax.

      Selanjutnya, mulai dengan kelas .wrapper. Di dalam berkas styles.css, tambahkan kode berikut:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Kelas .wrapper mengatur properti perspective dan scroll untuk keseluruhan halaman.

      Tinggi pelipat perlu diatur ke nilai tetap agar efek dapat berfungsi. Anda dapat menggunakan unit vh viewport yang telah diatur ke 100 untuk mendapatkan ketinggian penuh viewport layar.

      Bila Anda mengatur skala gambar, bilah gulir horizontal akan ditambahkan ke layar, sehingga Anda dapat menonaktifkannya dengan menambahkan overflow-x: hidden;. Properti perspective mensimulasikan jarak dari viewport ke elemen semu yang akan Anda buat dan transformasikan lebih jauh di CSS.

      Di langkah selanjutnya, Anda akan menambahkan CSS lainnya untuk menata gaya halaman web.

      Langkah 4 — Menambahkan Gaya untuk Kelas .section

      Dalam langkah ini, Anda akan menambahkan gaya ke kelas .section.

      Di dalam berkas style.css, tambahkan kode berikut di bawah kelas wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Kelas .section mendefinisikan properti ukuran, tampilan, dan teks untuk bagian utama.

      Atur posisi relative agar anak, .parallax::after dapat sepenuhnya diposisikan secara relatif ke elemen induk .section.

      Setiap bagian memiliki view-height(vh) sebesar 100 untuk mengambil ketinggian penuh viewport. Nilai ini dapat diubah dan diatur ke ketinggian apa pun yang Anda sukai untuk setiap bagian.

      Terakhir, properti CSS selebihnya digunakan untuk memformat dan menambahkan penataan gaya pada teks di dalam setiap bagian. Properti ini memosisikan teks di tengah setiap bagian dan menambahkan warna white (putih).

      Selanjutnya, Anda akan menambahkan elemen semu dan menata gayanya untuk membuat efek parallax pada dua bagian di HTML.

      Langkah 5 — Menambahkan Gaya untuk Kelas .parallax

      Dalam langkah ini, Anda akan menambahkan gaya ke kelas .parallax.

      Pertama, Anda akan menambahkan elemen semu di kelas .parallax yang akan diberi gaya.

      Catatan: Anda dapat mengunjungi dokumentasi web MDN untuk mempelajari lebih lanjut tentang elemen semu CSS.

      Tambahkan kode berikut di bawah kelas .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Kelas .parallax menambahkan elemen semu ::after ke gambar latar belakang dan menyediakan transformasi yang diperlukan untuk efek parallax.

      Elemen semu adalah anak terakhir dari elemen dengan kelas .parallax.

      Paruh pertama dari kode menampilkan dan memosisikan elemen semu. Properti transform menjauhkan elemen semu dari kamera di z-index, lalu menskalakannya kembali untuk mengisi viewport.

      Karena elemen semu menjauh, seakan-akan bergerak lebih lambat.

      Di langkah selanjutnya, Anda akan menambahkan gambar latar belakang dan gaya latar belakang statis.

      Langkah 6 — Menambahkan Gambar dan Latar Belakang untuk Setiap Bagian

      Dalam langkah ini, Anda akan menambahkan properti CSS terakhir untuk menambahkan gambar latar belakang dan warna latar belakang bagian statis.

      Pertama, tambahkan warna latar belakang pekat ke bagian .static dengan kode berikut setelah kelas .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Kelas .static menambahkan latar belakang ke bagian statis yang tidak memiliki gambar.

      Kedua bagian dengan kelas .parallax juga memiliki kelas ekstra yang masing-masing berbeda. Gunakan kelas .bg1 dan kelas .bg2 untuk menambahkan gambar latar belakang Kitten.

      Tambahkan kode berikut ke kelas .static:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Kelas .bg1, .bg2 menambahkan masing-masing gambar latar belakang untuk setiap bagian.

      Gambar dari situs web placekitten. Ini adalah layanan untuk mendapatkan gambar anak kucing untuk digunakan sebagai penampung.

      Karena semua kode untuk efek gulir parallax telah ditambahkan, Anda dapat menautkan ke berkas styles.css di index.html.

      Langkah 7 — Menautkan styles.css dan Membuka index.html di Peramban

      Dalam langkah ini, Anda akan menautkan berkas styles.css dan membuka proyek di peramban untuk melihat efek gulir parallax.

      Pertama, tambahkan kode berikut ke tag <head> di berkas index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Sekarang, Anda dapat membuka berkas index.html di peramban:

      Gif efek gulir parallax

      Dengan demikian, Anda telah menyiapkan halaman web yang berfungsi dengan efek gulir. Lihatlah repositori GitHub ini untuk mengetahui kode selengkapnya.

      Kesimpulan

      Dalam artikel ini, Anda menyiapkan proyek dengan berkas index.html dan styles.css serta sekarang memiliki halaman web yang fungsional. Anda telah menambahkan struktur halaman web dan membuat gaya untuk berbagai bagian di situs.

      Anda bisa saja menempatkan gambar yang digunakan atau membuat efek parallax menjauh sehingga gerakannya menjadi lebih lambat. Anda harus mengubah jumlah piksel pada properti perspective dan transform. Jika Anda tidak ingin gambar latar belakang bergulir sama sekali, gunakan background-attachment: fixed; sebagai ganti perspective/translate/scale.



      Source link