Javascript ile Kaydırma Göstergesi Oluşturma

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title>Başlıksız Belge</title>
<style>
body{background:#EAEAEA;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;padding-top:55px;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.content-wrapper{width:100%;max-width:900px;margin:0 auto;padding:0;background:#fff;}
.header{background:#033;padding:0;height:55px;line-height:55px;overflow:hidden;position:fixed;top:0;left:0;width:100%;z-index:999;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transition-property:-webkit-transform;transition-property:transform}
.header--hidden{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
header .content-wrapper{background:0 0;padding:0 20px;}
header h1{float:left;margin:0 40px 0 0;width:210px;color:#fff;height:55px;line-height:55px;}
.topnav{float:left;width:calc(100% - 250px)}
.topnav ul{background:#033;margin:0;padding:0;font-size:0}
.topnav li{display:inline-block;margin:0;padding:0;}
.topnav li a{font-size:16px;margin:0;padding:0 20px;height:55px;line-height:55px;display:block;text-align:center;text-decoration:none;color:#FFF}
.topnav li a:hover{background:#666}
.content{margin:0;padding:20px 20px 0;overflow:hidden;}
.content h2{margin:0 0 20px;padding:0;font-size:28px;text-align:center;text-transform:capitalize;}
.content p{margin:0 0 20px;padding:0;font-size:16px;}
footer .content-wrapper{background:#666;color:#CCC;text-align:center;padding:10px 20px;font-size:90%;}
.clear{display:block;clear:both;}
.progress-container{width:100%;height:3px;background:#273f4a;position:fixed;top:0;left:0;z-index:9999}
.progress-bar{height:3px;background:#FF5722;width:0%}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressbar"></div>
</div> 
<header class="header" role="banner">
<div class='content-wrapper'>
<h1>LOGO</h1>
<div class='topnav'>
<ul>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Hakkımızda'>Hakkımızda</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='İletişim'>İletişim</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Gizlilik'>Gizlilik</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Arşiv'>Arşiv</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Reklam'>Reklam</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</header>
<div class="clear"></div>
<div class='content-wrapper'>
<div class='content'>
<h2>Kayıp Karıncalar Vadisi</h2>
<p>Kayıp Karıncalar Vadisi, henüz yumurtadan yeni çıkan yalnız ve yaralı bir uğur böceğinin, tanışıp dost olduğu karıncalarla çıktığı yolculuğu anlatıyor.</p>
<p>Organizasyon, disiplin, dostluk, dayanışma, cesaret ve sorumluluk almayı farklı bir bakış açısıyla gördüğümüz bir şaheser.</p>
<p>Kayıp Karıncalar Vadisi, henüz yumurtadan yeni çıkan yalnız ve yaralı bir uğur böceğinin, tanışıp dost olduğu karıncalarla çıktığı yolculuğu anlatıyor.</p>
<p>Kayıp Karıncalar Vadisi, henüz yumurtadan yeni çıkan yalnız ve yaralı bir uğur böceğinin, tanışıp dost olduğu karıncalarla çıktığı yolculuğu ve bu yolculuğun uğur böceğini adım adım nasıl güçlendirdiğini konu alıyor.</p>
<p>Bir kaza sonucu kanatlarından birini ve ailesini kaybeden yavru uğur böceği, gece yağmurdan korunacak bir yer ararken içi kesme şeker dolu kutuya sığınıyor. Gün aydınlandığında kutu bir grup karınca tarafından fark ediliyor. Uğur böceğinin varlığından habersiz olan karıncalar, kutuyu yuvalarına taşımaya karar veriyorlar. Böylece uğur böceği için zorunlu bir yolculuk başlamış oluyor.</p>
<p>Grubun yolda uğradığı saldırıda kahramanlık gösteren yavru uğur böceği, karıncaların güvenini kazanıyor ve aralarında bir dostluk kuruluyor. O andan itibaren şeker kutusunu karınca yuvasına götürme görevinde birlikte çalışıyorlar. Fakat o an, iki taraf da, şekerleri ele geçirmek için saldıracak olan ateş karıncalarından ve dolayısıyla bu iş birliğinden neler kazanacaklarından habersizdirler.</p>
<p>Sonunda karıncalar, şekerlerini korumayı başarırken, uğur böceği de yaşadığı kayıpların bir bir üstesinden geliyor.</p>
<p>Organizasyonun, disiplinin, dostluğun, dayanışmanın, cesaretin, sorumluluk almanın ve kayıplar acı verse de sahip olduklarımıza ve geleceğe odaklanmanın önemini anlatan bu güzel animasyon filmi, ailenizle birlikte keyifle izleyebilirsiniz.</p>
<p>Hatta belki de hayvanların aralarında kullandığı özel dili çözmeye çalışıp, birbirlerine ne söylediklerini tahmin ederek, filmi daha da eğlenceli hale getirebilirsiniz.</p>
<p><a href="https://www.facebook.com/TRTCocukCizgiFilm/videos/655020418259539/" rel="nofollow noopener" target="_blank">Filmin fragmanını izleyin.</a></p>
<p>İyi seyirler.</p>
</div>
</div>
<footer>
<div class='content-wrapper'>&#169;2019 Arlina Design</div>
</footer>
<script>
//<![CDATA[
;(function(document,window,index)
{'use strict';var elSelector='.header',elClassHidden='header--hidden',throttleTimeout=500,element=document.querySelector(elSelector);if(!element)return true;var dHeight=0,wHeight=0,wScrollCurrent=0,wScrollBefore=0,wScrollDiff=0,hasElementClass=function(element,className){return element.classList?element.classList.contains(className):new RegExp('(^| )'+className+'( |$)','gi').test(element.className);},addElementClass=function(element,className){element.classList?element.classList.add(className):element.className+=' '+className;},removeElementClass=function(element,className){element.classList?element.classList.remove(className):element.className=element.className.replace(new RegExp('(^|\\b)'+className.split(' ').join('|')+'(\\b|$)','gi'),' ');},throttle=function(delay,fn)
{var last,deferTimer;return function()
{var context=this,args=arguments,now=+new Date;if(last&&now<last+delay)
{clearTimeout(deferTimer);deferTimer=setTimeout(function(){last=now;fn.apply(context,args);},delay);}
else
{last=now;fn.apply(context,args);}};};window.addEventListener('scroll',throttle(throttleTimeout,function()
{dHeight=document.body.offsetHeight;wHeight=window.innerHeight;wScrollCurrent=window.pageYOffset;wScrollDiff=wScrollBefore-wScrollCurrent;if(wScrollCurrent<=0)
removeElementClass(element,elClassHidden);else if(wScrollDiff>0&&hasElementClass(element,elClassHidden))
removeElementClass(element,elClassHidden);else if(wScrollDiff<0)
{if(wScrollCurrent+wHeight>=dHeight&&hasElementClass(element,elClassHidden))
removeElementClass(element,elClassHidden);else
addElementClass(element,elClassHidden);}
wScrollBefore=wScrollCurrent;}));}(document,window,0));window.addEventListener("scroll",myFunction);function myFunction(){var winScroll=document.body.scrollTop||document.documentElement.scrollTop;var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;var scrolled=(winScroll / height)*100;document.getElementById("progressbar").style.width=scrolled+"%";}
//]]>
</script>
</body>
</html>

<!DOCTYPE html><html><head><meta charset='utf-8'/><meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/><title>Başlıksız Belge</title><style>body{background:#EAEAEA;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;padding-top:55px;}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.content-wrapper{width:100%;max-width:900px;margin:0 auto;padding:0;background:#fff;}.header{background:#033;padding:0;height:55px;line-height:55px;overflow:hidden;position:fixed;top:0;left:0;width:100%;z-index:999;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transition-property:-webkit-transform;transition-property:transform}.header--hidden{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}header .content-wrapper{background:0 0;padding:0 20px;}header h1{float:left;margin:0 40px 0 0;width:210px;color:#fff;height:55px;line-height:55px;}.topnav{float:left;width:calc(100% - 250px)}.topnav ul{background:#033;margin:0;padding:0;font-size:0}.topnav li{display:inline-block;margin:0;padding:0;}.topnav li a{font-size:16px;margin:0;padding:0 20px;height:55px;line-height:55px;display:block;text-align:center;text-decoration:none;color:#FFF}.topnav li a:hover{background:#666}.content{margin:0;padding:20px 20px 0;overflow:hidden;}.content h2{margin:0 0 20px;padding:0;font-size:28px;text-align:center;text-transform:capitalize;}.content p{margin:0 0 20px;padding:0;font-size:16px;}footer .content-wrapper{background:#666;color:#CCC;text-align:center;padding:10px 20px;font-size:90%;}.clear{display:block;clear:both;}.progress-container{width:100%;height:3px;background:#273f4a;position:fixed;top:0;left:0;z-index:9999}.progress-bar{height:3px;background:#FF5722;width:0%}</style>
 
 

Kodeks Editör

Javascript ile Kaydırma Göstergesi Oluşturma

"Javascript ile Kaydırma Göstergesi Oluşturma" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Javascript ile Kaydırma Göstergesi Oluşturma

"Javascript ile Kaydırma Göstergesi Oluşturma" 0 Yorum yapıldı.

Yorum Gönder