suatu plugin javascript yang menyediakan animasi background bergerak. Untuk cara menggunakannya saya akan bahas pada artikel kali ini yang berjudul Membuat Background Animasi Bergerak Menggunakan Particle.js. Langkah pertama teman-teman harus kunjungi halaman particle.js disini jika sudah maka teman-teman download filenya.
Dalam perancangan desain sebuah website, background latar belakang adalah bagian penting yang membangun sebuah website. Background memberikan efek dan dekorasi visual terhadap sebuah elemen dengan begitu akan menimbulkan makna tertentu terkait dengan konten dari elemen tersebut. Penggunaan background juga penting dalam menentukan konsep dari sebuah website. Ada beberapa properti CSS yang berhubungan dengan pengaturan background, yaitu 1. Background Color Background Color digunakan untuk memberikan latar belakang berupa warna terhadap suatu elemen. Penambahan latar belakang warna juga dapat menggunakan properti background selain dari penggunaan properti background-color. Berikut adalah contoh penggunaan properti background-color background { backgroundred; background-color red; } Pengisian jenis warna di properti background ataupun background-color dapat juga menggunakan kode heksa seperti FFF, RGBA seperti rgb255, 0, 0, RGBA seperti rgba255,0,0,1, HSL seperti hsl0, 50, 100 atau HSLA seperti hsla0,50,100,1. 2. Background Image Dengan menggunakan properti background image ataupun property background, kita dapat meletakkan gambar sebagai latar belakang sebuah elemen,sebagai contoh body { background-image url" } Tetapi secara default-nya, jika ukuran gambar lebih kecil dari ukuran elemennya maka akan terjadi perulangan gambar baik secara vertikal atau horizontal tergantung ukuran elemennya, sebagai contoh di mana ukuran image hanya 260 x 300px Hasil dari eksekusi kode diatas adalah Kita juga dapat mengatur perulangan dari gambar tersebut dengan menggunakan properti background-repeat yang berisi repeat, no-repeat, repeat-x dan repeat-y. Dimana repeat-x memberikan perulangan hanya pada sumbu x horizontal, repeat-y memberikan perulangan hanya pada sumbu y vertikal dan no-repeat menghilangkan perulangan. Sebagai contohnya dari properti repeat-x adalah body { background-image url" background repeat repeat-x; } Hasil dari eksekusi kodediatas adalah 3. Background Postion Dengan menggunakan properti background position maka kita dapat mengatur posisi dari background tersebut. Properti background position dapat diberi nilai dengan pixel ataupun persentase yang mengatur koordinat di sumbu-x dan sumbu-y. Berikut contoh penggunaan background-position body { background-image url" background-repeat no-repeat; background-position 100px 50px; } Hasil dari eksekusi kode diatas adalah 4. Background-Shorthand properti Untuk menulis seluruh gabungan dari properti CSS yang berhubungan dengan background, menggunakan sintaks yaitu background color image position repeat; Sebagai contoh dari penggunaan sintaks di atas, yaitu body { background FFF url" no-repeat100px 50px; } uli IKUTI TRIAL KURSUS ONLINE NAMA PESERTA TEST & PENERIMA BEASISWA
MEMBUATANIMASI ONLINE. 1). PICASION. 1). Nomor 1, 2 dan 3 : Masukan foto pada kolom yang ada tulisan browser untuk 3 foto atau gambar satu persatu. 2). Tunggu proses sedang dilakukan oleh sistem. 3). Nomor 4 : Atur berapa pixel yang diinginkan ada pilihan klik tomol gulirnya.
CSS HTMLSetelah kita belajar tentang properti color dan nilai-nilai warna yang valid di CSS, berikutnya kita pelajari tentang namanya, properti background fungsinya untuk memberikan background pada elemen kamu coba ketik background pada kode CSS di Inspect Elemen, maka akan muncul beberapa saran properti yang berkaitan dengan properti background- punya fungsi yang dua cara kita memberikan background di CSS, yakni dengan warna dan gambar. Permberian background dengan gambar membutuhkan beberapa properti tambahan lagi untuk mengatur sebabnya ada banyak properti background-* si tutorial ini, kita akan membahas properti-properti yang penting dan sering digunakan dalam membuat kita mulai.. Background WarnaUntuk memberikan background warna, kita bisa memberikan nilai warna pada properti background seperti ranam warna, kode heksa warna, fungsi rgb, rgba, hsl, dan kita langsung coba file baru dengan nama kemduian isi kodenya seperti ini Contoh Background Warna header { background-color violet; } Belajar Background di CSS Maka hasilnyaElemen berhasil kita set warna latarnya menjadi kita menggunakan properti background-color untuk memberikan warna latar. Sebenarnya bisa juga dengan properti background yang kita berikan pada background-color berupa nama warna. Silahkan coba juga gunakan nilai warna yang lain seperti kode heksa, fungsi rgb, hsl, dan menggunakan kode heksaNilai warna sudah kita pelajari di materi sebelumnyaTutorial CSS Menggunakan Warna di CSSOke, selanjutnya kita akan coba menggunakan background dengan warna kita buat dulu warna gradasinya di website copy kode CSS gradient yang kamu dapatkan...dan ubah kode CSS contoh yang tadi menjadi seperti ini Contoh Background Warna header { background rgb34,193,195; background linear-gradient90deg, rgba34,193,195,1 0%, rgba240,45,253,1 100%; } Belajar Background di CSS Maka hasilnyaMantap 👍, sekarang backgroud-nya pakai warna mengapa kita menggunakan dua properti background?background rgb34,193,195; background linear-gradient90deg, rgba34,193,195,1 0%, rgba240,45,253,1 100%;Ini untuk antisipasi, jika browser tidak mendukung menggunakan warna gradasi, maka warna background yang dipakai adalah warna dari fungsi rgb.Background ImageJika ingin menggunakan warna latar gambar, maka kita bisa menggunakan properti background-image atau background gambar yang didukung bisa jpg, png, gif, webp, avif, svg, selama format gambar tersebut bisa dibuka di web browser, maka bisa dipakai sebagai kalau begitu..Mari kita coba latihan menggunakan background silahkan download file gambarnya di Unsplash[ Download Background].Download yang ukuran bisa pakai yang mana aja. Tapi kita coba ukuran medium, karena bisanya ukuran layar komputer dan Hp kamu download, ubah namanya menjadi kemudian taruh di satu folder dengan file file tidak berada di satu folder dengan File HTML, maka nanti kamu bisa tulis alamat path-nya di itu, buat file HTML baru dengan nama dengan isi sebagai berikut. Contoh Background Warna body { background-image url' } header { background rgba255,255,225, } Belajar Background di CSS Pada kode ini, kita memberikan background gambar untuk elemen dan memberikan background putih transparan 50% untuk elemen .Maka hasilnyaCoba perbesar dan perkecil ukuran jendelanya.. atau coba juga melakukan zoom RepeatJika kita melakukan zoom out pada contoh yang tadi, maka hasilnya akan seperti iniGambar background-nya akan diulang-ulang. Jika kamu pakai ukuran gambar yang kecil, maka akan ditampilkan seperti cara agar tidak diulang-ulang?Kita bisa gunakan properti background-repeat. Properti ini punya beberapa nilairepeat-x artinya mengulang background pada sumbu x aja;repeat-y artinya mengulang background pada sumbu y aja;no-repeat artinya tidak mengulang kita bisa pakai no-repeat bila ingin background-nya tidak kode CSS-nya akan menjadi seperti inibody { background-image url' background-repeat no-repeat; }Maka hasilnyaBackground tidak akan Ukuran BackgroundKita bisa mengatur ukuran background dengan properti background-size, properti ini punya beberapa nilai yang validpx, pt, em, rem fixed ukuran dalam angka dan satuan, contoh 200px, vh dynamic mengikuti ukuran tinggi dan lebar layar view port;contain dynamic mengikuti ukuran lebar elemen;cover dynamic mengikuti ukuran lebar dan tinggi elemen;Mari kita coba kode CSS background pada contoh sebelumnya menjadi seperti inibody { background-image url' background-repeat no-repeat; background-size cover; }Maka hasilnyaMenggunakan Gambar SVGGambar SVG Scaleable Vector Graphic merupakan format gambar vektor yang menjadi standar di web saat seperti gambar bitmap jpg, png, gif yang ukurannya dibatasi dengan piksel. Vektor bisa kita perbesar ukurannya berapapun yang kita mau, tanpa merusak untuk latihan.. kita akan menggunakan gambar vektor dari buat gambar vektor wave di sana, kemudian download file taruh di satu folder dengan itu, buat file HTML baru dengan nama dan isi kodenya seperti ini Contoh Background SVG body { background-image url' background-repeat no-repeat; } header { background rgba255,255,225, } Belajar Background di CSS Pada kode ini, kita tidak perlu menentukan ukuran background untuk file vektor. Ukuran yang dipakai adalah ukuran maksimal 100%. Tapi kamu juga bisa menentukan ukurannya, jika sekarang coba buka di web hasilnyaWoaw.. keren 😍.Background Blur di CSSBelakangan ini banyak konsep desain web dengan background blur. Konsep ini dikenal dengan glass morphology design, karena bentuknya mirip seperti untuk membuat yang seperti ini, ada properti css baru bernama backdrop-filter untuk memberikan filter pada ingin memberikan filter blur, maka kita harus memberikan nilai dengan fungsi blur.ContohBuatlah file baru dengan nama kemudian, isi dengan kode berikut. Contoh Background Blur body { background-image url' background-repeat no-repeat; background-size cover; } header { background rgba255,255,225, } article { background-color rgba255, 255, 255, backdrop-filter blur10px; padding 1rem; } Belajar Background di CSS Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum. Pada contoh ini, kita memberikan efek filter blur 10px untuk background elemen .Maka hasilnyaMantap.. 😍 efek blur, masih ada lagi efek lainnya sepertibrightness untuk efek kecerahan;contrast untuk efek kontras;drop-shadow untuk efek bayangan;grayscale untuk efek hitam putih;hue-rotate untuk efek warna hue;invert untuk efek warna negatif;opacity untuk efek transparan;saturate untuk efek sturasi warna;sepia untuk efek warna kamu coba-coba backdrop-filter adalah properti baru yang belum masuk standar resmi CSS. Tidak semua browser mendukung properti ini. Kamu bisa mengeceknya di Selanjutnya?Oke, biar tutorial ini tidak terlalu panjang.. kita akhiri sampai di masih banyak lagi properti yang berkaitan tentang background, terutama dalam menggunakan background yang saya bahas di tutorial ini adalah yang paling sering dipakai saati ni. Sisanya, kamu bisa coba-coba ada yang dibingungkan, tanya aja di komentar!Selanjutnya silahkan pelajari tentang Teks Formating di belajar. 🙌
CaraMembuat Teks Video dengan Animasi Bergerak di Canva. Pertama tentukan ukuran animasi video yang ingin kamu buat. Sebagai contoh, saya memakai ukuran 1080 x 1080 piksel. Langkah selanjutnya kamu dapat menyesuaikan warna background pada templatenya terlebih dahulu. Setelah itu buka menu teks dengan cara pilih ikon + di bagian bawah lalu
keyframes animate-earth { from { background-position 120% 70px, 10px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } -webkit-keyframes animate-earth { from { background-position 120% 70px, 0px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } -moz-keyframes animate-earth { from { background-position 120% 70px, 0px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } -ms-keyframes animate-earth { from { background-position 120% 70px, 0px 0px, 0px 0px; } to { background-position -20% 70px, -1000px 0px, -500px 0px; } } keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } -webkit-keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } -moz-keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } -ms-keyframes move-twink-back { from {background-position0 0;} to {background-position-10000px 5000px;} } keyframes move-mists-back { from {background-position0 0;} to {background-position-10000px 1000px;} } -webkit-keyframes move-mists-back { from {background-position0 0;} to {background-position-10000px 1000px;} } -moz-keyframes move-mists-back { from {background-position0 0;} to {background-position-10000px 1000px;} } -ms-keyframes move-mists-back { from {background-position 0 0;} to {background-position-10000px 1000px;} } .stars, .twinks, .mists, .earth { positionabsolute; top0; left0; right0; bottom0; width100%; height100%; displayblock; } .stars { background000 urlimages/ repeat top center; } .rocket { -ms-transform rotate90deg; -webkit-transform rotate90deg; transform rotate90deg; margin 200px 0px 0px 45%; } .twinks{ backgroundtransparent urlimages/ repeat top center; -moz-animationmove-twink-back 200s linear infinite; -ms-animationmove-twink-back 200s linear infinite; -o-animationmove-twink-back 200s linear infinite; -webkit-animationmove-twink-back 200s linear infinite; animationmove-twink-back 200s linear infinite; } .earth { margin 0px auto; background-image urlimages/ background-position 120% 70px, 0px 0px, 0px 0px; background-repeat no-repeat, repeat-x, repeat-x; animation animate-earth linear 50s infinite; -moz-animation animate-earth linear 50s infinite; -ms-animation animate-earth linear 50s infinite; -o-animation animate-earth linear 50s infinite; -webkit-animation animate-earth linear 50s infinite; } .mists{ backgroundtransparent urlimages/ repeat top center; -moz-animationmove-mists-back 200s linear infinite; -ms-animationmove-mists-back 200s linear infinite; -o-animationmove-mists-back 200s linear infinite; -webkit-animationmove-mists-back 200s linear infinite; animationmove-mists-back 200s linear infinite; }
UbahVideo Jadi Gambar Bergerak Gif Video Letters . Berikut 5 cara membuat website dari nol dengan mudah dan cepat. Itulah tadi cara membuat twibbon sendiri dengan background transparan baik itu dengan Canva Picsart atau aplikasi edit foto lain. Agar blog bisa berfungsi optimal Anda perlu mengisinya dengan berbagai konten.
translation by you can also view the original English article Browser mobile kita semakin kuat dan lebih baik dalam menunjukkan animasi yang menakjubkan dan indah. Ketika dikombinasikan dengan kemampuan layout CSS, memungkinkan untuk membuat beberapa pekerjaan cantik tanpa menggunakan gambar sama sekali. Hasilnya scalable, loading cepat, dan ya, mengesankan untuk melihat. Mari kita lihat hasil-hasil menakjubkan apa yang orang buat dan animasikan dengan hanya HTML dan CSS. 1. CSS Murni Pengendara Sepeda Ada begitu banyak yang terjadi di sini, sulit dipercaya itu hanyalah HTML dan CSS! Animasi berputar dan berlipat ganda, gerakan berlapis menyatu membuatnya terlihat seperti pengendara sepeda ini dan sepedanya terbuat dari jelly. Penggunaan BEM yang baik juga pada penamaan class! 2. Saturnus CSS Murni Bermain Hula Hoop Menggabungkan banyak bagian yang bergerak mampu membuat satu set elemen HTML sederhana layaknya animasi yang lebih kompleks, dan itulah yang dilakukan dengan baik oleh demo ini. Lihatlah bagaimana dua planet berinteraksi, sementara "partikel-partikel" yang berulang cukup tersebar untuk terlihat random. 3. Animasi CSS Warna Lapisan Lapisan berwarna yang sederhana mungkin bukanlah apa-apa, tetapi ketika mereka bergerak mereka dapat membentuk banyak karakter. Dalam contoh ini, satu set paragraf tag HTML semi-transparan dianimasikan, dan animasi bertumpuk yang dihasilkan sangat menghipnosis. 4. Ice-Cream Loader Kita tidak selalu memerlukan JPG atau PNG untuk membuat gambar yang indah, dan ini adalah contoh nya. Sebuah wadah div dan empat lagi lainnya adalah yang diperlukan untuk membuat gambar loader es krim kecil nikmat ini. Kode yang dihasilkan jauh lebih kecil daripada GIF animasi. 5. Merpati CSS Murni Saat Anda menggabungkan penggunaan artistik elemen HTML dengan beberapa animasi karakter, inilah hasilnya. Animasi luar biasa halus namun menyenangkan. Hormat untuk Julia Muzafarova akan apa yang pasti sangat mengesalkan membangun semua set keyframes itu. Dan juga kopi yang banyak! 6. Kucing Tidur Membawa banyak elemen HTML sederhana dengan kehalusan, animasi menyenangkan, kucing mengantuk ini memiliki banyak karakter. Contoh ini menggunakan Sass, dan variabel untuk mengontrol animasi. Cobalah mengubah beberapa untuk melihat apa yang terjadi! 7. Beruang Hitam Animasi yang halus bisa didapatkan saat menggunakan HTML dan CSS, terutama saat kita mengikuti pedoman dasar. Animasi ini membuat jumlah elemen menjadi minimum, dan penggunaan transformasi yang hebat. 8. Spons CSS Animasi cepat mampu menambahkan banyak karakter bila dikombinasikan. Dalam demo ini, lihatlah bagaimana gelembung dan percikan dipadu-padankan bersama-sama untuk membuat animasi lucu dengan sebuah spons yang bahagia, semua tanpa gambar. 9. Checkbox Mail CSS Murni Serangkaian animasi keyframe dapat mengungkapkan sebuah cerita atau membantu orang-orang memahami apa yang mereka lihat. Di sini kita melihatnya membuka amplop dan mendapatkan surat. 10. Preloader Mobil Sedikit gerakan halus dapat membuat perasaan intensitas yang hebat! Loader ini terdapat mobil tampak seperti sedang melaju bersama, semua diciptakan dengan beberapa elemen dan animasi CSS. Dengan tidak ada gambar, animasi ini akan cepat dimuat. Terinsipirasilah! Terima kasih seperti biasa untuk CodePen dan ide kreatif di belakang demo ini; mereka tentunya telah memberikan kita banyak inspirasi dalam contoh-contoh animasi ini. Lihatlah artikel berikut ini untuk inspirasi serupa, dan untuk mempelajari cara membuat animasi CSS Anda sendiri!
Caramembuat efek sliding background ini bukanlah hal baru. Saya sudah melihat beberapa situs web menggunakan efek ini, biasanya background yang digunakan adalah macam-macam foto dokumentasi dan sebagainya. Disini saya akan membahas bagaimana cara membuat efek sliding background. Disini gambar akan bergerak dari kiri ke kanan,
Cara membuat efek sliding background ini bukanlah hal baru. Saya sudah melihat beberapa situs web menggunakan efek ini, biasanya background yang digunakan adalah macam-macam foto dokumentasi dan sebagainya. Disini saya akan membahas bagaimana cara membuat efek sliding background. Berikut previewnya Demo. perlu di perhatikan bahwa ini berbeda dengan CSS slideshow atau Carousel, dimana gambar tersebut bisa dipisahkan menjadi slide yang dapat berhenti. Cara ini mengambil background dari satu elemen yang akan menjadi efek background yang akan selalu bergerak. HTML Posisi Element Mari kita tambah CSS untuk menetapkan posisi yang benar untuk 2 elemen ini. .wrapper { overflow hidden; } .sliding-background { height 500px; width 5076px; } .wrapper disini adalah 100% dari width default suatu browser, dan kita tambakan overflow properti yang akan menyembunyikan apapun secara visual yang berada di luar itu, anggap saja seperti tanaman dalam sebuah foto, mungkin ada beberapa hal extra di luar bungkuswrapper, tapi si pembungkus itu yang mencegah kita dari melihatnya. untuk .sliding-background disinilah triknya, saya memberi lebar 5076px agar membuat sliding efek ini bekerja. Membuat/memilih background image Disini kalian bebas memilih gambarnya. seperti di langkah sebelumnya saya agak sewenang-wenang membuat lebarnya 5076px hehe, itu sengaja dalam arti jika dibagi 3 akan cocok untuk waktu slide per menit. dengan kata lain gambar ini akan mengulang 3 kali dalam 1 menit. tambahkan background url pada CSS nya. .sliding-background { background url"tempatimage" repeat-x; height 500px; width 5076px; } nah, dengan begitu si gambar akan selalu bergerak mengulang di layar. Efek sliding Disini gambar akan bergerak dari kiri ke kanan, kalian juga dapat menggantinya dari kiri ke kanan, dengan mengubah properti transform pada 0%, dengan kata lain tinggal menukar posisinya saja. keyframes .slide { 0% { transform translate3d 0, 0, 0 ; } 100% { transform translate3d -1692px, 0, 0 ; } } Sekarang mari kita tambahkan waktu animasi slide pada .sliding-background dan jalankan untuk 1 menit dengan pengulangan tak terbatas. .sliding-background { background url"..path/to/image" repeat-x; height 560px; width 5076px; animation slide 60s linear infinite; } Dengan begitu efek sliding background ini sudah dapat dicoba. untuk mencobanya bisa disini Demo. Sekian Tutorial cara membuat efek sliding background menggunakan CSS, semoga bisa membantu. Comments comments
. 243 411 159 165 31 227 214 124
cara membuat background website bergerak
