Статьи

Больше экспериментов с устройством на HTML и Adobe DPS

Февраль 26, 2018

Я хотел продолжить мой последний пост о 3D-эффектах параллакса в HTML или Adobe DPS , я решил выпустить некоторые другие эксперименты, которые я исследовал с движением устройства в публикациях DPS . Посмотрите видео ниже, чтобы увидеть два новых образца и исправленную версию примера клубники из моего последнего поста (в последнем посте растения шли не так, как надо).

Все три из этих примеров используют одну и ту же базовую технику для реагирования на движение устройства внутри публикации DPS. Интерактивные компоненты движения реализованы с использованием HTML и JavaScript и включены в публикации в качестве наложений веб-контента . В JavaScript для обработки физической ориентации устройства используется обработчик события ondevicemotion .

Во всех трех примерах наложение веб-содержимого настроено на автоматическое воспроизведение с отключенным взаимодействием с пользователем. Таким образом, HTML и JavaScript автоматически загружаются, и сценарии активны, но они не блокируют взаимодействие или жесты для навигации DPS. Я также включил «Scale Content To Fit», чтобы контент HTML масштабировался соответствующим образом между устройствами с сетчаткой и без сетчатки.

Adobe InDesign - параметры наложения веб-содержимого

Параметры наложения веб-содержимого

клубника

Образец клубники идентичен образцу из моего предыдущего поста. Это просто захват обновленного движения. Вы можете получить доступ к полному исходному проекту для этого образца по адресу:
https://github.com/triceam/DPS-HTML-Samples/tree/master/strawberries

клубника

Adobe Сан-Франциско

Пример содержимого Adobe / inline реализован так же, как пример клубники. Изображение большого города Это двухслойная композиция, созданная с помощью Adobe Edge Animate . Здание переднего плана и флаг перемещаются независимо от фонового изображения. Я использовал Photoshop, чтобы разделить содержимое на слои и анимировать их в зависимости от ориентации устройства точно так же, как образец клубники . Все текстовое и графическое содержимое, окружающее панораму городского пейзажа, размещено в InDesign.

саман

Вы можете проверить проект Adobe Edge Animate по адресу:
https://github.com/triceam/DPS-HTML-Samples/tree/master/adobe%20roof

AT & T Park / Сан-Франциско Джайентс

Пример AT & T Park / San Francisco Giants реализован с использованием базового HTML и JavaScript, дополнительные инструменты для создания этого интерактивного сценария не использовались. Содержимое на левой стороне было выложено с помощью InDesign. Содержание справа — это интерактивный HTML.

att_park

The image used in this example is a vertical panorama captured from a remote control helicopter. This image contains various perspectives that have been composited in Photoshop. The motion of the device is aligned to match the perspectives in the image/viewport; When the device is facing down, the image is looking down and when the device is vertical, the image faces forward. You can check out the vertical panorama image below. If you’re interested in creating a vertical panorama, be sure to check out this tutorial from Russell Brown.

Vertical Panorama over AT&T Park

The HTML and JavaScript used in this example is fairly minimal. The image is applied as the background of the root HTML <body> element, and the position of the background is shifted based upon the device motion event. This approach keeps the HTML DOM as flat and simple as possible.

Here’s the HTML that makes up this example:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Parallax Vertical Background</title>
        <link rel="stylesheet" href="assets/styles.css">
        <script src="assets/zepto.js"></script>
    </head>
    <body></body>
</html>

… and the CSS styles used to apply the background image.

body {
    background-image:url('att_park_vert_panorama.jpg');
    background-position: center;
}

… and the JavaScript used to shift the position based on the device orientation event. Note: this also uses the Zepto JavaScript library.

window.ondeviceorientation = function(event) {
        var gamma = event.gamma/90;
    var beta = event.beta/180;
    var temp = 0;
 
    // shift values/motion based upon device orientation
    switch (window.orientation) {
        case 90:
            temp = gamma;
            gamma = beta;
            beta = temp;
            break;
        case -90:
            temp = -gamma;
            gamma = beta;
            beta = temp;
            break;
 
    }
 
    // update positions to be used for CSS
    var yPosition = 1200 - (beta * 2200);
    var xPosition = -200 + (gamma * 300);
    xPosition = Math.max( -300, Math.min( 0,xPosition));
    yPosition = -Math.max( 100, Math.min( 1400,yPosition));
    //console.log(xPosition, yPosition);
 
    // apply css styles
    var css = xPosition + "px " + yPosition + "px";
    $("body").css( "background-position", css);
}

Textual content used in this example from: http://en.wikipedia.org/wiki/At%26t_park

Source code for the device motion in this example is available at: https://github.com/triceam/DPS-HTML-Samples/tree/master/ATT%20Park

All of the HTML, CSS and JavaScript code used for these examples is available in the GitHub repository at: https://github.com/triceam/DPS-HTML-Samples

29
Share: