Page Loading Effects | Codrops

Satu set kreatif efek loading halaman yang menggunakan animasi SVG dengan Snap.svg. Idenya adalah untuk menunjukkan overlay dengan bentuk animasi yang menarik sedangkan konten baru yang akan dimuat.
Idenya adalah untuk menghidupkan bentuk ke viewport dan menunjukkan indikator aktivitas. Ketika konten baru dimuat, bentuknya akan menghidupkan kembali untuk mengungkapkan halaman. Kami akan menggunakan SVGs animasi dengan Snap.svg untuk efek karena ini memungkinkan kita untuk membuat bentuk yang kompleks dan menarik transisi morphing.  

Cara kita menunjukkan overlay loading dengan mendefinisikan animasi pada jalan yang kita definisikan dalam SVG berikut:

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">

        <path d="M 0,70 80,60 80,80 0,80 0,70"/>

    </svg>

</div><!-- /pageload-overlay -->

Menetapkan pembagian overlay ke posisi tetap, yang mencakup semua halaman, dan menggunakan indikator CSS-hanya memuat dengan styling :: sebelum dan sesudah :: elemen semu divisi.

.pageload-overlay {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    visibility: hidden;

}

.pageload-overlay.show {

    visibility: visible;

}

.pageload-overlay svg {

    position: absolute;

    top: 0;

    left: 0;

}

.pageload-overlay svg path {

    fill: #fff;

}

Kami menggunakan visibilitas di sini karena mereka menggunakan gaya posisi tetap dengan pointer-kejadian tidak ada pada SVG sendiri menyebabkan beberapa masalah pada ponsel, sehingga kita posisi dan memanipulasi div orangtua sebagai gantinya.

Anda mungkin telah memperhatikan bahwa animasi lingkaran juga dilakukan dengan menghidupkan dari satu jalan ke yang lain (tentu saja ada cara lain untuk melakukan hal ini, skala misalnya) tapi kami menggunakan nilai berikut untuk memastikan lingkaran adalah "responsif" tetapi tidak tidak meregang seperti bentuk lain:

width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

Menggunakan slice akan mempertahankan aspek rasio tetapi skala gambar sehingga seluruh viewport ditutupi oleh Viewbox.  

Bukan hanya effect ini saja yang ada pada tutorial codrops masih bnyak lagi effect2 yang lebih keren, dan myang masih perlu di pelajariiii..

Terima kasih..
Semoga bermanfaat :)

 

 

Ludei Memamerkan Kekuatan HTML5 Game Development Dengan Simultan Multi-platform Peluncuran iBasket

Ludei , platform pengembangan permainan HTML5 terkemuka di dunia , hari ini mendorong versi HTML5 baru dari hit basket judul iBasket tujuh toko aplikasi utama tanpa perubahan kode tunggal , menunjukkan kekuatan platform untuk menyebarkan kode HTML5 sebagai kinerja tinggi , permainan multi -platform .

Mudahnya Membuat Desain Web Dengan Twitter Bootstrap || layoutit.com

Dengan begitu banyaknya fitur yang dimiliki Twitter Bootstrap ternyata masih ada saja yang kurang puas, manusia memang selalu mencari cara agar semua bisa lebih praktis, walaupun sebenarnya twitter bootstrap sudah lumayan mempersingkat waktu.

Layoutit (http://www.layoutit.com)

Di Website ini  akan semakin mempermudah anda untuk bekerja dengan twitter bootstrap.

Dengan layoutit membuat desigan degan twitter bootstrap terasa semakin mudah, kita tinggal melakukan drag & drop untuk membuat layout yang diinginkan.

Banyak yang sudah mencoba dan ternyata sangat mudah menggunakan layoutit. Kita tinggal buka website http://www.layoutit.com setelah itu tekan tombol Start Now, lalu mulailah dengan melakukan Drag & Drop menu yang ada di kiri dan letakan di kanan sampai desain yang anda inginkan selesai.

Jika sudah selesai tinggal klik tombol Download, anda akan disuguhkan kode yang bisa di download atau sekedar meng-copy code yang sudah di generate.

Sekian Info Menarik ini, semoga semakin memudahkan dalam pembuatan desain website. :)