シングルページで紙芝居のような画面遷移をさせる方法
シングルページで紙芝居のような画面遷移をさせる方法:
シングルページで紙芝居のような画面遷移するWebサイトを作成しようと思った時にちょっと行き詰まったので、解決方法を備忘録として説明します。
frame要素が1ページのみを表示するための枠になっており、overflow: hidden;を適用することでユーザーがスクロールで他のページへ移動できないようにしています。
animationを使うことで、画面をクリックした際にページが遷移するようになっています。
-------✂︎----------------------------✂︎--------------
ご指摘などあれば↓までご連絡ください。
@yokuneru
紙芝居のような画面遷移をさせる
シングルページで紙芝居のような画面遷移するWebサイトを作成しようと思った時にちょっと行き詰まったので、解決方法を備忘録として説明します。
仕上がりイメージ
完成コード
<style>
body {
margin: 0;
}
.frame {
overflow: hidden;
}
.page {
border: 1px solid gray;
}
.page1 {
background: rgb(240, 190, 190);
}
.page2 {
background: rgb(240, 210, 210);
}
.page3 {
background: rgb(240, 230, 230);
}
</style>
<body>
<div class="frame">
<div class="page page1">page1</div>
<div class="page page2">page2</div>
<div class="page page3">page3</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
//ページの高さをwindowサイズに合わせる
$(".frame, .page").css("height", $(window).height());
var page = 0;
var pages = $(".page").get();
var target = 0;
$(document).click(function(){
if(page < pages.length - 1){
page += 1;
target += $(pages[page]).offset().top;
}else {
page = 0;
target = 0;
}
$(".frame").animate({scrollTop:target}, 400, "swing");
});
});
</script>
</body>
ちょっと補足
.frame {
overflow: hidden;
}
animationを使うことで、画面をクリックした際にページが遷移するようになっています。
-------✂︎----------------------------✂︎--------------
ご指摘などあれば↓までご連絡ください。
@yokuneru
コメント
コメントを投稿