Clash Royale CLAN TAG#URR8PPP

full Background image Mouse Move Coverage

I have a small script to tilt the background image when mouse is moving. I have tried 3 different images and no matter what size they are there is a white gap when the image moves.

the background image follows the mouse without issue. is just shows white gaps , I have tried setting the image in every what to no avail.

$(function()
// Init
var container = document.getElementById("container"),
inner = document.getElementById("inner");
// Mouse
var mouse =
_x: 0,
_y: 0,
x: 0,
y: 0,
updatePosition: function(event) ,
setOrigin: function(e)
this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
,
show: function()
return "(" + this.x + ", " + this.y + ")";

;
// Track the mouse position relative to the center of the container.
mouse.setOrigin(container);
//-----------------------------------------
var counter = 0;
var updateRate = 10;
var isTimeToUpdate = function()
return counter++ % updateRate === 0;
;
//-----------------------------------------
var onMouseEnterHandler = function(event)
update(event);
;
var onMouseLeaveHandler = function()
inner.style = "";
;
var onMouseMoveHandler = function(event)
if (isTimeToUpdate())
update(event);

;
//-----------------------------------------
var update = function(event)
mouse.updatePosition(event);
updateTransformStyle(
(mouse.y / inner.offsetHeight / 2).toFixed(2),
(mouse.x / inner.offsetWidth / 2).toFixed(2)
);
;
var updateTransformStyle = function(x, y)
var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
inner.style.transform = style;
inner.style.webkitTransform = style;
inner.style.mozTransform = style;
inner.style.msTransform = style;
inner.style.oTransform = style;
;
//-----------------------------------------
container.onmouseenter = onMouseEnterHandler;
container.onmouseleave = onMouseLeaveHandler;
container.onmousemove = onMouseMoveHandler;
);

body
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
font-size: 14px;
line-height: 20px;



.container
position: relative;
overflow: hidden;
-webkit-perspective: 50px;
perspective: 50px;



.inner
position: static;
display: block;
width: 100%;
height: 100vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="container">
<div id="inner" class="inner"></div>
</div>

$(function()

)

(function(

)

)(

)

$(function()

)

margin: 0;

body

<div>

2 Answers
2

Your code updated from @Xufox's comments:

$(function()
// Init
var container = document.getElementById("container"),
inner = document.getElementById("inner");
// Mouse
var mouse =
_x: 0,
_y: 0,
x: 0,
y: 0,
updatePosition: function(event) ,
setOrigin: function(e)
this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
,
show: function()
return "(" + this.x + ", " + this.y + ")";

;
// Track the mouse position relative to the center of the container.
mouse.setOrigin(container);
//-----------------------------------------
var counter = 0;
var updateRate = 10;
var isTimeToUpdate = function()
return counter++ % updateRate === 0;
;
//-----------------------------------------
var onMouseEnterHandler = function(event)
update(event);
;
var onMouseLeaveHandler = function()
inner.style = "";
;
var onMouseMoveHandler = function(event)
if (isTimeToUpdate())
update(event);

;
//-----------------------------------------
var update = function(event)
mouse.updatePosition(event);
updateTransformStyle(
(mouse.y / inner.offsetHeight / 2).toFixed(2),
(mouse.x / inner.offsetWidth / 2).toFixed(2)
);
;
var updateTransformStyle = function(x, y)
var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
inner.style.transform = style;
inner.style.webkitTransform = style;
inner.style.mozTransform = style;
inner.style.msTransform = style;
inner.style.oTransform = style;
;
//-----------------------------------------
container.onmouseenter = onMouseEnterHandler;
container.onmouseleave = onMouseLeaveHandler;
container.onmousemove = onMouseMoveHandler;
);

html, body margin:0 ;padding:0

body
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
font-size: 14px;
line-height: 20px;



.container
position: relative;
overflow: hidden;
-webkit-perspective: 50px;
perspective: 50px;



.inner
position: static;
display: block;

width: 120vw;
height: 120vh;
margin:-10vh 0 0 -10vw;
transition:.5s;


-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
bbackground-attachment: fixed;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="container">
<div id="inner" class="inner"></div>
</div>

transition

Resizing the background picture won't help. Those gaps are caused by how your div.inner is rotated. Here is a simple graphical explanation:

div.inner

Possible solutions:

Scale div when rotated. You'll need to scale by (1 / cos(rotation_angle)). But that is not very good approach. It will not look nice enough.

(1 / cos(rotation_angle))

Scale div.inner once depending on maximum possible angle of rotation. Don't forget to shift it to the desired position with negative margins or position: absolute.

div.inner

position: absolute

Here is an example of how it works, based on your code. Note, that it is not full working code, I just modified width and margin. To get exactly what you want you need to set scale and positioning by yourself.

$(function()
// Init
var container = document.getElementById("container"),
inner = document.getElementById("inner");
// Mouse
var mouse =
_x: 0,
_y: 0,
x: 0,
y: 0,
updatePosition: function(event) ,
setOrigin: function(e)
this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
,
show: function()
return "(" + this.x + ", " + this.y + ")";

;
// Track the mouse position relative to the center of the container.
mouse.setOrigin(container);
//-----------------------------------------
var counter = 0;
var updateRate = 10;
var isTimeToUpdate = function()
return counter++ % updateRate === 0;
;
//-----------------------------------------
var onMouseEnterHandler = function(event)
update(event);
;
var onMouseLeaveHandler = function()
inner.style = "";
;
var onMouseMoveHandler = function(event)
if (isTimeToUpdate())
update(event);

;
//-----------------------------------------
var update = function(event)
mouse.updatePosition(event);
updateTransformStyle(
(mouse.y / inner.offsetHeight / 2).toFixed(2),
(mouse.x / inner.offsetWidth / 2).toFixed(2)
);
;
var updateTransformStyle = function(x, y)
var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
inner.style.transform = style;
inner.style.webkitTransform = style;
inner.style.mozTransform = style;
inner.style.msTransform = style;
inner.style.oTransform = style;
;
//-----------------------------------------
container.onmouseenter = onMouseEnterHandler;
container.onmouseleave = onMouseLeaveHandler;
container.onmousemove = onMouseMoveHandler;
);

body
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
font-size: 14px;
line-height: 20px;



.container
position: relative;
overflow: hidden;
-webkit-perspective: 50px;
perspective: 50px;



.inner
position: static;
display: block;
width: 130%; margin-left: -40px;
height: 100vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="container">
<div id="inner" class="inner"></div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.