Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updated the background texture due to many requests. Updated the arrows.

Organized the demo structure.
  • Loading branch information...
commit 60c0851c0b36a11e6c1b625dd656f40f1d587aee 1 parent 9cfebbd
Scott Tolksdorf authored
View
BIN  castle.jpg
Deleted file not rendered
View
0  Classy Skaught.jpg → demo/assets/Classy Skaught.jpg
File renamed without changes
View
0  LeagueGothic.otf → demo/assets/LeagueGothic.otf
File renamed without changes
View
0  arrowbottom.png → demo/assets/arrowbottom.png
File renamed without changes
View
BIN  demo/assets/arrowbottom2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  arrowleft.png → demo/assets/arrowleft.png
File renamed without changes
View
BIN  demo/assets/arrowleft2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  arrowright.png → demo/assets/arrowright.png
File renamed without changes
View
BIN  demo/assets/arrowright2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  arrowtop.png → demo/assets/arrowtop.png
File renamed without changes
View
BIN  demo/assets/arrowtop2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  brushed_alu.png → demo/assets/brushed_alu.png
File renamed without changes
View
0  dark_geometric.png → demo/assets/dark_geometric.png
File renamed without changes
View
BIN  demo/assets/dark_geometric2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  example.js → demo/examples.js
File renamed without changes
View
4 index.css → demo/index.css
@@ -3,7 +3,7 @@ body{
}
.background{
- background-image: url(dark_geometric.png);
+ background-image: url(assets/dark_geometric2.png);
}
.noanchor:link, .noanchor:visited, .noanchor:active {
@@ -25,7 +25,7 @@ body{
height:100%;
overflow-y: scroll;
overflow-x: hidden;
- background-image: url(brushed_alu.png);
+ background-image: url(assets/brushed_alu.png);
}
View
0  index.js → demo/index.js
File renamed without changes
View
0  jq.js → demo/libs/jq.js
File renamed without changes
View
4 xo.css → demo/libs/xo.css
@@ -3,7 +3,7 @@
body,p,ul,ol,dl,textarea,input {font-family: 'LeagueGothic'; font-size:25px;}
/* ----- FONTS ----- */
-@font-face { font-family: 'LeagueGothic'; src:url('LeagueGothic.otf'); }
+@font-face { font-family: 'LeagueGothic'; src:url('../assets/LeagueGothic.otf'); }
@font-face { font-family: 'Chunk'; src:url('fonts/Chunk.otf'); }
@font-face { font-family: 'Raleway'; src:url('fonts/Raleway.otf'); }
@font-face { font-family: 'Sniglet'; src:url('fonts/Sniglet.otf'); }
@@ -351,4 +351,4 @@ hr {
.border {border-width:5px;border-style:solid;}
.thinbdr {border-width:1px;border-style:solid;}
.thickbdr {border-width:10px;border-style:solid;}
-.dashed {border-style:dashed;}
+.dashed {border-style:dashed;}
View
129 index.html
@@ -1,33 +1,42 @@
<html>
<head>
- <script type="text/javascript" src="jq.js"></script>
- <link rel="Stylesheet" type="text/css" href="xo.css" />
+ <script type="text/javascript" src="demo/libs/jq.js"></script>
+ <link rel="Stylesheet" type="text/css" href="demo/libs/xo.css" />
<script type="text/javascript" src="parallax.js"></script>
- <script type="text/javascript" src="index.js"></script>
- <script type="text/javascript" src="example.js"></script>
- <link rel="Stylesheet" type="text/css" href="index.css" />
+ <script type="text/javascript" src="demo/index.js"></script>
+ <script type="text/javascript" src="demo/examples.js"></script>
+ <link rel="Stylesheet" type="text/css" href="demo/index.css" />
</head>
<body class="background">
<div class="container">
-
+
<div id="index" class="leaguegothic white page">
<div id="titlebox" class="f2 lghtgrey">
<div class="f5 white">Parallax.js</div>
The swankiest Javascript framework for elegantly sliding pages and parallaxing backgrounds. It'll make your monocle drop.
- <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=stolksdorf&repo=parallaxjs&type=fork&count=true&size=large"
+ <iframe src="http://ghbtns.com/github-btn.html?user=stolksdorf&repo=parallaxjs&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="155px" height="30px"></iframe>
+ <iframe src="http://ghbtns.com/github-btn.html?user=stolksdorf&repo=parallaxjs&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
+ <iframe src="http://ghbtns.com/github-btn.html?user=stolksdorf&repo=parallaxjs&type=follow&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="195px" height="30px"></iframe>
+
+
+
+
+ <!--
+ <iframe src="http://ghbtns.com/github-btn.html?user=stolksdorf&repo=parallaxjs&type=fork&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="120px" height="30px"></iframe> <span class="f1">Fork it, baby.</span>
+ -->
</div>
</div>
-
+
<div id="me" class="leaguegothic white page f2">
-
+
<div class="w960 center" style="margin-top:50px;">
-
- <div class="right"><img src="Classy Skaught.jpg" style="width:200px;"><br><span class="calibri f0">Me enjoying some fine chocolate milk.</span></div>
-
+
+ <div class="right"><img src="demo/assets/Classy Skaught.jpg" style="width:200px;"><br><span class="calibri f0">Me enjoying some fine chocolate milk.</span></div>
+
<h1>Hey, I'm Scott</h1>
I like to hit the keyboard and make nifty things.<br>
@@ -36,14 +45,14 @@
Contact: <span style="color:#AE0000">scott.tolksdorf@gmail.com</span>
</div>
</div>
-
+
<div id="sandbox" class="leaguegothic white page">
<a class="noanchor" href="https://github.com/stolksdorf/Parallaxjs"><div id="logo" class="f2">PARALLAX.JS</div></a>
-
+
<div class="f0 center w750 pad">
-
+
<div class="f3">Examples</div>
-
+
<div id="fromLast" class="clickable f1">Returns you to the last page you were on</div>
<div id="fromCurrent" class="clickable f1">Alert from the current page</div>
<div id="fromRight" class="clickable f1">From the right slow</div>
@@ -51,34 +60,34 @@
<div id="fromLeft" class="clickable f1">From the left with increased parallax</div>
<div id="fromBottom" class="clickable f1">From the bottom with an onload function</div>
- <pre id = "codebox" class="black">Hover to see code.
+ <pre id = "codebox" class="black">Hover to see code.
Click to see it in action!</pre>
-
+
</div>
-
+
</div>
-
+
<div id="boo" class="leaguegothic white page clickable">
<div class="center w400 " style="margin-top:20%;">
<div class="lh0" style="font-size:300px;">BOO!</div>
<div style="font-size:47px">Click anywhere to head back.</div>
</div>
</div>
-
+
<div id="features" class="leaguegothic white page">
<a class="noanchor" href="https://github.com/stolksdorf/Parallaxjs"><div id="logo" class="f2 left">PARALLAX.JS</div></a>
-
+
<div id="content" class="black whitebg calibri f0 center w750 pad">
<h1>What is Parallax.js?</h1>
<p>
- Parallax.js is a nifty Javascript framework that allows you to easily add sliding page trasitions and parallaxing backgrounds to any project. <br>
+ Parallax.js is a nifty Javascript framework that allows you to easily add sliding page trasitions and parallaxing backgrounds to any project. <br>
Very light weight, very cool. Just like fezes.
</p>
-
+
<h1>Adding Pages</h1>
- <p>
- Add accepts either a name and an element, or just an element.
- With the latter Parallax.js will try to use the element's Id as the name.
+ <p>
+ Add accepts either a name and an element, or just an element.
+ With the latter Parallax.js will try to use the element's Id as the name.
Pages can be accessed using their name as a property on the Parallax.js object.
<pre class="jscode">parallax.add("foo", $("#page1"))
.add($("#bar"));
@@ -91,29 +100,29 @@
<p>
To get a nifty parallaxing background, just set a jQuery element to be Parallax.js's background. <br>
For best results, make sure that the element's background image is a repeating image. <br>
- You can also control the scaling, or how much the background moves in relation to pages.
+ You can also control the scaling, or how much the background moves in relation to pages.
<pre class="jscode">parallax.background = $("body");
parallax.scaling = 0.4; //background moves 40% with the pages
</pre></p>
-
+
<h1>Speed and Easing</h1>
<p>
Some like it fast, some like it slow. Some like to swing and others like to get... umm linear? <br>
- Whatever you fancy, Parallax.js has you covered.
+ Whatever you fancy, Parallax.js has you covered.
<pre class="jscode">parallax.speed = 1200; //In milliseconds of course!
-parallax.easing = 'linear';
+parallax.easing = 'linear';
</pre></p>
<h1>Movement</h1>
<p>
The meat and potatoes. Invoking these will move that page in from that side.
<pre class="jscode">parallax.bar.left(); //Bar slides in from the left
-parallax.foo.top(); //bringing back foo from the top
+parallax.foo.top(); //bringing back foo from the top
parallax.bar.bottom(IAmBack()); //We got callbacks too ;)
-function IAmBack(){
+function IAmBack(){
alert("I'm back foo!");
}
</pre></p>
@@ -121,20 +130,20 @@
<h1>Show and Hide</h1>
<p>
Sometimes we don't need the fanciness. Show and hide simply bring pages to focus instantly, or hides them. <br>
-
- <pre class="jscode">//All pages start out hidden,
+
+ <pre class="jscode">//All pages start out hidden,
//remember to show your initial page!
-parallax.foo.show();
+parallax.foo.show();
parallax.bar.hide(); //Bar is being a tad shy
</pre></p>
<h1>Last and Current</h1>
<p>
- Parallax.js has two special pages that it fills in for you. You can use that just like regular pages.
-
-
- <pre class="jscode">parallax.bar.left()
+ Parallax.js has two special pages that it fills in for you. You can use that just like regular pages.
+
+
+ <pre class="jscode">parallax.bar.left()
parallax.current.ackbar(); //Bar thinks it's a trap!
parallax.foo.top();
@@ -153,29 +162,29 @@
parallax.bar.show(); //Also fires it, how cool!
//parallax itself has it's own preload and onload functions
-parallax.preload = function(){
- //these get run on -every- page,
+parallax.preload = function(){
+ //these get run on -every- page,
//in addition to the page's onload/preload functions
- alert("Super annoying alert");
+ alert("Super annoying alert");
};
</pre></p>
<h1>Protips!</h1>
<p>
- <pre class="jscode">//Remember parallax can be aliased!
+ <pre class="jscode">//Remember parallax can be aliased!
p = parallax;
//Using arrow key navigation is super cool
//most users find it very intuitive
$(document).keydown(function(e){
- if (e.keyCode == 37) { //this is the left key,
+ if (e.keyCode == 37) { //this is the left key,
p.bar.left();
}
}); //check out the code of this demo, it has arrow key navigation!
//For reference; 38 - top, 39 - right, 40 - bottom
-//Before using .last either check to see if it's null
+//Before using .last either check to see if it's null
if(typeof p.last === 'undefined'){
//handle it here
}
@@ -193,34 +202,34 @@
</pre></p>
</div>
-
-
+
+
</div>
-
+
</div>
-
-
+
+
<div id="leftControl" class="control">
- <img id="leftArrow" class="arrow left" style="width:60px" src="arrowleft.png"></img>
+ <img id="leftArrow" class="arrow left" style="width:60px" src="demo/assets/arrowleft2.png"></img>
<div id="leftText" class="dirText" style="float:right"> Test</div>
</div>
-
+
<div id="rightControl" class="control">
- <img id="rightArrow" class="arrow right" style="width:60px" src="arrowright.png"></img>
+ <img id="rightArrow" class="arrow right" style="width:60px" src="demo/assets/arrowright2.png"></img>
<div id="rightText" class="dirText" style="float:left"> Test</div>
</div>
-
+
<div id="topControl" class="control center" style="width:145px;left:45%;">
- <img id="topArrow" class="arrow left" style="height:60px" src="arrowtop.png"></img>
+ <img id="topArrow" class="arrow left" style="height:60px" src="demo/assets/arrowtop2.png"></img>
<div id="topText" class="dirText txtcenter" > Test</div>
</div>
-
+
<div id="bottomControl" class="control center" style="width:145px;left:45%;bottom:0px;">
<div id="bottomText" class="dirText txtcenter"> Test</div>
- <img id="bottomArrow" class="arrow left" style="height:60px" src="arrowbottom.png"></img>
-
+ <img id="bottomArrow" class="arrow left" style="height:60px" src="demo/assets/arrowbottom2.png"></img>
+
</div>
-
+
</body>
</html>
View
50 parallax.js
@@ -1,5 +1,5 @@
window.onload = function(){
- if (typeof jQuery === 'undefined') {
+ if (typeof jQuery === 'undefined') {
alert("ERROR: parallax.js requires jQuery.");
} else {
var updateparallax = function(){
@@ -11,32 +11,39 @@ window.onload = function(){
}
}
-var parallaxPage = function(name, htmlObject){
+var parallaxPage = function(name, pageHtml){
return{
key: name,
- page : htmlObject,
-
+ page : pageHtml,
right : function(callback){return this.transition({left:parallax.width,top:0} ,{left:-parallax.width,top:0} ,callback);},
left : function(callback){return this.transition({left:-parallax.width,top:0} ,{left:parallax.width,top:0} ,callback);},
top : function(callback){return this.transition({left:0,top:-parallax.height},{left:0,top:parallax.height} ,callback);},
bottom : function(callback){return this.transition({left:0,top:parallax.height} ,{left:0,top:-parallax.height},callback);},
-
+
transition : function(locationNew, locationOld, callback){
if(!parallax.sliding){
parallax.sliding = true;
var thisPage = this;
if(parallax.current !== this){
this.hide(locationNew);
- if(typeof parallax.preload === 'function'){ parallax.preload(); }
- if(typeof this.preload === 'function'){ this.preload(); }
+ if(typeof parallax.preload === 'function'){
+ parallax.preload();
+ }
+ if(typeof this.preload === 'function'){
+ this.preload();
+ }
this.slide({left:0,top:0}, function(){
thisPage.makeCurrent();
- if(typeof callback === 'function'){ callback(); }
+ if(typeof callback === 'function'){
+ callback();
+ }
});
if(typeof parallax.current !== 'undefined'){
parallax.current.slide(
- locationOld,
- function(){parallax.sliding = false;}
+ locationOld,
+ function(){
+ parallax.sliding = false;
+ }
);
}
parallax.slideBackground(locationNew);
@@ -44,21 +51,21 @@ var parallaxPage = function(name, htmlObject){
}
return this;
},
-
+
slide : function(css, callback){
this.page.css("display", "block");
this.page.stop().animate(css, parallax.speed, parallax.easing,
function(){if(typeof callback === "function"){callback();}
});
},
-
+
hide : function(newLocation){
newLocation = newLocation || {left:parallax.width,top:0}; //defaults left off screen
this.page.css("display", "none");
this.page.css(newLocation);
return this;
},
-
+
show : function(newLocation){
newLocation = newLocation || {left:0,top:0}; //defaults on screen
if(typeof parallax.current !== 'undefined'){
@@ -69,7 +76,7 @@ var parallaxPage = function(name, htmlObject){
this.page.css(newLocation);
return this;
},
-
+
makeCurrent : function(){
if(this === parallax.current){
return false;
@@ -85,20 +92,19 @@ var parallaxPage = function(name, htmlObject){
}
return true;
},
-
+
updateUrl : function(){
var url = document.URL;
url = (url.lastIndexOf("#") === -1)? url : url.substring(0, url.lastIndexOf("#"));
window.location.href = url + "#" + this.key;
},
-
+
ackbar : function(){ alert(this.key + " thinks it's a trap!"); return this;},
};
};
var parallax = {
-
speed : 800,
easing : 'swing',
sliding : false,
@@ -119,12 +125,12 @@ var parallax = {
check = false;
alert("ERROR:undefined key");
}
-
+
if(typeof object !== 'object'){
check = false;
alert("ERROR:undefined page");
}
-
+
if(check){
validKeyName = true;
for(propName in this){
@@ -145,7 +151,7 @@ var parallax = {
}
return this;
},
-
+
fromUrl : function(){
var temp = document.URL.lastIndexOf("#")
if(temp !== -1){
@@ -155,7 +161,7 @@ var parallax = {
}
}
},
-
+
slideBackground : function(newLocation){
if(typeof this.background !== 'undefined' && typeof newLocation !== 'undefined'){
$(this.background).animate({
@@ -164,4 +170,4 @@ var parallax = {
}, parallax.speed, parallax.easing);
}
},
-};
+};
Please sign in to comment.
Something went wrong with that request. Please try again.