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/">