mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-28 18:50:08 +00:00
done basic CSS layout, animations, navigation and zooming...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
a2ff1b94b0
commit
192b0ee5cd
56
magazine.css
56
magazine.css
@ -1,6 +1,6 @@
|
||||
|
||||
/* all elements that will behave like a page */
|
||||
.cover, .page {
|
||||
.page {
|
||||
/* XXX make this browser-sized... */
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
@ -11,30 +11,72 @@
|
||||
* one way to go is to use a fixed page layout and scale things manually.
|
||||
*/
|
||||
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
/* change to relative units... */
|
||||
margin-top: -300px;
|
||||
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
border: solid blue 1px;
|
||||
.current.page {
|
||||
}
|
||||
|
||||
|
||||
/* general layout */
|
||||
|
||||
.magazine {
|
||||
.viewer {
|
||||
/* this makes the magazine behave like a ribbon */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 0px;
|
||||
|
||||
background: gray;
|
||||
|
||||
border: solid blue 1px;
|
||||
}
|
||||
|
||||
.scaler {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.aligner {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.magazine {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
top: 50%;
|
||||
|
||||
/* change to relative units... */
|
||||
margin-left: -400px;
|
||||
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.magazine > .cover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
208
magazine.html
208
magazine.html
@ -5,6 +5,58 @@
|
||||
<script src="jquery.js"></script>
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.page').click(function(){
|
||||
var pages = $('.page')
|
||||
setCurrentPage(pages.index(this))
|
||||
})
|
||||
})
|
||||
|
||||
function setCurrentPage(n){
|
||||
var pages = $('.page')
|
||||
var cur = $(pages[n])
|
||||
|
||||
$('.current.page').removeClass('current')
|
||||
cur.addClass('current')
|
||||
|
||||
$('.magazine').css({left: -n*pages.width()})
|
||||
|
||||
return cur
|
||||
}
|
||||
|
||||
function nextPage(){
|
||||
var pages = $('.page')
|
||||
var cur = $('.current.page')
|
||||
return setCurrentPage(Math.min(pages.index(cur)+1, pages.length-1))
|
||||
}
|
||||
|
||||
function prevPage(){
|
||||
var pages = $('.page')
|
||||
var cur = $('.current.page')
|
||||
return setCurrentPage(Math.max(pages.index(cur)-1, 0))
|
||||
}
|
||||
|
||||
function setElementScale(elem, scale){
|
||||
return elem.css({
|
||||
'transform': 'scale('+scale+')',
|
||||
'-moz-transform': 'scale('+scale+')',
|
||||
'-o-transform': 'scale('+scale+')',
|
||||
'-ms-transform': 'scale('+scale+')',
|
||||
'-webkit-transform': 'scale('+scale+')',
|
||||
})
|
||||
}
|
||||
|
||||
function fitNPages(n){
|
||||
if(n==null){
|
||||
n = 1
|
||||
}
|
||||
var pages = $('.page')
|
||||
var scale = $('.viewer').width()/(pages.width()*n)
|
||||
|
||||
setElementScale($('.scaler'), scale)
|
||||
}
|
||||
|
||||
|
||||
// XXX create magazine...
|
||||
function createMagazine(){
|
||||
}
|
||||
@ -23,89 +75,95 @@ function createPage(article, template){
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="magazine">
|
||||
<div class="cover">
|
||||
Magazine Cover
|
||||
</div>
|
||||
|
||||
<!-- XXX do we need a Magazine Credits page??? -->
|
||||
|
||||
<div class="article">
|
||||
<div class="cover">
|
||||
Article Cover<br>
|
||||
some more text...
|
||||
<div class="viewer">
|
||||
<div class="scaler">
|
||||
<div class="aligner">
|
||||
<div class="magazine">
|
||||
<div class="cover page current">
|
||||
Magazine Cover
|
||||
</div>
|
||||
|
||||
<!-- XXX do we need an Article Credits page??? -->
|
||||
<!-- XXX do we need a Magazine Credits page??? -->
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
<div class="article">
|
||||
<div class="cover page">
|
||||
Article Cover<br>
|
||||
some more text...
|
||||
</div>
|
||||
|
||||
<!-- XXX do we need an Article Credits page??? -->
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
<div class="article">
|
||||
<div class="cover page">
|
||||
Article Cover
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
</div>
|
||||
<div class="article">
|
||||
<div class="cover">
|
||||
Article Cover
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
</div>
|
||||
<div class="article">
|
||||
<div class="cover">
|
||||
Article Cover
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
</div>
|
||||
<div class="article">
|
||||
<div class="cover">
|
||||
Article Cover
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
<div class="article">
|
||||
<div class="cover page">
|
||||
Article Cover
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
</div>
|
||||
<div class="article">
|
||||
<div class="cover page">
|
||||
Article Cover
|
||||
</div>
|
||||
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
<div class="page">
|
||||
Page
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user