HTML 5 -Динамические элементы как слои - PullRequest
Новая
       27

HTML 5 -Динамические элементы как слои

0 голосов
/ 04 февраля 2012

Я хочу реализовать Dynamic Elements как слои, один поверх другого. Слой, который находится выше, визуально просвечивает слой ниже. (То есть, где один слой имеет элемент, в котором изображение меняется через равные промежутки времени, а другой слойгде элемент имеет горизонтально прокручиваемый текст) Возможно ли это?и если ответ «да», как это можно сделать?

1 Ответ

0 голосов
/ 04 февраля 2012

например попробуйте: 

<html>
    <head>
        <script type="text/javascript" charset="utf-8">
            window.onload = function () {

                var canvas = document.getElementById('canvas1');

                var img = new Image();
                img.src = 'http://rakstagemom.files.wordpress.com/2011/01/image-is-cumulus_clouds_panorama-from-wikipedia-commons.jpg';

                var addit = -0.4;
                var scrollSpeed = 0.01;
                var left = 0;
                var ctx = canvas.getContext('2d');
                var _scale = document.documentElement.clientHeight / canvas.height;
                var width = canvas.width;
                var height = canvas.height;
                var max = -840;

                //animation loop
                var init = setInterval(function() {
                    left += addit;
                    if(left > -1) {
                        addit = -0.4
                    } else if(left < max)
                        addit = 0.4;
                    //0.4
                    ctx.drawImage(img, left, 0, width, height);
                    var thisFrameTime = ( thisLoop = new Date) - lastLoop;
                    frameTime += (thisFrameTime - frameTime) / filterStrength;
                }, scrollSpeed);
            };
        </script>
        <style>
            body {
                overflow: hidden;
                background: #001;
            }
            .window {
                padding: 0;
                clear: none;
                border: 1px solid rgba(0,0,0,0.5);
                border-radius: 10px 10px 2px 2px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
                -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
            }
            #container {
                width: 91.5%;
                height: 10em;
                margin: .55em .9em .4em .85em;
                position: absolute;
                background: rgba(0,100,200,0.25);
            }
            #canvas1 {
                width: auto;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas1" width="1784px" height="534px"></canvas>
        <div id="container" class="window">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </p>
        </div>
    </body>
</html>
...