PlayList Javascript
-
PlayList u Javascript
CARA BIKIN TEKS ANIMASI 3D BOX ROTASI | Ngoding JavaScript, CSS dan HTML
Dibuat: ddqia Channel | Posting : 13 Nov 2019
Opening scene dalam video ini dibuat menggunakan bahasa pemograman JavaScript, HTML dan CSS.
Video berdurasi sembilan menit ini dilengkapi narasi berbahasa Indonesia yang menjelaskan secara detail proses pembuatannya, mulai dari ngoding html, css dan JavaScript tanpa dibantu satu plugin pun.
Jika dalam pemaparan video ini masih membingungkan, jangan segan untuk bertanya di kolom komentar.
Berikut ini beberapa aplikasi yang membantu penyelesaian proses video ini.
Penulisan atau ngoding menggunakan aplikasi ATOM editor yang telah dilengkapi dengan paket emmet dan linters.
Hasil ngoding dijalankan Xampp dengan dibantu browser Mozilla Firefox, lalu output dari Mozilla ini di rekam/capture menggunakan aplikasi Active Presenter dan RecordMyDesktop (Linux).
Hasil perekaman video diedit menggunakan aplikasi linux KdenLive.
Terakhir, suara atau audio diedit oleh aplikasi Audacity.
Penting!!! Sebelum membuat tutorial ini disarankan sebaiknya melihat dulu video sebelumnya:
Aplikasi Ngoding:
Klik disini
BRILLIANT TEXT ANIMATION:
Klik disini
Aplikasi Perekam Layar:
Klik disini
Video ini dilengkapi cuplikan lengkap source code, tetapi tidak menyertakan source code file. -
PlayList u Javascript
BRILLIANT TEXT ANIMATION | Tutorial Making Video Title Scene using JavaScript
Dibuat: ddqia Channel | Posting : 10 Nov 2019
Opening scene dalam video ini dibuat menggunakan bahasa pemograman JavaScript, HTML dan CSS.
Video berdurasi tujuh belas menit ini dilengkapi narasi berbahasa Indonesia yang menjelaskan secara detail proses pembuatannya, mulai dari ngoding html, css dan JavaScript tanpa dibantu satu plugin pun.
Jika dalam pemaparan video ini masih membingungkan, jangan segan untuk bertanya di kolom komentar.
Berikut ini beberapa aplikasi yang membantu penyelesaian proses video ini.
Penulisan atau ngoding menggunakan aplikasi ATOM editor yang telah dilengkapi dengan paket emmet dan linters.
Hasil ngoding dijalankan Xampp dengan dibantu browser Mozilla Firefox, lalu output dari Mozilla ini di rekam/capture menggunakan aplikasi Active Presenter dan RecordMyDesktop (Linux).
Hasil perekaman video diedit menggunakan aplikasi linux KdenLive.
Terakhir, suara atau audio diedit oleh aplikasi Audacity.
Penting!!! Sebelum membuat tutorial ini disarankan sebaiknya melihat dulu video sebelumnya:
Aplikasi Ngoding:
Klik disini
Making Intro Video using HTML CSS:
Klik disini
Aplikasi Perekam Layar:
Klik disini
Video ini dilengkapi cuplikan lengkap source code, tetapi tidak menyertakan source code file. -
PlayList u Javascript
WOW!!! UFO Hyperspace Animation using Javascript Code | Mahir Ngoding Playlist
Dibuat: ddQiaChannel | Posting : 28 Sep 2019
Video animasi ini teaser bagaimana membuat efek kecepatan cahaya menggunakan bahasa webprogramming Javascript, CSS dan HTML.
Lebih dari 500 partikel untuk membuat efek cahaya biru yang dibuat dengan fungsi div dari HTML, lalu diperbanyak mempergunakan createElement dan createTextNode dari Javascript.
Aneka ragam warna biru diolah oleh fungsi background linear gradient kepunyaan CSS3 serta dilengkapi kode warna secara acak yang dibantu oleh fungsi Math.random() Javascript.
Agar setiap partikel cahaya tersusun sehingga membuat lingkaran, efek ini berhasil dimanipulasi oleh transform rotate, transform-origin dan transform-style preserve3d.
Semua pengendalian animasi diatur oleh setTimeout fungsi dari Javascript.
Terimakasih telah menyaksikan.
Jangan lupa dukung terus kami dengan cara SUBSCRIBE channel youtube "ddqia channel".
Sumber Animasi UFO:
https://youtu.be/cn9yeUjAKjo -
PlayList u Javascript
HOT!!! BURNING TEXT ANIMATION #2 using JAVASCRIPT, CSS & HTML | Mahir Ngoding Playlist
Dibuat: ddQia Channel | Posting : 27 Sep 2019
Video animasi Teks Terbakar ini dibuat menggunakan bahasa webprogramming murni Javascript, CSS dan HTML.
Link Video sebelumnya:
CARA BIKIN ANIMASI TEKS KEBAKAR KEPANASAN | NGODING TEKS ANIMASI HTML & CSS | BURNING TEXT ANIMATION
Efek animasi ini tidak satupun mempergunakan framework atau gambar, tetapi murni fasilitas dari JS, CSS3 dan HTML5.
Efek api menggunakan fungsi div dari HTML5 yang di manipulasi fungsi createElement dan createTextNode dari Javascript sehingga bisa memunculkan ratusan partikel.
Ratusan div yang telah dibuat Javascript, dipercantik tampilannya oleh CSS3 dengan menggunakan border-radius, filter blur, transform rotate, transition, animation dan keyframe.
Semua perubahan animasi diatur setInterval dan setTimeout kepunyaan Javascript.
Jika ada yang penasaran bagaimana cara ngoding efek ini, silahkan request atau komentar di kolom komentar di bawah. Kode ini GRATIS dan boleh dimodifikasi.
Dukung terus channel kami dengan cara klik tombol Subscriber youtube ddqia Channel.
Terima Kasih telah mampir dan menyaksikan konten video kami. -
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 Javascript
Animation Fire Effect using Vanilla Javascript, CSS and HTML | Mahir Ngoding Playlist
Dibuat: ddQiaChannel | Posting : 20 Sep 2019
Video animasi efek api ini, merupakan hasil ngoding mempergunakan perpaduan bahasa webprogramming Javascript, CSS dan HTML.
Fungsi javascript yang dipakai antara lain setInterval, createElement, createTextNode, appendChild, setTimeout, classList.add(), for loop, Math.random() dan Math.floor.
CSS antara lain filter blur, border-radius, animation, keyframes, transform rotate, box-shadow dan background-color.
HTML hanya menggunakan div dan span. -
PlayList u Javascript
CARA MEMBUAT PIZZA - NGODING JAVASCRIPT, HTML dan CSS | Mahir Ngoding Playlist
Dibuat: ddQia Channel | Posting : 17 Sep 2019
Video ini menampilkan animasi text bahan-bahan membuat adonan makanan khas Italia yang dikenal Pizza.
Tampilan video dibuat dengan mempergunakan bahasa pemograman Javascript Vanilla, HTML dan CSS.
Fungsi-fungsi dalam javascript yang digunakan diantaranya addEventListener mouseover/mouseleave, keycode dan setTimeout.
Selain itu, beberapa fungsi css dan html diantaranya filter blur, opacity, overflow, keyframes dan animation. Fungsi html diantaranya div, img, span dan h1.
Tampilan teks animasi ini cocok digunakan untuk konten video memasak atau pengenalan info produk baru.
Dukung terus chanel ini dengan cara klik tombol merah subscriber di bawah video.
Terima kasih telah menyaksikan. Sampai ketemu lagi di video mendatang.
Semua gambar di video ini hasil unduhan:
http://www.freepik.com -
PlayList u Javascript
AutoFOKUS Animation EFFECT: My Baby Boy | Pure JS, HTML & CSS | Mahir Ngoding playlist
Dibuat: ddQia Channel | Posting : 10 Aug 2019
Bagaimana cara membuat visual efek yang semula gambar backgroundnya gelap dan buram menjadi cerah dan jelas.
Video ini dibuat menggunakan bahasa web programming HTML, CSS dan Javascript (murni) tanpa framework.
Bagi yang ingin kode ini secara gratis, silahkan klik tombol subscribe dan request/komen di kolom komentar dibawah ini. Gratis tidak perlu bayar.
Fungsi CSS mempergunakan clip-path dan filter blur.
Fungsi Javascript menggunakan addEventListener input, mousemove dan fungsi keyCode.
Bagi yang baru bergabung, silahkan tonton video sebelumnya di ddQia Channel.
TAHAP AWAL SEBELUM NGODING
Lihat Video
MEREKAM LAYAR KOMPUTER GRATIS
Lihat Video
PERANGKAT MINIM TAPI BISA BIKIN VIDEO JADI VIRAL
Lihat Video
Terimakasih telah menyaksikan, dukung terus channel ini dengan cara menekan tombol subscribe, like, share dan jangan lupa komentar. -
PlayList u Javascript
RESPONSIVE TOUCH SLIDER USING ANIMATION BACKGROUND | Javascript, HTML & CSS | Mahir Ngoding Playlist
Dibuat: ddQia Channel | Posting : 14 Aug 2019
Ngoding responsive slider kali ini dilengkapi tombol navigasi dan mode geser (swipe mode) pada setiap gambar/foto slider serta diujicoba melalui browser chrome yang dijalankan menggunakan komputer dan handphone
Ukuran file ini tidak lebih dari 15kb, jika menggunakan framework akan membengkak hingga ukurannya diatas 100kb. Sehingga ngoding tanpa framework jauh lebih hemat.
Video di edisi kali ini merupakan revisi dari semua konten video yang membahas #ngoding slider. Diantara video terdahulunya bisa dibuka di link Responsive Animation Slider dan Responsive Slider
Penulisan kode ini murni mempergunakan bahasa javascript atau dikenal dengan sebutan vanillaJS yang selalu membaur dengan HTML dan CSS.
Tak ketinggalan, dibahas pula beberapa perangkat yang dicoba untuk menguji hasil pengodingan ini. Diantaranya PC jadul dual core, hp Oppo A37 dan hp Realme 3 Pro. Manakah yang paling bagus performanya? Untuk tau jawabannya, saksikan video ini sampai akhir.
Software editing menggunakan ATOM, browser dites lewat Mozilla dan Chrome. Editing video dan perekaman layar masih tetap setia menggunakan aplikasi Android VideoShow dan Active Presenter.
Pengolahan animasi di dalam video ini sebagian besar menggunakan HTML dan CSS. Insya Allah, dalam kesempatan lain akan dibuat efek-efek video tutorialnya secara terpisah.
Semua hasil ngoding didokumentasikan ke dalam video ini. Mulai dari kode HTML sampai Javascript, jadi tonton sampai selesai yaa.
Bagi yang ingin kode (source code) yang sudah jadi dalam bentuk file, bisa tulis permintaan atau request di kolom komentar di bawah sampai dengan minggu depan, jadi buruan request dan komentar di bawah ini!
Kodingan ini GRATIS dan boleh dimodif sesuka hati. Indahnya berbagi untuk para peminat ngoding. .
Terima kasih telah menyaksikan video ini. Dukung terus channel ini. Jangan lupa tekan tombol subscribe bagi yang belum bergabung di channel ini.
Like dan bagikan video ini. Komentar, request dan saran bisa ditulis di bawah. -
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
MENU NAVIGATION STARWARS - LIGHTSABER USING PURE JAVASCRIPT, HTML and CSS | Mahir Ngoding Playlist
Dibuat: ddQiaChannel | Posting : 17 Jul 2019
Ngoding animasi menu ini terinspirasi dari salah satu film favorit kami yaitu Star Wars Series. Film terbarunya akan tayang pada bulan Desember 2019. Saya sisipkan juga cuplikan trailer dari film terbarunya di video tutorial ini.
Senjata andalan para Jedi ini dikenal dengan nama Lightsaber, pedang laser berkekuatan super ini bisa menghancurkan apa saja termasuk menu navigasi di video tutorial ini.
Menu dengan efek Lightsaber ini dibuat menggunakan bahasa HTML, CSS dan Javascript tanpa mempergunakan framework atau lebih di kenal dengan nama Vanilla Javascript.
Bagi yang ingin mendapatkan kode ini secara gratis, bisa kunjungi GitHub atau ke website ini untuk mengunduhnya.
Download files:
Klik untuk mengunduh
Link GitHub:
Klik ke laman Unduhan
Video Sebelumnya:
AUTOMATICALLY CENTER POSITION!!! HTML CSS 100% JAVASCRIPT | Mahir Ngoding Playlist
Klik lihat Video
PERHATIAN!!! CARA SEBELUM NGODING | LANGKAH AWAL yang harus diperhatikan! | MAHIR NGODING
Klik lihat Video
Kode ini gratis, bisa dimodifikasi sesuai keinginan. Jika ada pertanyaan, silahkan komentar di dibawah ini.
Dukung terus channel ini dengan cara menekan tombol subscribe, like dan share.
Terima kasih telah menyaksikan. -
PlayList u Javascript
MENU NAVIGATION SLIDER ANIMATED | HTML CSS 100% JAVASCRIPT | Mahir Ngoding Playlist
Dibuat: ddQiaChannel | Posting : 11 Jul 2019
Kembali lagi di ddQia Channel, kali ini kami membuat tutorial menu navigasi untuk website. Javascript menjadi pemeran utama dalam pembuatan menu ini.
Bagaimana cara membuat animasi bingkai bawah (bottom border) yang mengikuti tombol menu saat di tekan. Ngoding sederhana ini murni menggunakan bahasa JS tanpa mempergunakan framework. Sudah pasti HTML dan CSS setia menemani.
Browser yang digunakan pada tutorial ini menggunakan Chrome. Adapun jika teman-teman yang baru bergabung kebingungan mengikuti tutorial ini, lebih baik lihat dulu video sebelumnya. Bisa di cek video-video di bawah ini :
AUTOMATICALLY CENTER POSITION!!! HTML CSS 100% JAVASCRIPT | Mahir Ngoding Playlist
Klik lihat Video
PERHATIAN!!! CARA SEBELUM NGODING | LANGKAH AWAL yang harus diperhatikan! | MAHIR NGODING
Klik lihat Video
SEGER!!! Semua bisa terekam??? | Software Perekam Layar untuk Komputer & Laptop (1:09)
Klik lihat Video
SEGERRR LAGI!!! Cara Gampang Rekam Layar | PC / Laptop | Menjadi Youtuber
Klik lihat Video
Semoga bisa bermanfaat video tutorial sederhana ini. Klik tombol Subscribes untuk mendukung terus konten-konten video di channel ini. Serta jangan lupa share (bagikan) link videonya. Terima kasih. -
PlayList u Javascript
AUTOMATICALLY CENTER POSITION + FONT RESIZE!!! HTML CSS 100% JAVASCRIPT | Mahir Ngoding Playlist
Dibuat: ddQiaChannel | Posting : 28 Jun 2019
Ngoding edisi kali ini akan membahas tentang bagaimana caranya mengubah posisi teks atau gambar agar bisa secara otomatis berada di tengah halaman layar hanya dengan sekali klik tombol.
Tutorial ini menambahkan fitur koding javascript untuk memperbesar atau memperkecil huruf secara realtime kemudian dengan hanya sekali klik tombol AUTO POSITION, maka teks atau gambar akan secara otomatis berpindah posisi ke tengah layar.
Browser yang digunakan pada tutorial ini menggunakan Chrome. Adapun jika teman-teman yang baru bergabung kebingungan mengikuti tutorial ini, lebih baik lihat dulu video sebelumnya. Bisa di cek video-video di bawah ini :
AUTOMATICALLY CENTER POSITION!!! HTML CSS 100% JAVASCRIPT | Mahir Ngoding Playlist
Klik lihat Video
PERHATIAN!!! CARA SEBELUM NGODING | LANGKAH AWAL yang harus diperhatikan! | MAHIR NGODING
Klik lihat Video
SEGER!!! Semua bisa terekam??? | Software Perekam Layar untuk Komputer & Laptop (1:09)
Klik lihat Video
SEGERRR LAGI!!! Cara Gampang Rekam Layar | PC / Laptop | Menjadi Youtuber
Klik lihat Video
Semoga bisa bermanfaat video tutorial sederhana ini. Klik tombol Subscribes untuk mendukung terus konten-konten video di channel ini. Serta jangan lupa share (bagikan) link videonya. Terima kasih. -
PlayList u Javascript
AUTOMATICALLY CENTER POSITION!!! HTML CSS 100% JAVASCRIPT | Mahir Ngoding Playlist
Dibuat: ddQiaChannel | Posting : 28 Jun 2019
Ngoding edisi kali ini akan membahas tentang bagaimana caranya mengubah posisi teks atau gambar agar bisa secara otomatis berada di tengah halaman layar hanya dengan sekali klik tombol.
Browser yang digunakan pada tutorial ini menggunakan Chrome. Adapun jika teman-teman yang baru bergabung kebingungan mengikuti tutorial ini, lebih baik lihat dulu video sebelumnya. Bisa di cek video-video di bawah ini :
PERHATIAN!!! CARA SEBELUM NGODING | LANGKAH AWAL yang harus diperhatikan! | MAHIR NGODING
Klik lihat Video
SEGER!!! Semua bisa terekam??? | Software Perekam Layar untuk Komputer & Laptop (1:09)
Klik lihat Video
SEGERRR LAGI!!! Cara Gampang Rekam Layar | PC / Laptop | Menjadi Youtuber
Klik lihat Video
Ngoding kali ini dibantu bahasa Javascript agar tombol otomatisnya bisa berfungsi.
Semoga bisa bermanfaat video tutorial sederhana ini. Klik tombol Subscribes untuk mendukung terus konten-konten video di channel ini. Serta jangan lupa share (bagikan) link videonya. Terima kasih. -
PlayList u Javascript
Javascript ScrollLeft Navigation | HTML+CSS (100% Javascript) | PART 3
Dibuat: ddQiaChannel | Posting : 27 Jan 2019
Assalamu'alaikum.
Alhamdulillah, akhirnya video terakhir dari seluruh seri ini telah diupload.
Terima kasih saya ucapkan pertama keluarga, istri dan anak tercinta, Youtube dan Pak Dhika dari channel Web Programing Unpas atas video-video turotialnya.
Video tutorial yang saya buat masih jauh dari sempurna, perlu perbaikan. Support viewers sangat diharapkan untuk pengembangan channel ini. Subscribe, like, comment atau share konten ini jika bermanfaat.
"Lebih baik memberi dulu", itulah visi channel ini. Sudah banyak pemberian-pemberian yang saya terima, melalui chanel ini saya ingin memberi sesuatu yang bisa memberi manfaat.
Akhir kata, mari kita semua berkreasi, memberikan yang terbaik dari diri kita untuk orang banyak.
Wasalamualaikum.
Klik untuk lihat dan Subcribe Channel Youtube -
PlayList u Javascript
ScrollLeft Navigation HTML+CSS3 (100% Javascript) Part 2
Dibuat: ddQia Channel | Posting : 25 Jan 2019
Akhirnya beres juga di upload setelah ada beberapa kendala... HP yang dipake buat edit video ini gak ada space-nya. Jadi terpaksa harus dipotong durasinya.
Sekali lagi maaf, maklum peralatannya terbatas. Ngoding video ini dibuat lewat software Videoshow yang di install di OPPO A37. Capture layar HP menggunakan software Mobizen.
Tadi siang pinjem dulu PC, buat capture layar kode-kodenya biar keliatan bagus... Pake PC dualcore T4400 yang ramnya 2gb, hdd 320gb, layar lcd 17". Software caputernya yang gratisan pake ActivePresenter.
Semoga video part 2 ini bisa membantu teman-teman yang seneng ngulik website khususnya yang pakai bahasa javascript.
Terima kasih sekali lagi, maaf atas kekurangan, support boleh dengan cara subscribe, like dan komentar atauu donasi boleh juga :)
Terima kasih telah menyaksikan konten video kami.
Klik untuk lihat dan Subcribe Channel Youtube -
PlayList u Javascript
ScrollLeft Navigation HTML+CSS3 (100% Javascript) PART 1
Dibuat: ddQiaChannel | Posting : 24 Jan 2019
Navigation BAR without framework, pure Javascript+HTML+CSS code.
Hanya menggunakan kode sederhana CSS + HTML dan Javascript, tanpa framework. Akhirnya ngoding menu slider yang menggunakan fungsi scroll selesai dibuat.
Ngoding ini menggunakan fungsi JS diantaranya: array, push, unshift, find, findIndex, scrollLeft, addEventListener. Maafkan jika kode masih berantakan, maklum di edit ngodingnya pake HP jadul, bikin video juga pake HP ini... Semoga kedepannya ada rejeki bisa beli gear-gear yang mendukung pembuatan konten video tutorialnya..
Script ini masih belum stabil digunakan di Mozilla dan browser hp selain Chrome. Masih butuh perbaikan.
Terima kasih Pak Dika dari Unpas atas tutorial-tutorialnya...tidak lupa titik komanya hahaha...
Semoga ada manfaatnya. Terima kasih telah nonton video yang sederhana ini. Subscribe, like dan komen jika berkenan.
Klik untuk lihat dan Subcribe Channel Youtube
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.