Форум

Blondinka · #1 (**permalink**) 21.04.2016, 21:57

Как с минимальными энергозатратами сделать сайт с ренген-эффектом? Обязательно с ноутбуком. Вот http://jsfiddle.net/VaAlina/D3tj8/9/ полуфабрикат.

Deff · #2 (**permalink**) 22.04.2016, 00:17

Blondinka,
Наверно саnvas разметки с инверсии цвета, есть плагины для канваса текущего HTML страницы(или части): типо html2canvas

Blondinka · #3 (**permalink**) 22.04.2016, 11:01

Подробней, пожалуйста.

laimas · #4 (**permalink**) 22.04.2016, 11:11

<!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>

Dilettante_Pro · #5 (**permalink**) 22.04.2016, 12:59

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>

рони · #6 (**permalink**) 22.04.2016, 13:09

Dilettante_Pro,
масштабирования не хватает

, фон в примере занимает 100% по ширине. можно уменьшать размер экрана или увеличивать, эффект сохраняет пропорции .

Blondinka · #7 (**permalink**) 22.04.2016, 14:15

Собственно, сайт из примера делала я. Для выполнения задания воспользовалась библиотекой looking glass. Очень долго возилась со стилями, т.к. при изменении размера экрана рамка смещалась. Хочется понять, как это всё можно оптимизировать, чтоб в следующий раз не переопределять стили через каждые 10px изменения размеров экрана. Находила в интернете решение через модальное окно, но до кода не добралась. Хочется понять, сколько времени занимает создание подобной страницы у другого программиста и как это оптимальней решить, чтоб не было горизонтальных полос прокрутки и смещений, но была рамка.

Dilettante_Pro · #8 (**permalink**) 22.04.2016, 16:01

Масштабируемый вариант (здесь не очень видно в динамике - окно просмотра не меняется при 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>

Blondinka · #9 (**permalink**) 22.04.2016, 20:07

Dilettante_Pro, спасибо. Я пыталась преобразовать код с девушкой, но получалось не то. Не думала, что это можно сделать так лаконично! Как я понимаю, подобный сайт у вас занимает несколько часов.

Dilettante_Pro · #10 (**permalink**) 22.04.2016, 22:32

Сообщение от Blondinka

Dilettante_Pro, спасибо. Я пыталась преобразовать код с девушкой, но получалось не то. Не думала, что это можно сделать так лаконично! Как я понимаю, подобный сайт у вас занимает несколько часов.

Какой же это сайт? Этюд... А по времени -никогда не знаешь заранее, сколько потребуется, иногда на казалось бы ерунде застреваешь. А тот сайт, на который вы сослались вначале - большая серьезная работа, не на несколько часов.

Форум

Справочник

Discord чат

Курсы javascript