Spoiler Alert uygulaması için tam anlamıyla düzgün bir başlık ekleyemediğim için eminim bir çok kişi photoshopta bulanık efekti yada bulanıklaştrıma gibi aramalardan bu yazıya gelecekler. Son Google güncellemelerinin bir özelliği bana göre saçmalıktan başka birşey değil. Uzman sayılabileceğiniz  bir konu da web sitesi açıp tek bir kategori üzerinden makaleler yayınladığınızda ister istemez makale başlıkları, gövdesi ve etiketleri birbirlerine benzerler. İşte Google amcamın son güncelleştirmelerinde bu tarz sitelerin çoğu gerilere düşmekle beraber ciddi anlamda ziyaretçi trafiği kaybetmişlerdir.

Bu yüzden başlığa jQuery kelimesini eklemedim. Haliyle sitede photoshop dersleri de olduğundan dolayı bazı kişiler bilmeden yanlışlıkla tıklayacaktır bu linki. Anlayacağınız Spoiler Alert jQuery için geliştirilmiş olan web sayfasındaki yazılara, linklere ve resimlere bulanıklık efekti vermeye  yarayan bir eklentidir. İki aşamalı bulanıklık efekti kullanılıyor  bu uygulamada. Resim ve yazılar görünmeyecek derecede olur mouse ile bu içeriiklerin üzerine geldiğinizde biraz daha görünür olmaya başlar ve tıkladığınızda net olarak görünürler bu efektleri uyguladığınız nesneler.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="spoiler.min.js"></script>

 JavaScript : 

  <script>
  $(function() {
    $('spoiler').spoilerAlert()
    $('.spoiler').spoilerAlert({max: 20, partial: 6})
  })
  </script>

 Nesneler üzerinde  kullanımı

Blur  efekti  uygulama  istediğiniz  yazılara spoiler  etiketi  eklemeniz  gerekiyor

Örnek :

Bu örneği <spoiler>Mintik.com</spoiler> sitesi üzerinden inceledim

Spoiler  etiketleri arasına girmiş olduğum mintik.com bulanı  diğer  bölümler  net  olarak görünecektir bu şekilde.

Blur  efekti uygulamak istediğin  resimlere class=”spoiler” eklediğiniz zaman resimlerde  bulanık olarak gözükecektir.

Örnek :

<img class="spoiler" src="https://lorempixel.com/400/200/">