Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: bd5fb47ff0
Fetching contributors…

Cannot retrieve contributors at this time

154 lines (140 sloc) 2.736 kb
<!DOCTYPE html>
<html lang="pl"><head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/reset.css" type="text/css" />
<link rel="stylesheet" href="../css/backlink.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.backstretch.min.js"></script>
<title>
awesome animation - jQuery in 30 days
</title>
<style>
h1 {
padding: 30px 0 50px 0;
text-align: center;
font: 28px Helvetica, Arial, sans-serif;
text-shadow: #888 0 1px;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin: -50px auto auto -240px;
cursor: pointer;
}
p {
background: green;
width: 100px;
}
</style>
</head><body>
<div class="container">
<h1>
Awesome Animation
</h1>
<div class="content">
<img src="lovehate1.png" class="t1">
<img src="lovehate2.png" class="t2">
<img src="lovehate3.png" class="t3">
<img src="lovehate4.png" class="t4">
<img src="lovehate.png" class="t">
</div>
</div>
<script>
(function() {
var $this = $(this),
trigger = $('img');
$('img').css({
'left': $(window).width() / 2 - $('img').width() / 2 + 'px',
'top': $(window).height() / 2 - $('img').height() / 2 + 'px'
});
$.fn.awesome1 = function(speed) {
return $(this)
.animate({
'left': '+=20'
}, speed)
.animate({
'top': '+=20'
}, speed)
.animate({
'left': '-=20'
}, speed)
.animate({
'top': '-=20'
}, speed)
};
$.fn.awesome2 = function(speed) {
return $(this)
.animate({
'top': '+=20'
}, speed)
.animate({
'left': '+=20'
}, speed)
.animate({
'top': '-=20'
}, speed)
.animate({
'left': '-=20'
}, speed)
};
$.fn.awesome3 = function(speed) {
return $(this)
.animate({
'top': '-=20'
}, speed)
.animate({
'left': '-=20'
}, speed)
.animate({
'top': '+=20'
}, speed)
.animate({
'left': '+=20'
}, speed)
};
$.fn.awesome4 = function(speed) {
return $(this)
.animate({
'left': '-=20'
}, speed)
.animate({
'top': '-=20'
}, speed)
.animate({
'left': '+=20'
}, speed)
.animate({
'top': '+=20'
}, speed)
};
$.fn.outandback = function() {
return $(this)
.animate({
'opacity': '0'
}, 100)
.delay(600)
.animate({
'opacity': '100'
}, 100)
};
trigger.on('click', function() {
$('.t1').awesome1(200);
$('.t2').awesome2(200);
$('.t3').awesome3(200);
$('.t4').awesome4(200);
$('.t').outandback();
});
})();
</script>
<script>
$.backstretch("ride.jpg");
</script>
<ul class="backlink">
<li>
<a href="../index.html" class="back">
&laquo; Back to list of projects
</a>
</li>
<ul>
</body></html>
Jump to Line
Something went wrong with that request. Please try again.