mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-30 03:30:09 +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 */
|
/* all elements that will behave like a page */
|
||||||
.cover, .page {
|
.page {
|
||||||
/* XXX make this browser-sized... */
|
/* XXX make this browser-sized... */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
@ -11,30 +11,72 @@
|
|||||||
* one way to go is to use a fixed page layout and scale things manually.
|
* one way to go is to use a fixed page layout and scale things manually.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
width: 400px;
|
width: 800px;
|
||||||
height: 300px;
|
height: 600px;
|
||||||
|
/* change to relative units... */
|
||||||
|
margin-top: -300px;
|
||||||
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
border: solid blue 1px;
|
.current.page {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* general layout */
|
/* general layout */
|
||||||
|
|
||||||
.magazine {
|
.viewer {
|
||||||
/* this makes the magazine behave like a ribbon */
|
/* this makes the magazine behave like a ribbon */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: visible;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 0px;
|
font-size: 0px;
|
||||||
|
|
||||||
background: gray;
|
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 {
|
.magazine > .cover {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|||||||
208
magazine.html
208
magazine.html
@ -5,6 +5,58 @@
|
|||||||
<script src="jquery.js"></script>
|
<script src="jquery.js"></script>
|
||||||
<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...
|
// XXX create magazine...
|
||||||
function createMagazine(){
|
function createMagazine(){
|
||||||
}
|
}
|
||||||
@ -23,89 +75,95 @@ function createPage(article, template){
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="magazine">
|
<div class="viewer">
|
||||||
<div class="cover">
|
<div class="scaler">
|
||||||
Magazine Cover
|
<div class="aligner">
|
||||||
</div>
|
<div class="magazine">
|
||||||
|
<div class="cover page current">
|
||||||
<!-- XXX do we need a Magazine Credits page??? -->
|
Magazine Cover
|
||||||
|
|
||||||
<div class="article">
|
|
||||||
<div class="cover">
|
|
||||||
Article Cover<br>
|
|
||||||
some more text...
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- XXX do we need an Article Credits page??? -->
|
<!-- XXX do we need a Magazine Credits page??? -->
|
||||||
|
|
||||||
<div class="page">
|
<div class="article">
|
||||||
Page
|
<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>
|
||||||
<div class="page">
|
<div class="article">
|
||||||
Page
|
<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>
|
||||||
<div class="page">
|
<div class="article">
|
||||||
Page
|
<div class="cover page">
|
||||||
</div>
|
Article Cover
|
||||||
</div>
|
</div>
|
||||||
<div class="article">
|
|
||||||
<div class="cover">
|
<div class="page">
|
||||||
Article Cover
|
Page
|
||||||
</div>
|
</div>
|
||||||
|
<div class="page">
|
||||||
<div class="page">
|
Page
|
||||||
Page
|
</div>
|
||||||
</div>
|
<div class="page">
|
||||||
<div class="page">
|
Page
|
||||||
Page
|
</div>
|
||||||
</div>
|
<div class="page">
|
||||||
<div class="page">
|
Page
|
||||||
Page
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page">
|
<div class="article">
|
||||||
Page
|
<div class="cover page">
|
||||||
</div>
|
Article Cover
|
||||||
<div class="page">
|
</div>
|
||||||
Page
|
|
||||||
</div>
|
<div class="page">
|
||||||
</div>
|
Page
|
||||||
<div class="article">
|
</div>
|
||||||
<div class="cover">
|
<div class="page">
|
||||||
Article Cover
|
Page
|
||||||
</div>
|
</div>
|
||||||
|
<div class="page">
|
||||||
<div class="page">
|
Page
|
||||||
Page
|
</div>
|
||||||
</div>
|
<div class="page">
|
||||||
<div class="page">
|
Page
|
||||||
Page
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user