maciejkapaste-backup-2023-2.../pastes/paste_981d65.txt

87 lines
3.0 KiB
Plaintext
Raw Permalink Normal View History

2023-12-31 18:17:29 +01:00
#
# ID: 981d65
# Nazwa: book.html
# Opis: z programowania aplikacji
# Publiczny: 0
# Data utworzenia/ostatniej edycji (UTC): 2023-10-30 11:41:18
#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Książka - The Square Root of 4 to a Million Places</title>
<style>
:root {
font-size: 20px;
}
.container img {
width: 20rem;
margin-top: 3rem;
transition: all 0.3s ease-out;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
text-align: center;
}
.container p {
width: 20rem;
}
</style>
</head>
<body>
<div class="container">
<h1>The Square Root of 4 to a Million Places</h1>
<p>
The Square Root of 4 to a Million Places is presented here in a high quality paperback edition. This popular classic
work by Norman L. De Forest is in the English language, and may not include graphics or images from the original
edition. If you enjoy the works of Norman L. De Forest then we highly recommend this publication for your book
collection.
</p>
<img src="https://m.media-amazon.com/images/I/71HO01kCO3L._SY466_.jpg" alt="Okładka" id="cover">
</div>
<script>
let constrain = 80;
let mouseOverContainer = document.getElementById("cover");
let ex1Layer = document.getElementById("cover");
function transforms(x, y, el) {
let box = el.getBoundingClientRect();
let calcX = -(y - box.y - (box.height / 2)) / constrain;
let calcY = (x - box.x - (box.width / 2)) / constrain;
return "perspective(100px) "
+ " rotateX(" + calcX + "deg) "
+ " rotateY(" + calcY + "deg) ";
};
function transformElement(el, xyEl) {
el.style.transform = transforms.apply(null, xyEl);
}
mouseOverContainer.onmousemove = function (e) {
let xy = [e.clientX, e.clientY];
let position = xy.concat([ex1Layer]);
window.requestAnimationFrame(function () {
transformElement(ex1Layer, position);
});
};
mouseOverContainer.onmouseout = function () {
window.requestAnimationFrame(function () {
transformElement(ex1Layer, [window.outerWidth / 2, window.outerHeight / 2].concat([ex1Layer]));
});
}
</script>
</body>
</html>