GO Blog

Dalam tutorial ini saya ingin menunjukkan kepada Anda bagaimana untuk membuat efek blur sederhana untuk item berbasis teks. Idenya adalah untuk memiliki satu kotak teks yang akan berefek kabur saat Item dalam fokus cursor. Hal ini akan membuat semacam "fokus" efek yang menarik perhatian ke item saat yang lain kabur. Kita akan menggunakan CSS3 transisi dan beberapa jQuery untuk menerapkan efek tersebut. hasil terbaik dapat dilihat di Safari atau Chrome (di sini anda akan mendapatkan transisi halus).

Karena kita akan menggunakan transisi, efek ini hanya akan bekerja dengan baik di browser yang mendukung efek ini. Jadi mari kita mulai!

Kode Markup

Struktur ini akan menjadi bagian dengan beberapa artikel. Setiap item artikel akan memiliki header dan paragraf:

<section class="ib-container" id="ib-container">
    <article>
        <header>
                         <h3><a href="#">Judul Anda</a></h3>
             <span>Teks Lainnya</span>
        </header>
        <p>Cuplikan teks</p>
    </article>
    <article>
        <!-- ... -->
    </article>
    <!-- ... -->
</section>

CSS

Wadah utama untuk lebar tetap dan berpusat :

.ib-container{
    position: relative;
    width: 800px;
    margin: 30px auto;
}

Mari kita float ( artikel keluar akan mengambang ) dengan bantuan dari :before dan :after pseudo elements:

.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}

Sekarang , mari kita beri gaya pada item artikel. kita akan membuat efek melayang dan menambahkan dua bayangan pada kotak.

.ib-container article{
    width: 140px;
    height: 220px;
    background: #fff;
    cursor: pointer;
    float: left;
    border: 10px solid #fff;
    text-align: left;
    text-transform: none;
    margin: 15px;
    z-index: 1;
    box-shadow:
        0px 0px 0px 10px rgba(255,255,255,1),
        1px 1px 3px 10px rgba(0,0,0,0.2);
    transition:
        opacity 0.4s linear,
        transform 0.4s ease-in-out,
        box-shadow 0.4s ease-in-out;
}

Untuk browser WebKit kita akan menambahkan

-webkit-backface-visibility: hidden

untuk menghindari flicker singkat.

Gaya elemen teks dan membuat beberapa tipografi yang bagus. Warna dan teks - bayangan setiap elemen:

.ib-container h3 a{
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
    opacity: 0.8;
}
.ib-container article header span{
    font-size: 10px;
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
    padding: 10px 0;
    display: block;
    color: rgba(255, 210, 82, 1);
    text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
    text-transform: uppercase;
    opacity: 0.8;
}
.ib-container article p{
    font-family: Verdana, sans-serif;
    font-size: 10px;
    line-height: 13px;
    color: rgba(51, 51, 51, 1);
    text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
    opacity: 0.8;
}

Dan sekarang kita akan menambahkan transisi ke ketiga. Sekali lagi, tiga sefek yaitu: opacity, text-shadow dan warna:

.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
    transition:
    opacity 0.2s linear,
    text-shadow 0.5s ease-in-out,
    color 0.5s ease-in-out;
}

Kelas blur akan diterapkan ke semua turunan dari item saat melayang, untuk membuat kotak terlihat kabur. kita juga akan menurunkan efek opacity sedikit:

.ib-container article.blur{
    box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
    transform: scale(0.9);
    opacity: 0.7;
}

Dalam rangka untuk membuat elemen teks terlihat buram, kita akan membuat warna transparan dengan menetapkan opacity dari nilai RGBA ke 0, dan kita akan memperbesar efek text-shadow jarak blur :

.ib-container article.blur h3 a{
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0);
    opacity: 0.5;
}
.ib-container article.blur header span{
    text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
    color: rgba(255, 210, 82, 0);
    opacity: 0.5;
}
.ib-container article.blur  p{
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
    color: rgba(51, 51, 51, 0);
    opacity: 0.5;
}

Item saat melayang akan sedikit membesar dan menyesuaikan bayangan kotak. Kita juga akan menetapkan z.index tinggi untuk menjamin bahwa item akan selalu berada di atas yang lain:

.ib-container article.active{
    transform: scale(1.05);
    box-shadow:
        0px 0px 0px 10px rgba(255,255,255,1),
        1px 11px 15px 10px rgba(0,0,0,0.4);
    z-index: 100;   
    opacity: 1;
}

Terakhir, tapi bukan akahir, kita akan mengatur opacity elemen teks ke 1:

.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
    opacity; 1;
}

CSS dari semuanya telah selesai, Mari kita lihat JavaScriptnya.

JavaScript

Jadi, ketika kita memiliki lebih dari satu artikel, kita akan memberikan semua artikel lainnya efek kelas blur:

var $container = $('#ib-container'),
 $articles = $container.children('article'),
 timeout;

$articles.on( 'mouseenter', function( event ) {
  
 var $article = $(this);
 clearTimeout( timeout );
 timeout = setTimeout( function() {
  
  if( $article.hasClass('active') ) return false;
  
  $articles.not($article).removeClass('active').addClass('blur');
  
  $article.removeClass('blur').addClass('active');
  
 }, 75 );
 
});

$container.on( 'mouseleave', function( event ) {
 
 clearTimeout( timeout );
 $articles.removeClass('active blur');
 
});

Demikian langkah dari semuanya, Saya harap Anda menikmati tutorial kecil ini dan dapat berguna....