Selamat Datang

Tutorial Play Video Ketika Scroll dengan HTML5 dan Jquery

Play video ketika scroll pada halaman website sedang menjadi trend saat ini, website-website modern banyak yang menerepkan hal tersebut pada website nya, hal ini banyak kita lihat pada website parallax.

Menarik memang melihat perubahan yang terjadi pada website saat ini, website pada saat ini kaya akan fitur, banyak hal bisa diterapkan pada website, efek-efek pun semakin banyak digunakan.

Artikel Terkait:

Pada kesempatan kali ini tutorial-webdesign.com akan memaparkan sedikit bagaimana cara membuat fitur yang biasa ada di website parallax, yang akan memainkan video background nya hanya ketika mouse di scroll.

scroll to play video

Struktur HTML

Seperti biasanya, kita mulai dengan membuat struktur HTML nya, simpel saja kita hanya perlu dua buah tag pada tutorial kali ini yang harus di letakan di tag body, tentunya untuk penerapan pada website yang lebih serius bisa lebih banyak tag nya, karena ini hanya untuk demo kita buat sangat sederhana.

<h1>Scroll to play video ►</h1>
<video id="video" src="http://vjs.zencdn.net/v/oceans.mp4"></video>

CSS

Selanjutnya kita perlu CSS untuk membuat teks menjadi di tengah, serta membuat tinggi body menjadi 4000px, sedangkan video dibuat dalam posisi fixed dan memberikan nilai cover pada background-size agar dia jadi memenuhi layar dan tidak berubah posisi ketika di scroll.

		*{
			padding: 0;margin: 0;
		}
		html {
		  height:100%;
		}
		body {
		  height: 4000px;
		}
		video {
		  position: fixed;
		  left: 50%;
		  top: 0;
		  min-width: 100%;
		  min-height: 100%;
		  width: auto;
		  height: auto;
		  z-index: -100;
		  background-size: cover;
		  -moz-transform: translateX(-50%);
		  transform: translateX(-50%);
		}
		h1 {
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  width: 100%;
		  -moz-transform: translate(-50%,-50%);
		  transform: translate(-50%,-50%);
		  z-index: 99;
		  font-family: HelveticaNeue, Helvetica, sans-serif;
		  font-size:8vmin;
		  text-align:center;
		  color: white;
		}

Jquery

Sama seperti pada tulisan Tutorial Membuat Perubahan Warna Background Ketika Scroll, dimana kita membutuhkan fungsi scrollTop() untuk mendapatkan nilai vertical ketika mouse di scroll. Jadi mouse scroll ini akan bertindak seperti tombol previous(scroll ke atas) dan tombol next (scroll kebawah).

	function scrollVideo() {
	  var video = $('#video').get(0),
	    videoLength = video.duration,
	    scrollPosition = $(document).scrollTop();
	  
	  video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;
	}

	$(window).scroll(function(e) {
	  scrollVideo();
	});
	</script>

Jika dijalankan akan terlihat seperti demo berikut ini, layaknya website parallax yang sedang nge-trend bukan? :D

Sekian tutorial singkat kali ini, semoga Tutorial Play Video Ketika Scroll Dengan HTML5 dan Jquery ini bisa membuat website anda kaya akan fitur, salam web design indonesia.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

9 thoughts on “Tutorial Play Video Ketika Scroll dengan HTML5 dan Jquery

  1. hakim says:

    kerennn..
    bagus ni buat background

  2. […] bisa menerapkan trik memutar video ketika scroll […]

  3. Versi universal untuk mengecek jarak gulungan layar:

    function isScrolledIntoView(elem) {
    var $window = $(window),
    docViewTop = $window.scrollTop(),
    docViewBottom = docViewTop + $window.height(),
    elemTop = $(elem).offset().top,
    elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom = docViewTop));
    }

    Sampel: http://jsfiddle.net/tovic/vVaat/embedded/result,js,html,css

  4. Oke siplah izin download.. terima kasih tutorialnya :D

  5. Luluk Masfufah says:

    Kalo mau buat slideshow video kita sendiri gimana? (Bukan video youtube atau gambar)

  6. Achmad says:

    kalau cara untuk membuat navigasi / header yang transparant tapi setelah di scrol jadi fixed itu gimana min??

  7. […] Baca Juga: Tutorial Play Video Ketika Scroll dengan HTML5 dan Jquery […]

  8. doowww says:

    mau nanya dong.. kalo website parallax dibikin designnya dari photoshop, canvas sizenya brapa ya? trims :)

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development