Ренген-эффект.
Как с минимальными энергозатратами сделать сайт с ренген-эффектом? Обязательно с ноутбуком. Вот http://jsfiddle.net/VaAlina/D3tj8/9/ полуфабрикат.
|
Blondinka,
Наверно саnvas разметки с инверсии цвета, есть плагины для канваса текущего HTML страницы(или части): типо html2canvas |
Подробней, пожалуйста.
|
<!DOCTYPE HTML> <html> <body> <img style="filter:invert(100%)" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" title="Javascript.RU"> </body> </html> |
Blondinka,
Вот ваша девушка,
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<style>
body
{
background: url(http://parallel.ua/f/1/white_grl.jpg) 0 0 no-repeat;
min-width: 750px;
min-height: 760px;
}
#x-ray
{ background: url(http://h-xtech.com/css/laptop-transparent.png) 0 0 no-repeat;
background-size:100%;
position: absolute;
width: 280px;
height: 200px;
}
#screen
{
background: url(http://parallel.ua/f/1/black_grl.jpg) 0 0 no-repeat;
position: relative;
top:10px;
left:40px;
width: 200px;
height: 130px;
}
</style>
<script>
document.onmousemove = function (evt) {
var e = evt || window.event, div = document.getElementById('x-ray');
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft, scrollY = document.documentElement.scrollTop || document.body.scrollTop
var x = e.clientX + scrollX - 80, y = e.clientY + scrollY - 80;
div.style.left = x + 'px';
div.style.top = y + 'px';
x = x + 40; y = y + 10;
document.getElementById('screen').style.backgroundPosition = '' + -x + 'px ' + -y + 'px';
}
</script>
</head>
<body>
<div id="x-ray">
<div id="screen"></div>
</div>
</body>
</html>
|
Dilettante_Pro,
масштабирования не хватает :), фон в примере занимает 100% по ширине. можно уменьшать размер экрана или увеличивать, эффект сохраняет пропорции . |
Собственно, сайт из примера делала я. Для выполнения задания воспользовалась библиотекой looking glass. Очень долго возилась со стилями, т.к. при изменении размера экрана рамка смещалась. Хочется понять, как это всё можно оптимизировать, чтоб в следующий раз не переопределять стили через каждые 10px изменения размеров экрана. Находила в интернете решение через модальное окно, но до кода не добралась. Хочется понять, сколько времени занимает создание подобной страницы у другого программиста и как это оптимальней решить, чтоб не было горизонтальных полос прокрутки и смещений, но была рамка.
|
Масштабируемый вариант (здесь не очень видно в динамике - окно просмотра не меняется при resize)
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
body
{
background: url(http://parallel.ua/f/1/white_grl.jpg) 0 0 no-repeat;
background-size: 100%;
min-width: 750px;
min-height: 760px;
}
#x-ray
{
background: url(http://h-xtech.com/css/laptop-transparent.png) 0 0 no-repeat;
background-size: 100%;
position: absolute;
width: 280px;
height: 200px;
}
#screen
{
background: url(http://parallel.ua/f/1/black_grl.jpg) 0 0 / 128px 102px no-repeat;
position: relative;
top: 10px;
left: 40px;
width: 200px;
height: 130px;
}
</style>
<script>
$( function() {
$("#x-ray").css({top: "-10px", left: "-40px"});
$(document).trigger("mousemove");
});
document.onmousemove = function (evt) {
var e = evt || window.event, div = document.getElementById('x-ray');
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft, scrollY = document.documentElement.scrollTop || document.body.scrollTop
var x = e.clientX + scrollX - 80, y = e.clientY + scrollY - 80;
div.style.left = x + 'px';
div.style.top = y + 'px';
x = x + 40; y = y + 10;
document.getElementById('screen').style.backgroundPosition = '' + -x + 'px ' + -y + 'px';
$('#screen').css({ backgroundSize: $(window).width() + "px" });
}
</script>
</head>
<body>
<div id="x-ray">
<div id="screen">
</div>
</div>
</body>
</html>
|
Dilettante_Pro, спасибо. Я пыталась преобразовать код с девушкой, но получалось не то. Не думала, что это можно сделать так лаконично! Как я понимаю, подобный сайт у вас занимает несколько часов.
|
Цитата:
|
| Часовой пояс GMT +3, время: 21:56. |