Skip to content

Instantly share code, notes, and snippets.

@jsolid

jsolid/moving-fonts.html

Created September 21, 2012 01:35
Show Gist options
  • Save jsolid/3759311 to your computer and use it in GitHub Desktop.
Save jsolid/3759311 to your computer and use it in GitHub Desktop.
Download ZIP
Move fonts in parallax effect
Raw
moving-fonts.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Fonts</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="plax.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
position: relative;
}
div#shell {
display: block;
position: relative;
margin: 100px auto;
z-index: 1;
font-weight: bold;
font-size: 35px;
overflow: auto;
width: 500px;
height: 500px;
}
div.char {
float:left;
text-shadow: 3px 3px 3px #aaa;
}
div#char-j {
position: absolute;
top: 60px;
left: 80px;
}
div#char-u {
position: absolute;
top:55px;
left: 100px;
}
div#char-s {
position: absolute;
top: 60px;
left: 120px;
}
div#char-t {
position: absolute;
top: 56px;
left: 140px;
}
div#char-i {
position: absolute;
top: 65px;
left: 160px;
}
div#char-n {
position: absolute;
top: 57px;
left: 174px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$.plax.enable();
$('#char-j').plaxify({xRange:20, yRange:20});
$('#char-u').plaxify({xRange:25, yRange:25, invert:true});
$('#char-s').plaxify({xRange:10, yRange:15});
$('#char-t').plaxify({xRange:18, yRange:18, invert:true});
$('#char-i').plaxify({xRange:20, yRange:20});
$('#char-n').plaxify({xRange:18, yRange:20, invert:true});
});
</script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment