Dünyada internete bağlanan cihazların önemli bir kısmı (%56 – 2021)mobil ve artık web siteleri öncelikli olarak mobil cihazlara göre tasarlanıyor.
Burada Fullpage.js, isimli JavaScript uygulamasını paylaşacağım, bu JavaScript kütüphanesi ile web sitelerinin sayfalarını tam ekran olarak kaydırılabilir hale getirmek gerçekten çok kolay. Bu sayede hem tüm mobil cihazlarda dokunarak, hem de masaüstü cihazlarda scroll ile tam ekran olarak kaydırılabilmesi mümkün oluyor, ziyaretçiler için çoğu uygulamalarda ve web sayfalarında kullanışlı.
Fullpage.js hakkında daha fazla bilgi ve web sitenize uygulamak için https://github.com/alvarotrigo/fullPage.js adresini inceleyebilirsiniz.
CDN olarak https://cdnjs.com/libraries/fullPage.js adresinde kullanılabilir.
Örnek uygulama:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Full Page Scrolling Using FullPage Js</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500&display=swap" rel="stylesheet">
<!--FullPage Js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.min.js" integrity="sha512-HqbDsHIJoZ36Csd7NMupWFxC7e7aX2qm213sX+hirN+yEx/eUNlZrTWPs1dUQDEW4fMVkerv1PfMohR1WdFFJQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.0/fullpage.css" integrity="sha512-hGBKkjAVJUXoImyDezOKpzuY4LS1eTvJ4HTC/pbxn47x5zNzGA1vi3vFQhhOehWLTNHdn+2Yqh/IRNPw/8JF/A==" crossorigin="anonymous"/>
<!--End FullPage Js-->
<style>
*{
padding: 0;
margin: 0px;
font-family: 'Josefin Sans', sans-serif;
}
h1{
color: #fff;
text-align: center;
font-size: 10vw;
}
div#fp-nav a span{
background: #fff !important;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="vertical-scrolling">
<h1>fullpage</h1>
</div>
<div class="vertical-scrolling"></div>
<div class="vertical-scrolling"></div>
<div class="vertical-scrolling"></div>
</div>
<script>
new fullpage("#fullpage",{
sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
sectionSelector: '.vertical-scrolling',
navigation: true,
parallax: true,
});
</script>
</body>
</html>Tam ekran örnek görmek için: https://alvarotrigo.com/fullPage/