⛳ Cara Membuat Background Website Bergerak

Kamubisa menggunakan CSS saja untuk menggerakan animasinya. Seperti di sini, DUMET School akan memberikan sedikit tips untuk membuat animasi background text dengan CSS. Kamu bisa ikuti coding ini ya! Buat kode HTML-nya simpel saja seperti berikut: 1 2 3

DUMETSchool.< / h1> < / body> 1Buka Situs Plotagraph Situs kamu harus buka situs PLOTAGRAPH. Disitus tersebut nantinya kamu diharuskan untuk mendaftar menggunakan email kamu. Setelah mendaftar kamu harus cek email kamu untuk melakukan aktivasi akun kamu. Lalu kamu kembali ke situs tersebut untuk login menggunakan email yang tadi sudah di aktivasi. Adabeberapa bentuk foto bergerak seperti video, yaitu membuat background bergerak, misalnya kamu berfoto di air terjun atau membuat foto portrait wajah bergerak. Beberapa orang juga menggunakan teknologi untuk mengubah foto orang tercintanya yang sudah meninggal agar merasa lebih hidup lagi. Nama: Ahmad Zakiyul AhkamTeknik : Informatikakelas : 5CDosen Pembimbing Soffa Zaharaassalamualaikum saya membuat sebuah tutorial backgroun SahabatJasaAdsense.com, gimana kabarnya hehe.. di tutorial sebelumnya telah ane publish tentang Cara Membuat Favicon di Blogger, skarang ane akan mempublish artikel tentang Cara membuat text berjalan atau marquee. Apa itu Marquee? Marquee adalah text berjalan yg biasanya kita liat di website yg berisi pengumuman ataupun Informasi. Program html marquee ini berguna bukan saja untuk menarik tamu CaraMembuat Kartun Ber-animasi Gerak 2D, dan 3D di PC - membuat film kartun ternyata sangat mudah lho. Kita bisa membuatnya di software yang bernama Macromedia Flash MX. Bila dulu kita berfikir tidak mungkin membuat film kartun seperti Doraemon, Naruto, Sinchan, dll. sekarang gak lagi. Karena semuanya ternyata mudah, asalkan kita mau berusaha 8 Zeotropic - Photo In Motion. Aplikasi foto bergerak lainnya yaitu Zeotropic - Photo In Motion. Melalui aplikasi ini, Anda bisa membuat foto bergerak dengan efek sinematik yang cantik dan menarik. Aplikasi ini cukup mudah untuk digunakan, tanpa perlu tutorial Anda sudah bisa mengedit foto dengan menarik. Dengantambahan class .bg-gradient, warna background memiliki gradasi di bagian atas. Efek yang dihasilkan memang tidak terlalu terlihat, tapi jika diperhatikan dengan seksama warna di sisi atas sedikit memutih dibandingkan warna di sisi bawah element. Dalam tutorial ini kita telah membahas cara mengubah warna background menggunakan Bootstrap Backgroundzoom meeting bergerak. Jika dirimu membuat slide PPT secara manual gunakan fitur tambah halaman atau duplikat halaman dengan cara klik tanda titik tiga — yang ada di samping slide. Di bawah ini adalah cara buat logo online dengan Canva. Cara Menghapus Background Foto Gambar dan Logo di Canva. . 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; } 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 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

cara membuat background website bergerak