Permalink
Browse files

Scroll top animation

  • Loading branch information...
1 parent 7127f2a commit f8fe9b9b723d6287b603899bb347108693d3239f Łukasz Staliś committed Aug 10, 2012
Showing with 41 additions and 13 deletions.
  1. +1 −0 list.html
  2. +25 −9 scripts/list.js
  3. +8 −0 scripts/shifty.js
  4. +7 −4 styles/list.css
View
@@ -31,6 +31,7 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="styles/fonts.css" type="text/css" media="all" rel="stylesheet">
<link href="styles/list.css" type="text/css" media="all" rel="stylesheet">
+ <script src="scripts/shifty.js" type="text/javascript"></script>
<script src="scripts/list.js" type="text/javascript"></script>
</head>
<body id="list">
View
@@ -8,7 +8,7 @@ var Categories = function(instance){
for(var l = 0;l<linksLength;l++){
if(links[l].getAttribute('data-id')==0){
all = links[l];
- all.addEventListener('click',function(e){
+ all.addEventListener('mousedown',function(e){
e.preventDefault();
@@ -23,7 +23,7 @@ var Categories = function(instance){
},false);
} else {
swap.push(links[l]);
- links[l].addEventListener('click',function(e){
+ links[l].addEventListener('mousedown',function(e){
var select = !this.classList.contains('selected');
@@ -401,20 +401,36 @@ var Pagination = function(instance,onChange){
};
+ var tween = new Tweenable();
+
instance.addEventListener('click',function(e){
var link = e.target;
- if(link.tagName.toLowerCase()!='span'&&!link.classList.contains('current')&&!link.classList.contains('sep'))return;
-
- if(e.target.classList.contains('page'))self.refresh(parseInt(e.target.textContent),self.total);
- else if(e.target.classList.contains('next'))self.refresh(self.current+1,self.total);
- else if(e.target.classList.contains('prev'))self.refresh(self.current-1,self.total);
+ if(link.tagName.toLowerCase()!='span'||link.classList.contains('current')||link.classList.contains('sep'))return;
+
+ e.preventDefault();
- document.documentElement.scrollTop = 0;
+ var element = e.target;
+
+ tween.tween({
+ from: { top: document.documentElement.scrollTop },
+ to: { top: 0 },
+ duration: 800,
+ fps: 24,
+ easing: 'swingTo',
+ step: function () {
+ document.documentElement.scrollTop = this.top;
+ },
+ callback: function(){
+ if(element.classList.contains('page'))self.refresh(parseInt(element.textContent),self.total);
+ else if(element.classList.contains('next'))self.refresh(self.current+1,self.total);
+ else if(element.classList.contains('prev'))self.refresh(self.current-1,self.total);
+ }
+ });
- e.preventDefault();
},false);
+
};
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -2,6 +2,7 @@ html{
height: 100%;
margin: 0;
padding: 0;
+ min-height: 100%;
}
body{
font-family: OpenSansRegular, Arial, sans-serif;
@@ -70,7 +71,7 @@ a:hover{
}
#header{
background: transparent url(../images/header_bg.jpg) repeat-x 50% 100%;
- padding: 50px 0;
+ padding: 40px 0 50px 0;
width: 100%;
overflow: hidden;
}
@@ -106,7 +107,7 @@ a:hover{
text-indent: -9999px;
}
#top{
- width: 730px;
+ width: 800px;
}
#top dl{
margin: 0 auto;
@@ -160,17 +161,18 @@ a:hover{
background-position: 0 -86px;
}
#summary{
+ padding: 30px 0 0 35px;
display: none;
- padding-top: 30px;
}
#top.open #summary{
display: block;
}
#summary .col{
float: left;
- width: 220px;
+ width: 230px;
}
#summary .colR{
+ float: left;
width: 290px;
}
#summary span{
@@ -230,6 +232,7 @@ a:hover{
color: #948670;
margin: 0;
width: 30px;
+ cursor: default;
}
.pagination span.prev{
position: relative;

0 comments on commit f8fe9b9

Please sign in to comment.