Currently, I am playing around a little bit with a new code editor called
Brackets, which seems pretty cool. Maybe I will write something about it in the near future. Here I like to talk about the mini-project I chose to get familar with Brackets. I am developing a tiny jQuery extension/plugin/whatever for simple parallax scrolling. "Wow!", you say now, "Isn't there a bunch of them already out there? Why are you reinventing the wheel?" Yeah, you're right. But I am thinking about the oldschool parallax scrolling used in the 80th and early 90th in games, like Turrican, Shadow of Beast, Mario Bros., etc. That hippie pippie new school parallax is trendy, ... and others have done it already. I simply developed that toy mainly for training purposes, and people who are interested in it.
Here is a scratch, on how to use it.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PARALLAX SCROLLER</title>
<meta name="description" content="Testbed for parallax scroller development.">
<link rel="stylesheet" href="css/parallax-demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="application/javascript"> </script>
<script src="../trunk/js/jquery.parallax.min.js" type="text/javascript"> </script>
<script type="application/javascript">
function sinEaseFunc(elapsedSeconds, step){
return Math.sin(elapsedSeconds/10)*step;
}
function cosEaseFunc(elapsedSeconds, step){
return Math.cos(elapsedSeconds/10)*step;
}
$(function() {
$(".scrollerNew").parallax([
{ xf : sinEaseFunc , yf : cosEaseFunc }
]);
});
</script>
</head>
<body>
<div class="content">Content</div>
<ul class="scrollerNew" data-fps='25'>
<li data-img='img/tex5.jpg' data-width='549px' data-height='168px' data-xi='150' data-yi='150' data-repeat="repeat"></li>
<li data-img='img/tex3.png' data-width='549px' data-height='168px' data-xi='12' data-yi='4' data-repeat="repeat"></li>
<li data-img='img/texttex.png' data-width='549px' data-height='168px' data-yi='-10' data-repeat="repeat-y"></li>
<li data-img='img/aufgerissen.png' data-width='549px' data-height='168px' data-repeat="no-repeat"></li>
</ul>
</body>
</html>
As you may imagine, there are some interesting features for this scroller. It is/has
- Easy to use
- Time based animation, with configurable "Frames per second"
- Highly customizable
- Even non-linear translation possible
Currently, it is in an unstable development phase. But it is already worth to announce its existance. If you are interested feel free to try it. It is available at
code.goggle. I plan to pimp this blog with that scroller.
No comments:
Post a Comment