KOLEKSI VIDEO

  • PlayList u Javascript

    Responsive Animation SLIDER using Vanilla Javascript, HTML & CSS

    Dibuat: ddQiaChannel | Posting : 21 Jul 2019

    Video tutorial kali ini membahas cara ngoding untuk mengolah pergantian foto atau gambar agar otomatis looping atau lazim disebut slider/karusel yang digunakan di awal laman website.

    Slider memberi kemudahan kepada pengunjung untuk mengetahui konten-konten apa saja yang dibahas di dalam sebuah website.

    Bahasa pemograman yang dipergunakan adalah bahasa HTML, CSS dan Javascript. Tidak mempergunakan framework apapun.

    Fungsi Interval menjadi pemeran utama dalam pengelolaan alur pergantian slider ini.

    Selain itu, fungsi setTimeout membantu dalam proses pengaturan animasi. Untuk pengembangan berikutnya, akan disertakan fungsi tombol navigasi, touch mobile dan fungsi klik mouse.

    Versi perbaikan mendukung tombol/button dan Touch effect:
    Lihat Video.

    Link download GitHub:
    Download kode

    Link download Official Website:
    Unduh kode

    Kode ini gratis, bisa dimodif. Jika berkenan setelah download kode ini, dukung kami dengan cara:

    Subscribe dan like Youtube Channel "ddqia Channel"

    Terima Kasih telah menyaksikan.

  • PlayList u Javascript

    LESS THAN A MINUTES | CREATE TEXT ANIMATIONS | TUTORIAL STEP BY STEPS with Source Code+Subtitle

    Dibuat: ddqia Channel | Posting : 20 Dec 2019

    Dalam video tutorial di edisi ini kita akan bareng-bareng ngoding membuat atau menciptakan halaman WEBSITE buatan sendiri yang berisi kumpulan/koleksi Teks Animasi CSS3.

    Kurang dari satu menit kita bisa membuat, merubah dan memodifikasi video intro teks animasi.

    Hasil teks animasi ini bisa digunakan untuk di tempel dalam video buatan kita, bisa buat judul untuk persentasi di sekolah/kuliah atau di pekerjaan.

    Kali ini temen-temen tidak hanya menempel cover background statis tanpa animasi. Namun kini, cover intro temen-temen bisa tampil lebih dinamis karena menggunakan teks animasi secara cepat dan mudah.

    Clip video ini merupakan hasil ngoding yang nanti akan kita buat. Hasil ngoding dijalankan lewat browser Mozilla atau Chrome, lalu direkam menggunakan aplikasi perekam layar seperti Active Presenter.

    Bagi temen-temen yang ingin langsung ngoding, source coding-nya sudah saya sisipkan di akhir video, atau info detailnya bisa lihat deskripsi di bawah.

    Video ini lumayan agak panjang, karena menjelaskan tahap demi tahap terciptanya halaman WEBSITE.

    Pokoknya banyak teknik baru penulisan, solusi dan hal-hal menarik lainnya di video ini.

    Oh yaa penulisan ini masih tetap menggunakan bahasa web programing HTML, CSS3 dan Vanilla JavaScript tanpa menggunakan framework.

    Berikut ini beberapa aplikasi yang membantu penyelesaian proses video ini.

    Penting!!! Sebelum membuat tutorial ini disarankan sebaiknya melihat dulu video sebelumnya:

    Aplikasi Ngoding:
    Klik disini

    Aplikasi Perekam Layar:
    Klik disini

    Video ini dilengkapi cuplikan lengkap source code, tetapi tidak menyertakan source code file.

    00:00 - 02:40 Intro
    02:40 - 03:32 Kode HTML
    03.32 - 05:25 Kode CSS
    05:25 - 06:12 Kode ekspresi pada Javascript
    06:12 - 11:20 Membuat fungsi kontruksi
    11:20 - 12:05 Fungsi change pada addEventListener
    12:05 - 17:25 Fungsi Motion untuk Animasi
    17:25 - 20:40 Fungsi push, findIndex() dan ekspresi array
    20:40 - 22:40 Menambahkan warna dan spasi per kata
    22:40 - 28:30 Menambah latar gambar
    28:30 - 33:40 Membuat animasi fadeOut
    33:40 - 35:45 Menghilangkan kotak select saat memulai animasi
    35:45 - 38:25 Fungsi Math.random() pada animasi
    38:25 - 41:15 Membuat posisi teks dan ukuran font
    41:15 - 44:22 Membuat ekspresi Object
    44:22 - 44:17 Menambah beberapa keyframes animasi
    44:17 - 45:50 Source Code (HTML, CSS, JavaScript)
    45:50 - 46:24 Penutup

  • PlayList u Javascript

    ANIMATION GREENCLOUD using Pure Javascript, CSS & HTML | Mahir Ngoding Playlist

    Dibuat: ddQiaChannel | Posting : 26 Sep 2019

    Video ini tentang bagaimana membuat partikel awan yang memutari lingkaran menggunakan Javascript.

    Partikel kabut yang dibuat merupakan hasil manipulasi fungsi div HTML yang di bantu fungsi filter blur dari CSS.

    Lingkaran hitam (blackhole) dibuat menyerupai teleportasi menggunakan fungsi clip-path circle at center dari CSS.

    Sebanyak 35 partikel sinar di bawah dan kabut yang mengelilingi blackhole. Partikel keluar satu per satu yang diatur oleh fungsi setInterval kepunyaannya Javascript.

    Selain fungsi animation CSS, banyak sekali fungsi setTimeout dalam kode ini untuk menjalankan animasi seperti dalam pergantian teks.

    Komentar dan request di kolom komentar untuk mendapatkan file hasil ngoding ini. Kode ini GRATIS dan bisa dimodif.

    Dukung terus channel ini dengan cara menekan tombol SUBSCRIBE channel Youtube kami ddqiachannel.

    Terima kasih.

  • PlayList u Menjadi Youtubers

    GOYANG vs MULUS | 30 detik tau cara mudah mengubah video goyang menjadi mulus | Menjadi Youtuber

    Dibuat: ddQiaChannel | Posting : 21 Feb 2019

    Video tutorial cara mudah mengubah video rekaman goyang menjadi stabil dan enak dilihat. Hanya butuh waktu kurang dari satu menit, anda akan tahu cara membuat video lebih bagus.

    Klik untuk lihat dan Subcribe Channel Youtube

  • PlayList u Javascript

    MAKING MOBILE RESPONSIVE IMAGES-SLIDER using Vanilla JavaScript | Full Tutorial +SourceCode

    Dibuat: ddqia Channel | Posting : 01 Dec 2019

    Tutorial ini dilengkapi audio dan teks berbahasa Indonesia serta teks terjemahan bahasa Inggris.

    Video berdurasi 38:46 menit ini membeberkan semua rahasia kode JavaScript, HTML5 dan CSS3 tentang cara bagaimana tip dan trik ngoding animasi slider images untuk mobile device yang full responsive touch.

    Dalam pembuatannya, tidak satupun plug-in atau framework yang digunakan, murni bahasa pemograman JavaScript.

    Ikuti semua prosesnya dari awal, siapkan cemilan dan kopi sambil menyaksikan tutorial ini, karena durasi video ini cukup panjang.

    Tidak hanya menampilkan cara pembuatannya, dalam video ini dilengkapi penjelasan berbahasa Indonesia (termasuk subtitle Eng/Ind masih proses) serta dokumentasi source code di diakhir video.

    00:00 - 01:08 Pembukaan
    01:08 - 05:16 Ngoding HTML
    05:16 - 13:45 Ngoding CSS3
    13:45 - 15:35 Penjelasan Animasi
    15:35 - 29:50 Ngoding JavaScript
    29:50 - 36:20 Ngoding Touch JavaScript
    36:20 - 38:20 Penutup

    Terima kasih telah menyaksikan video tutorial ini.

    Berikut ini beberapa aplikasi yang membantu penyelesaian proses video ini.

    Penting!!! Sebelum membuat tutorial ini disarankan sebaiknya melihat dulu video sebelumnya:

    Aplikasi Ngoding:
    Klik disini

    MEMBUAT ICON/SIMBOL:
    Klik disini

    Aplikasi Perekam Layar:
    Klik disini

    Video ini dilengkapi cuplikan lengkap source code, tetapi tidak menyertakan source code file.

TENTANG

Website ini membahas informasi hiburan, kuliner, pendidikan, tutorial/cara desain, web programming, animasi, video/audio, menggambar dan menjadi Youtubers.

Website ini telah resmi menjadi bagian dalam Program Partner Youtube.

Fokus utama kami yaitu berkolaborasi membuat video e-learning & hiburan yang bisa disaksikan melalui laman website ini dan Youtube.