Evet, turn.js kütüphanesi kullanarak <div id="flipbook"> içerisindeki içerikleri sayfalara bölerek sayfalar arasında geçiş yapmanıza olanak tanır. Aşağıda size verdiğiniz örnekteki gibi bir kod örneği bulunmaktadır:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="turn.js"></script>
<style>
#flipbook {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="flipbook">
<div class="hard">Turn.js</div>
<div class="hard"></div>
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
</body>
</html>Bu kodda, öncelikle jQuery kütüphanesi ve turn.js kütüphanesi eklenmiştir. Daha sonra, #flipbook ID'sine sahip bir div oluşturulmuş ve içine sayfalar oluşturuldu. En son olarak, oluşturulan div için turn() fonksiyonu çağrılmış ve bazı özellikler (genişlik, yükseklik, otomatik merkezleme vb.) tanımlanmıştır.
Not: burada vermiş olduğunuz link çalışmıyor , eğer kullanmak isterseniz turnjs dökümanlarına veya npm üzerinden güncel sürümleri indirebilirsiniz
-
Kod indir.
Script etiketi ile html sayfana ekle.
Download:
http://turnjs.com/confirm-download/5...55/turnjs4.zip
Daha sonra verdiğim kodları koy. sonrası istediğin resimleri ve yazıları entegre et.
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({ width: 400, height: 300, autoCenter: true
});
</script>