samuel-philipp.de/index-v2.html

74 lines
2.4 KiB
HTML
Raw Normal View History

2018-10-02 21:21:04 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Samuel Philipp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="img/samuel.png">
<link rel="stylesheet" href="css/app.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/vendor/jquery-2.2.4.min.js"></script>
<!--<script type="text/javascript" src="js/vendor/jquery.easing.min.js"></script>-->
<!--<script type="text/javascript" src="js/vendor/jquery.flip.min.js"></script>-->
<!--<script type="text/javascript" src="js/app.js"></script>-->
<style type="text/css">
body {
padding: 0;
margin: 0;
}
2018-10-03 19:49:31 +00:00
.image {
background-repeat: no-repeat;
background-position: center center;
/*background-attachment: fixed;*/
background-size: cover;
2018-10-02 21:21:04 +00:00
position: fixed;
2018-10-03 19:49:31 +00:00
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
2018-10-02 21:21:04 +00:00
z-index: 0;
2018-10-03 19:49:31 +00:00
}
#top-image {
background-image: url('img/sp-codes.png');
2018-10-02 21:21:04 +00:00
}
#topper-image {
2018-10-03 19:49:31 +00:00
background-image: url('img/samuel-philipp_v2-overlay.png');
2018-10-02 21:21:04 +00:00
}
</style>
<script type="application/javascript">
2018-10-03 19:49:31 +00:00
$(document).ready(function () {
2018-10-02 21:21:04 +00:00
var mouseX, mouseY;
2018-10-03 19:49:31 +00:00
var ww = $(window).width();
var wh = $(window).height();
var traX, traY, traX2, traY2;
$(document).mousemove(function (e) {
2018-10-02 21:21:04 +00:00
mouseX = e.pageX;
mouseY = e.pageY;
2018-10-03 19:49:31 +00:00
traX = (((50 * mouseX) / ww)) - 50;
traY = (((50 * mouseY) / wh)) - 50;
traX2 = (50 + traX) * -1;
traY2 = (50 + traY) * -1;
2018-10-02 21:21:04 +00:00
console.log(traX);
$('#topper-image').css({
2018-10-03 19:49:31 +00:00
"left": traX + "px",
"top": traY + "px"
});
$('#top-image').css({
"left": traX2 + "px",
"top": traY2 + "px"
2018-10-02 21:21:04 +00:00
});
});
});
</script>
</head>
<body>
2018-10-03 19:49:31 +00:00
<div id="top-image" class="image"></div>
<div id="topper-image" class="image"></div>
2018-10-02 21:21:04 +00:00
</body>
</html>