87 lines
3.0 KiB
Plaintext
87 lines
3.0 KiB
Plaintext
|
#
|
||
|
|
# 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>
|