Skip to content

Instantly share code, notes, and snippets.

@fsubal

fsubal/index.html

Last active August 29, 2015 14:02
Show Gist options
  • Save fsubal/f5da6adfbf9dcd7c9034 to your computer and use it in GitHub Desktop.
Save fsubal/f5da6adfbf9dcd7c9034 to your computer and use it in GitHub Desktop.
Download ZIP
Parallax Manga Viewer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Parallax Manga Viewer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="mangaviewer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="general" class="info_bg"><div id="general_content">Title<br />Author<br />Created at：YYYY:MM:DD</div></div>
<div class="spread" id="spread_1">
<div class="right" id="page_1">
</div>
<div class="left" id="page_2">
</div>
</div>
<div class="spread" id="spread_2">
<div class="right" id="page_3">
</div>
<div class="left" id="page_4">
</div>
</div>
<div class="spread" id="spread_3">
<div class="right" id="page_5">
</div>
<div class="left" id="page_6">
</div>
</div>
<div id="page_counter" class="info_bg"><div id="page_counter_content">1 / 6</div>
</body>
</html>
Raw
mangaviewer.js
$(function(){
var x = 0;
var page_width = 480;
$("#page_1").css("left", "480px");
$("#page_2").css("left", "0px");
$("#page_3").css("left", "-480px");
$("#page_4").css("left", "-960px");
$("#page_5").css("left", "-480px");
$("#page_6").css("left", "-960px");
var dy = 0;
$(window).scroll(function(){
dy = $(this).scrollTop();
if(dy > page_width * 6){
$("#page_5").css("left", "480px");
$("#page_6").css("left", "0px");
}else if(dy > page_width * 4){
$("#page_5").css("left", dy - page_width * 5 +"px");
$("#page_6").css("left", dy - page_width * 6 +"px");
$("#page_3").css("left", "480px");
$("#page_4").css("left", "0px");
if(dy > page_width * 5){
$("#page_counter_content").text("6 / 6");
}else{
$("#page_counter_content").text("5 / 6");
}
}if(dy > page_width * 3){
$("#page_3").css("left", "480px");
$("#page_4").css("left", "0px");
}else if(dy > page_width * 1) {
$("#page_3").css("left", dy - page_width * 2 +"px");
$("#page_4").css("left", dy - page_width * 3 +"px");
$("#page_1").css("left", "480px");
$("#page_2").css("left", "0px");
if(dy > page_width * 2){
$("#page_counter_content").text("4 / 6");
}else{
$("#page_counter_content").text("3 / 6");
}
}else{
$("#page_1").css("left", "480px");
$("#page_2").css("left", "0px");
$("#page_3").css("left", "-480px");
$("#page_4").css("left", "-960px");
$("#page_5").css("left", "-480px");
$("#page_6").css("left", "-960px");
if(dy > page_width * 0){
$("#page_counter_content").text("2 / 6");
}else{
$("#page_counter_content").text("1 / 6");
}
}
});
});
Raw
style.css
/* General Rayouts */
html{
background: #fff;
font-family: "Verdana", "Lucida Grande", "ヒラギノ角ゴ Pro", "メイリオ";
color: #333;
height: 4000px;
}
.spread div{
width: 480px;
height: 679px;
position: fixed;
box-shadow: 1px 1px 3px #333;
}
.info_bg{
background-color: rgba(48,48,48,0.5);;
padding: 10px;
border-radius: 10px;
position: fixed;
text-align: right;
}
#general{
right: 20px;
top: 20px;
z-index: 100;
}
#page_counter{
right: 20px;
bottom: 20px;
}
#page_counter_content, #general_content{
color: #fff;
text-shadow: 1px 1px 3px #333;
}
/* End General Rayouts */
/* Page Contents */
#page_1{
background: url("img/02.jpg");
background-size: contain;
}
#page_2{
background: url("img/03.jpg");
background-size: contain;
}
#page_3{
background: url("img/04.jpg");
background-size: contain;
}
#page_4{
background: url("img/05.jpg");
background-size: contain;
}
#page_5{
background: url("img/06.jpg");
background-size: contain;
}
#page_6{
background: url("img/07.jpg");
background-size: contain;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment