- Katılım
- 28 Mayıs 2013
- Mesajlar
- 190
- Reaction score
- 1
Özellikle teknoloji firmaları yeni ürünleri tanıtırken hazırladıkları web tasarımlarında HTML5in video oynatıcısı aracılığıyla küçük çaplı şovlar yapmakta. Siz ön katmanda ürünle ilgili detaylı bilgileri okurken alt katmanda gizli bir video yapısı kaydırma çubuğuyla eş zamanlı olarak ileri/geri ilerleyebilmekte.
Bu anlatımımız gözünüzde bir tasarım canlandırmadıysa aşağıdaki örneği görüntüleyerek işe başlayabilirsiniz. Daha sonrasında ise bu yeni teknoloji ürünü tasarımı oluşturacağız.
HTML5 Video Oynatıcısı
Bu güncel ve kullanışlı video oynatıcısı daha önceki teknolojilerde alışık olmadığımız değiştirilebilir ve esnek yapısıyla büyük kolaylıklar sağlıyor. Eğer HTML5 video player hakkında bilgi edinmek istiyorsanız işe aşağıdaki makalelerimize göz atarak başlayabilirsiniz.
HTML5 Video Oynatıcı (Altyazı ve Logolu)
HTML5 ile Arkaplanda Video!
HTML5 ile Ne Değişti?
Scroll (kaydırma çubuğu) ile kayan video nasıl hazırlanır?
Daha önce de bahsettiğimiz gibi HTML5 video oynatıcısı değiştirlebilir ve özgünleştirilebilir seçenekleri sayesinde bize büyük bir esneklik kazandırıyor. İşte bu yapıyı kullanarak videomuzun ilerleyiş aşamasını web sayfamızın kaydırma çubuğuyla eşleştireceğiz. Birkaç satır HTML, JavaScript ve CSS kodu işimizi görecektir. Hadi CSS kodlarımız ile başlayalım!
CSS Kodları
Boşu boşuna endişe etmeyin. Bu makalemizde hiçbir dil de 5 satırdan fazla kod yazmayacağız. Aşağıdaki CSS tanımlaması ile video playerimizin üzerini örtüp kaydırma çubuğunu istediğimiz ölçüye hizalayacak Divisionı tanımlıyoruz.
Not : Burası önemli. Aşağıda girdiğimiz 2500 piksellik height değeri, kullandığımız örnek videosuna özgündür. Daha uzun bir video için daha uzun bir height değeri girmeniz gerekmektedir.
Kod:
.aw-screensizer {
display: table;
width: 100%;
height: 2500px;
}HTML Kodları
İlk olarak yukarıda yüksekliğini tanımladığımız aw-screensizer divini ekleyelim, sonrasında da HTML5 playerda oynatacağımız videoyu bağlayalım. Son olarak kullanıcının
Kod:
<div class="aw-screensizer"></div>
<video id="aw-video" tabindex="0" autobuffer="autobuffer" preload="preload">
<source src="images/ders-videosu2.mp4"></source>
<p>Tarayıcınız HTML5'in <video> elemanını desteklememekte.</p>
</video>Ve son olarak JavaScript kodlarımızı ekleyelim.
JavaScript Kodları
İlk olarak aw-videoyu yakalıyoruz. Daha sonra video oynatıcıyı durdurup, scrollu oynatıcının pause işlevine bağlıyoruz. Böylece her pause() çalıştırıldığında video duruyor ya da devam ediyor. Son olarak da video için atlama süresi ve geçiş sıklığı belirliyoruz.
Kod:
var slideOut = document.getElementById('aw-video');
slideOut.pause();
window.onscroll = function(){slideOut.pause();};
setInterval(function(){slideOut.currentTime = window.pageYOffset/400;}, 40);Bu kadar.
Kapanış
Bu tip kapsamlı web aksiyonları ne kadar karmaşık gözükse de , basit kilit hamlelerle kolayca hazırlanabiliyorlar. HTML5′in bize kattığı avantajları konuşmaya devam edeceğiz fakat şimdilik bu kadar.
İyi çalışmalar.
Kaynak : http://www.adobewordpress.com/scroll-ile-bir-ilerleyen-video-nasil-yapilir