Animasi Loading Keren Menggunakan Html Dan Css Untuk Website/Blog

Animasi Loading Keren Menggunakan Html Dan Css Untuk Website/Blog - Pada kesempatan kali ini mungkin saya hanya akan membagikan sebuah css animasi loading yang menurut saya lumayan bagus untuk keperluan blog/website kalian. Ini bukan tutorial, melainkan hanya sekedar sharing saja ya.

Bilamana kalian sedang mencari preloader keren untuk dipasang pada blog, website, ataupun yang lainnya, ini bisa kalian coba. Dikarenakan prealoder ini sendiri sangat ringan, tidak berat saat memuat halaman blog atau website kalian. Kenapa? Karena animasi ini hanya menggunakan Css saja, jadi tidak akan menimbulkan masalah apapun.

Apakah Ini Berjalan baik?
Ya tentu saja, sebab Css ini sudah saya coba sebelum dishare.

Nah, jika ingin mencoba untuk memasangnya, silahkan. Kalian tidak perlu repot menyiapkan ini itu, langsung saja tinggal di copy paste Css nya.
Ok mungkin kita langsung saja menuju ke intinya, tanpa berlama-lama lagi, inilah Css dan Html nya.

See the Pen Css Animasi Loading Open Store By Seotechman.com by Seotech (@seo90) on CodePen.

Bagaimana menurut kalian, lumayan bagus bukan?
Seperti itulah Css Animasi Loading yang saya bagikan hari ini, semoga bermanfaat dan selamat mencobanya, Terimakasih.

Selengkapnya

Cara Membuat Efek Slide Pada Teks Menggunakan Css, Html, Dan Javascript

Pada kesempatan kali ini saya ingin membagikan sedikit efek slide pada teks yang lumayan bagus menurut saya sendiri. Karena ini didasarkan pada pola animasi yang terlihat dalam bidikan Dribbble shot Abstract. Idenya adalah untuk menunjukkan jejak teks ketika beralih di antara slide slide. Animasi ini sendiri dibuat menggunakan TweenMax.

Perhatian: Bahwa ini sangat eksperimental dan ini juga menggunakan properti CSS modern yang mungkin tidak didukung di browser lama.

Disini telah terbuat lima demo dengan tipografi dan efek berbeda untuk gambar, saat beralih dari satu slide ke slide lainnya. Tata letak jejak teks dibuat dengan menggunakan wadah flexbox yang akan membuat ketinggian masing-masing wadah teks menyusut sehingga semuanya masuk ke dalam viewport (tinggi). Beberapa teks akan terlihat dengan ketinggian penuh. Menggunakan mode campuran dan rotasi yang menciptakan tampilan menjadi menarik.

Bagaimana cara membuatnya?

Untuk pembuatanya mungkin terbilang mudah, menurut saya. Nah sebelum itu, kita disini memerlukan beberapa peralatannya, Seperti:
1.Css
2.Html
3.Javascript

Ok, mungkin kita langsung saja menuju tutorialnya. Pertama kita buat Css nya, seperti contoh dibawah ini:

Css Demo

Jika sudah, silahkan kalian save/simpan dan beri nama base.css atau terserah kalian. Setelah itu kita coba buat Html nya, lihat pada contoh ini:

Html Demo

Simpan dan berinama index.html.
Langkah berikutnya yaitu, siapkan sebuah javascriptnya seperti contoh dibawah ini:

Javascript Demo

Copy paste javascript diatas, lalu simpan. Jika semuanya sudah selesai, kalian hanya perlu menggabungkannya menjadi satu. Dan coba lihat hasilnya, apakah berjalan baik atau tidak.

Nah, untuk demo bisa kalian lihat di link berikut ini:

Live Demo

Apabila ingin mencobanya silahkan langsung download saja full scriptnya, menuju link yang sudah disediakan.

Download Now

Itulah sedikit tutorial kali ini tentang, Cara Membuat Efek Slide Pada Teks Menggunakan Css, Html, Dan Javascript. Semoga bermanfaat dan selamat mencobanya. Adapun jika kalian ingin mengubahnya atau memodifikasi, itu lebih baik.

Akhir kata saya ucapkan, terimakasih.

Selengkapnya

Cara Mudah Membuat Efek Partikel Pada Button

Setelah sekian lamanya fakum, dikarenakan terlalu sibuk dan ditambah dengan minimnya ide, itulah yang menjadi alasan mengapa saya tidak update beberapa bulan belakangan ini. Namun setelah saya pikir-pikir, akhirnya kini saya memutuskan untuk memilih aktif kembali dalam dunia blogger ini, kenapa? Karena saya ingin terus berbagi ilmu dan info menarik kepada siapapun yang membaca tulisan diblog ini, walau sedikit mudah-mudahan bermanfaat.

Nah Pada kesempatan kali ini saya akan coba berbagi sebuah tutorial lagi yaitu, tentang cara membuat efek partikel pada button (Tombol). Disini saya memakai komponen javascript nya dari anime.js

Anda semua sudah tahu pasti dong ya, apa itu anime.js dan apa saja keunggulannya?

Ya benar sekali, Anime.js adalah salah satu daftar animasi tercepat dan bekerja sangat lancar, dengan DOM. Salah satu ke unggulannya adalah, Anime.js mendukung disemua jenis browser web seperti Chrome, Firefox, Opera, Safari, dan Internet Explorer 10+. Fitur utama dari anime.js yaitu, Transformasi CSS yang berguna untuk menghidupkan Transisi pada CSS, Animasi SVG untuk garis, dan garis waktu untuk menyinkronkan beberapa instance. Satu hal yang membuat anime.js menarik bagi pengembang yaitu sangat ringan.

Nah, lalu bagaimana langkah dan cara membuat efek partikel ini?

Caranya cukup mudah, Anda hanya perlu menyimak dan pastikan dibaca sampai tuntas agar tidak ada yang terlewat.

Untuk memulai cara pembuatannya, disini kita memerlukan beberapa komponen, seperti:
1.Css
2.Html
3.Javascript (anime.js+particles.js)
Untuk script nya bisa Anda unduh melalui link yang sudah saya sediakan diakhir tutorial ini.

Ok mari kita lanjutkan, untuk tahap awal disini kita coba buat file html terlebih dahulu dan berinama index.html.

Contoh:

Live Demo

Setelah itu kita buat file Css nya.

Contoh:

Live Demo

Jika sudah, Silahkan simpan/save file tersebut dan beri nama base.css atau terserah Anda mau diberi nama apa saja silahkan. Masih pada bagian Css, kali ini kita coba buat Css untuk particle nya.

Contoh:

Live Demo

Lalu simpan kembali dan beri nama particles.css. Langkah selanjutnya yaitu, buat javascript particles.js.

Contoh:

Live Demo

Untuk anime.min.js bisa Anda unduh atau cari di google.

Nah, apabila semuanya sudah selesai, sekarang waktunya Anda gabungkan menjadi satu seperti contoh pada langkah yang pertama. Dan coba akses dengan browser masing-masing, lihat bagaimana hasilnya. Apakah berjalan dengan lancar atau tidak. Jika tidak, kemungkinan besar Anda tidak sepenuhnya mengikuti cara yang sudah saya berikan diatas atau ada yang kurang.

Bilamana Anda ingin melihat hasil dari tutori ini, silahkan kunjungi link dibawah.

Live Demo

Dan untuk Anda yang tidak ingin pusing, bisa dengan mengunduhnya Disini.

Download Now

Itulah sedikit pembahasan singkat pada hari ini tentang, Cara Mudah Membuat Efek Partikel Pada Button kurang lebihnya mohon maaf. Semoga bermanfaat, terimakasih.

Selengkapnya

Tampilan Baru Halaman Web Hasil Pencarian Google

Tampilan Terbaru Halaman Web Hasil Pencarian Google - Kamis 23 Mei 2019 - Tujuan diperbaruinya tampilan hasil pencarian ini adalah untuk membantu orang-orang agar bisa menemukan informasi yang mereka cari dengan cepat dan mudah. Selama bertahun-tahun, jumlah dan format informasi yang tersedia di web telah berubah secara drastis. Dari menjamurnya gambar dan video, hingga ketersediaan objek 3D yang sekarang dapat Anda lihat di AR.

Halaman hasil pencarian juga telah berubah, ini mungkin akan membantu Anda menemukan jenis informasi baru dan dengan cepat menentukan apa yang paling berguna bagi Anda. Saat kami melanjutkan upaya kami untuk meningkatkan Pencarian dan memberikan pengalaman yang modern dan bermanfaat, hari ini kami meluncurkan penyegaran visual dari halaman hasil pencarian mobile untuk memandu Anda dengan lebih baik melalui informasi yang tersedia di web.

Dengan desain atau tampilan baru ini, branding situs web dapat menjadi bagian depan dan tengah, ini akan membantu Anda lebih memahami dari mana informasi berasal dan halaman apa yang Anda cari.

Nama situs web dan ikonnya muncul di bagian atas untuk membantu menjangkar setiap hasilnya, sehingga Anda dapat lebih mudah memindai halaman hasil dan memutuskan apa yang akan dijelajahi selanjutnya. Pemilik situs dapat mempelajari lebih lanjut tentang cara memilih ikon pilihan mereka untuk daftar organik di sini.

Saat Anda mencari produk atau layanan kami pun akan menambahkan iklan yang berguna untuk ditampilkan, Anda akan melihat label iklan tebal di bagian atas, di samping alamat web sehingga Anda dapat dengan cepat mengidentifikasi dari mana informasi itu berasal.

Seiring berjalannya waktu, Google terus menyediakan format konten terbaru dan tindakan yang bermanfaat. Pada desain terbaru ini akan terlihat lebih banyak tombol, tindakan dan pratinjau yang bermanfaat.

Desain ulang ini menjadi yang utama untuk seluler dan akan diluncurkan selama beberapa hari ke depan. Tetap terhubung dengan cara-cara yang bahkan lebih baru agar Penelusuran dapat membantu Anda menemukan apa yang Anda cari.

Ujar @searchliaison.

Melalui sumber: Google
Penerbit: Jamie Leach Senior Interaction Designer, Search Published May 22, 2019

Selengkapnya