Javascript memudar saat memuat halaman

Question

Dengan kode jQuery sederhana ini Anda dapat memudar di situs web Anda saat dimuat. Secara default, proses fading diatur ke 500 milidetik, tetapi Anda dapat mengubahnya sesuai kebutuhan Anda

Table of Contents Show

Metode 1. Menggunakan properti animasi CSS
Metode 2. Menggunakan properti transisi CSS
Metode 3. Menggunakan CSS & JavaScript
Metode 4. Efek fade-in pada pemuatan halaman Dengan jQuery
Bagaimana cara menambahkan animasi ke pemuatan halaman?
Bagaimana Anda menambahkan efek fade di HTML?
Bagaimana Anda membuat efek fade di JavaScript?
Bagaimana cara memudarkan div di JavaScript?

$(document).ready(function(){

/*! Fades in page on load */
$('body').css('display', 'none');
$('body').fadeIn(500);

});

Saat saya mengunjungi halaman web, saya merasa terganggu saat mencoba berinteraksi dengan elemen saat situs web masih memuat. Seringkali barang berpindah-pindah, font tidak cukup dimuat, dan terasa rusak

Saya tahu saat ini kami terobsesi dalam industri ini dengan mendapatkan setiap milidetik dalam kinerja halaman

Namun dalam beberapa proyek yang baru-baru ini saya perbaiki, saya menambahkan mekanisme pemuatan yang halus dan bersih yang menurut saya membuat pengalaman menjadi lebih baik, meskipun pada akhirnya sedikit menunda waktu pengguna dapat mulai berinteraksi dengan halaman

Baca juga. Buat Tautan Berbagi Sosial Tanpa Alat Apa Pun

Karenanya, dalam artikel ini Anda akan belajar tentang cara memudarkan halaman Anda dengan CSS, JavaScript, dan jQuery

Metode 1. Menggunakan properti animasi CSS

Anda dapat menggunakan properti animasi dan transisi untuk membuat efek fade-in pada pemuatan halaman menggunakan CSS

Sebuah animasi CSS didefinisikan dengan 2 keyframes. Satu dengan opacity disetel ke

body {
  opacity: 0;
  transition: opacity 5s;
}

_1, yang lain dengan opacity disetel ke

body {
  opacity: 0;
  transition: opacity 5s;
}

2

Saat jenis animasi disetel ke

body {
  opacity: 0;
  transition: opacity 5s;
}

_3, animasi memudar dengan mulus di halaman. Properti ini diterapkan pada tag

body {
  opacity: 0;
  transition: opacity 5s;
}

_4

Setiap kali halaman dimuat, animasi ini akan diputar dan halaman akan tampak memudar. Waktu fade in dapat diatur di properti animation

body {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Contoh

Lihat Efek Pen Fade-in pada Pemuatan Halaman – Contoh 1 oleh Sunil Pradhan (@Sunil_Pradhan) di CodePen

Metode 2. Menggunakan properti transisi CSS

Dalam metode ini, badan dapat disetel ke

body {
  opacity: 0;
  transition: opacity 5s;
}

_5

body {
  opacity: 0;
  transition: opacity 5s;
}

1 pada awalnya dan properti transisi digunakan untuk menganimasikan properti ini setiap kali diubah. Saat halaman dimuat,

body {
  opacity: 0;
  transition: opacity 5s;
}

_5 diatur ke

body {
  opacity: 0;
  transition: opacity 5s;
}

2 menggunakan event onload

Karena properti transisi, mengubah opacity sekarang akan tampak memudar di halaman. Waktu fade in dapat diatur di properti transisi

body {
  opacity: 0;
  transition: opacity 5s;
}

_

 <body onload="document.body.style.opacity='1'">
 
</body>

Contoh

Lihat Efek Pen Fade-in pada Pemuatan Halaman – Contoh 2 oleh Sunil Pradhan (@Sunil_Pradhan) di CodePen

Metode 3. Menggunakan CSS & JavaScript

Pertama, Anda perlu membuat aturan CSS untuk saat halaman dibuka dan saat halaman memudar

Efek ini akan bergantung pada properti

body {
  opacity: 0;
  transition: opacity 5s;
}

_5 dan

 <body onload="document.body.style.opacity='1'">
 
</body>

0 dari CSS. Dengan menambahkan dan menghapus kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

_1 pada elemen

body {
  opacity: 0;
  transition: opacity 5s;
}

4, Anda dapat menyebabkan opacity menjadi transisi dari

body {
  opacity: 0;
  transition: opacity 5s;
}

1 ke

body {
  opacity: 0;
  transition: opacity 5s;
}

2

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

Kode fade-in yang akan Anda tulis akan dengan cepat menerapkan kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

5 ke elemen

 <body onload="document.body.style.opacity='1'">
 
</body>

6 dan menyetelnya agar tidak memiliki opacity (

 <body onload="document.body.style.opacity='1'">
 
</body>

7)

Setelah halaman dimuat, Anda akan menghapus kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

5 dari elemen

 <body onload="document.body.style.opacity='1'">
 
</body>

6 dan menyetelnya ke opasitas penuh (

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

0) selama durasi

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

1 detik

Sekarang, di halaman Anda, tepat setelah tag pembuka

body {
  opacity: 0;
  transition: opacity 5s;
}

4, tetapkan kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

1 ke elemen

body {
  opacity: 0;
  transition: opacity 5s;
}

4

<body>
  <script>
    document.body.className = 'fade';
  </script>
</body>

Atau, jika elemen

 <body onload="document.body.style.opacity='1'">
 
</body>

6 Anda berisi kelas yang sudah ada, Anda dapat menerapkan metode

 <body onload="document.body.style.opacity='1'">
 
</body>

5 menggunakan metode

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

7 pada objek

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

8

Di indeks Anda. html, tambahkan metode

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

7 ke objek ________18______8, dan sisipkan kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

5 sebagai argumen

<body>
  <script>
    document.body.classList.add('fade');
  </script>
</body>

Ini akan menambahkan kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

5 ke kelas Anda yang sudah ada

Untuk menghapus transisi fade-in dari kelas Anda, Anda dapat mengimplementasikan event listener ketika model objek dokumen telah dimuat. Anda mungkin juga ingin menerapkan penundaan untuk memastikan efek transisi terlihat oleh pembaca

Di index. html, gunakan pendengar acara dan tetapkan nama kelas pada elemen tubuh Anda dengan nilai string kosong

<body>
  <!-- .. -->
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      window.setTimeout(function() {
        document.body.className = '';
      }, 230);
    });
  </script>
</body>

String kosong memberi tahu JavaScript untuk mengembalikan nama kelas setelah halaman dimuat

Alternatifnya, jika elemen

 <body onload="document.body.style.opacity='1'">
 
</body>

6 Anda berisi kelas yang sudah ada, gunakan metode

<body>
  <script>
    document.body.className = 'fade';
  </script>
</body>

4 pada objek

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

8

<body>
  <!-- .. -->
  <script>
    document.body.classList.add('fade');
    document.addEventListener("DOMContentLoaded", () => {
      window.setTimeout(function() {
        document.body.classList.remove('fade');
      }, 230);
    });
  </script>
</body>

Metode

<body>
  <script>
    document.body.className = 'fade';
  </script>
</body>

4 akan menghapus kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

5

Lihat Efek Pen Fade-in pada Pemuatan Halaman – Contoh 3 oleh Sunil Pradhan (@Sunil_Pradhan) di CodePen

Sekarang, saat Anda memuat halaman, awalnya akan menambahkan kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

5 ke elemen

 <body onload="document.body.style.opacity='1'">
 
</body>

6 . Transisi CSS akan mulai mengubah opasitas dari

 <body onload="document.body.style.opacity='1'">
 
</body>

7 menjadi

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

0 selama

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

1 detik. Setelah halaman selesai dimuat, kelas

 <body onload="document.body.style.opacity='1'">
 
</body>

5 akan dihapus dari elemen

 <body onload="document.body.style.opacity='1'">
 
</body>

6

Karenanya dalam metode ini Anda menggunakan kombinasi JavaScript dan CSS untuk membuat efek fade-in saat halaman dimuat. Anda pertama kali menggunakan

body {
  opacity: 0;
  transition: opacity 5s;
}

_5 dan

 <body onload="document.body.style.opacity='1'">
 
</body>

0 untuk membuat efek. Kemudian Anda menggunakan manipulasi DOM untuk menambah dan menghapus kelas yang memicu transisi

Metode 4. Efek fade-in pada pemuatan halaman Dengan jQuery

Solusi jQuery menyediakan cara sederhana untuk membuat efek fade in/out pada pemuatan halaman yang dapat diterapkan di seluruh halaman atau elemen tertentu

Pertama, sertakan pustaka jQuery JavaScript di halaman web Anda

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

Kemudian sertakan skrip jQuery berikut

 <script>
      (function ($) {
        $.fn.pagefade = function (fadein, fadeout) {
          this.css('display', 'none');
          this.fadeIn(fadein);
          $('a').click(function (event) {
            event.preventDefault();
            linkLocation = this.href;
            this.fadeOut(fadeout, redirectPage);
          });
          function redirectPage() {
            window.location.disabled = linkLocation;
          }
          return this;
        };
      })(jQuery);
    </script>

Dan terakhir, panggil fungsi pada elemen yang akan muncul/keluar saat halaman dimuat

body {
  opacity: 0;
  transition: opacity 5s;
}

_0

Contoh

Lihat Efek Pen Fade-in pada Pemuatan Halaman – Contoh 4 oleh Sunil Pradhan (@Sunil_Pradhan) di CodePen

Kesimpulan

Jadi di sini adalah akhir dari artikel ini, saya telah menyebutkan empat cara untuk mencapai efek fade-in yang sama pada pemuatan halaman. Apapun cara Anda merasa nyaman dapat digunakan pada proyek Anda

Bagaimana cara menambahkan animasi ke pemuatan halaman?

Tambahkan CSS .

Tambahkan @keyframes dengan nama "slideInLeft" dan gunakan masing-masing 0% dan 100% sebagai titik awal dan titik akhir animasi. .

Use the animation property on the

and specify its background and padding..

Style the element by setting the margin to 0 and specifying the font-family..

Bagaimana Anda menambahkan efek fade di HTML?

Transisi Gambar Fade-in Menggunakan CSS .

Di HTML Anda, buat div dengan class fade-in-image

Tempatkan gambar Anda di dalam div ini. .

Di CSS Anda, berikan animasi deklarasi pada kelas fade-in-image Anda. fadeIn 5s. .

Di CSS, gunakan aturan @keyframes yang dipasangkan dengan fadeIn

Bagaimana Anda membuat efek fade di JavaScript?

Metode jQuery fadeIn() digunakan untuk memudarkan elemen tersembunyi. Sintaksis. $(pemilih). fadeIn(speed,callback); Parameter kecepatan opsional menentukan durasi efek.

Bagaimana cara memudarkan div di JavaScript?

Metode fadeOut() secara bertahap mengubah opasitas, untuk elemen yang dipilih, dari terlihat menjadi tersembunyi (efek fading) . Catatan. Elemen tersembunyi tidak akan ditampilkan sama sekali (tidak lagi memengaruhi tata letak halaman). Tip. Metode ini sering digunakan bersamaan dengan metode fadeIn().

kode javascript