Toerd@480
6 years ago
parent
2bb6089201
commit
17fb0124df
@ -0,0 +1,61 @@
|
||||
/*
|
||||
* zoom.js
|
||||
* function for the purpose of my portfolio to zoom into
|
||||
* images inside their box without touching the rest of the layout.
|
||||
* Author: phga/teord
|
||||
* Date: 2019-10-20
|
||||
* Version: 1.0
|
||||
*/
|
||||
function zoom(factor, imgName) {
|
||||
let img = document.getElementById(imgName);
|
||||
let magni = img.parentElement;
|
||||
magni.style.backgroundImage = `url("${img.src}")`;
|
||||
|
||||
// wait till size of img is calculated
|
||||
setTimeout(() => {
|
||||
var offset = {x: img.width * factor, y: img.height * factor};
|
||||
magni.style.width = img.width;
|
||||
// setup the padding (bigger zoom canvas)
|
||||
magni.style.padding = offset.y + "px " + offset.x + "px";
|
||||
// adjust the margin to ged rid of the extra size gained from padding
|
||||
magni.style.margin = -offset.y + "px " + -offset.x + "px";
|
||||
}, 500);
|
||||
|
||||
// Added a mouse(enter|move|leave) to make img transparent and show bg-img when it should be visible
|
||||
img.addEventListener("mouseenter", (e) => {
|
||||
img.style.opacity = 0;
|
||||
});
|
||||
|
||||
img.addEventListener("mousemove", (e) => {
|
||||
moveBackground(getOffsetToMiddle(e));
|
||||
});
|
||||
|
||||
img.addEventListener("mouseleave", (e) => {
|
||||
img.style.opacity = 1;
|
||||
});
|
||||
|
||||
// Function to move the bg-img according to the current position in img
|
||||
let moveBackground = function(pos) {
|
||||
// It is always good to draw stuff the brain can't process :E
|
||||
// * 2 because we have the offset on both sides
|
||||
// -pos because we have inverted controls
|
||||
magni.style.backgroundPosition = -pos.x * factor * 2 + "px " + -pos.y * factor * 2 + "px";
|
||||
};
|
||||
|
||||
let getOffsetToMiddle = function(cursor) {
|
||||
let elem, x = y = 0;
|
||||
cursor = cursor || window.event;
|
||||
|
||||
// get elem bounding box
|
||||
elem = img.getBoundingClientRect();
|
||||
|
||||
// calculate distance to middle of elem
|
||||
x = cursor.pageX - (elem.left + elem.width / 2);
|
||||
y = cursor.pageY - (elem.top + elem.height / 2);
|
||||
|
||||
// We do not have a scrolling page but you never know
|
||||
x = x - window.pageXOffset;
|
||||
y = y - window.pageYOffset;
|
||||
return {x: x, y: y};
|
||||
};
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ .Site.Params.name | default "MEP MEP"}}</title>
|
||||
<link href="/css/main.css" type="text/css" rel="stylesheet"/>
|
||||
</head>
|
||||
Loading…
Reference in new issue