Skip to content

Instantly share code, notes, and snippets.

@chuck0523

chuck0523/veloTrial4.html

Created June 13, 2015 03:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chuck0523/5143215f3bce8c490047 to your computer and use it in GitHub Desktop.
Save chuck0523/5143215f3bce8c490047 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
veloTrial4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Velocityを使ってみる</title>
</head>
<style>
img{position:fixed;width:400px;z-index: 3;}
div {position:fixed;width:400px;opacity: 0.7;}
#veloBase1 {
background-color: #599;
}
#veloBase2 {
background-color: #933;
}
#veloBase3 {
background-color: #595;
}
#veloBase4 {
background-color: #339;
}
#veloBase5 {
background-color: #939;
}
</style>
<body>
<img id='veloTop' src="cat.jpg"></div>
<div id='veloBase5'></div>
<div id='veloBase4'></div>
<div id='veloBase3'></div>
<div id='veloBase2'></div>
<div id='veloBase1'></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="velocity.js"></script>
<script type="text/javascript" src="velocity-ui.min.js"></script>
<script type="text/javascript">
$('div').height($('#veloTop').height());
var rotate = {rotateZ:'-=360deg',translateX:'+=500px',translateY:'+=250px'}
$('#veloTop').click(function(){
$('#veloTop').velocity(rotate,{
duration:1500,
easing:'ease',
delay:200,
display:'none'
});
for(var i = 1; i<=5;i++){
$('#veloBase'+i).velocity(rotate,{
duration:1500,
easing:'ease-out',
delay:200+50*i,
display:'none'
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment