samuel-p/samuel-philipp.de
samuel-p/samuel-philipp.de
1
0
Fork 0
Code Issues Pull requests 8 Releases Activity Actions

updated v2 test version

Browse source
This commit is contained in:
Samuel Philipp 2018-10-03 21:49:31 +02:00
parent 3fd2c8a84f
commit 55f2cfbabe
1 changed files with 31 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
index-v2.html
View file

@ -19,64 +19,56 @@
margin: 0; margin: 0;
} }
#top-image { .image {
background: url('img/sp-codes.png') no-repeat center center fixed; background-repeat: no-repeat;
background-position: center center;
/*background-attachment: fixed;*/
background-size: cover;
position: fixed; position: fixed;
top: 0; top: -25px;
width: 100%; left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
z-index: 0; z-index: 0;
height: 100%; }
background-size: calc(100% + 50px);
#top-image {
background-image: url('img/sp-codes.png');
} }
#topper-image { #topper-image {
background: url('img/samuel-philipp_v2-overlay.png') no-repeat center center fixed; background-image: url('img/samuel-philipp_v2-overlay.png');
position: fixed;
top: 0;
width: 100%;
z-index: 0;
height: 100%;
background-size: calc(100% + 50px);
} }
</style> </style>
<script type="application/javascript"> <script type="application/javascript">
// $(document).ready(function () { $(document).ready(function () {
// var movementStrength = 25;
// var height = movementStrength / $(window).height();
// var width = movementStrength / $(window).width();
// $("#topper-image").mousemove(function (e) {
// var pageX = e.pageX - ($(window).width() / 2);
// var pageY = e.pageY - ($(window).height() / 2);
// var newvalueX = width * pageX * -1 - 25;
// var newvalueY = height * pageY * -1 - 50;
// var newvalueX2 = width * pageX - 25;
// var newvalueY2 = height * pageY - 50;
// $('#top-image').css("background-position", newvalueX2 + "px " + newvalueY2 + "px");
// $('#topper-image').css("background-position", newvalueX + "px " + newvalueY + "px");
// });
// });
$(document).ready(function(){
var mouseX, mouseY; var mouseX, mouseY;
var ww = $( window ).width(); var ww = $(window).width();
var wh = $( window ).height(); var wh = $(window).height();
var traX, traY; var traX, traY, traX2, traY2;
$(document).mousemove(function(e){ $(document).mousemove(function (e) {
mouseX = e.pageX; mouseX = e.pageX;
mouseY = e.pageY; mouseY = e.pageY;
traX = ((4 * mouseX) / ww) + 40; traX = (((50 * mouseX) / ww)) - 50;
traY = ((4 * mouseY) / wh) + 50; traY = (((50 * mouseY) / wh)) - 50;
traX2 = (50 + traX) * -1;
traY2 = (50 + traY) * -1;
console.log(traX); console.log(traX);
$('#topper-image').css({ $('#topper-image').css({
"left": -traX + "%", "left": traX + "px",
"top": -traY + "%" "top": traY + "px"
});
$('#top-image').css({
"left": traX2 + "px",
"top": traY2 + "px"
}); });
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="top-image"></div> <div id="top-image" class="image"></div>
<div id="topper-image"></div> <div id="topper-image" class="image"></div>
</body> </body>
</html> </html>