Форум

Ahterknica · #11 (**permalink**) 28.02.2013, 01:10

ну вот теперь полностью залила.) а все равно система тормозит: то ли из-за объема картинок, то еще из-за чего

а дизайн - ну с фоном загруженным - гораздо лучше, чем без него

danik.js · #12 (**permalink**) 28.02.2013, 01:28

1) Картинки сохранять "прогрессивными" (такая опция jpeg) желательно
2) Делать прелоад картинок
3) Сделать плавный переход между картинками
4) В хроме горизонтальный скроллбар убрать
5) Увеличить интервал слайдшоу.
6) Не искажать пропорции фоток. Лучше сделать плавное засветление или затемнение внизу и по бокам (в зависимости от соотношения ширина/высота)

Ahterknica · #13 (**permalink**) 07.03.2013, 11:41

Сообщение от danik.js

1
<!DOCTYPE html>
02
<html>
03
    <head>
04
        <meta charset="utf-8" />
05
        <title></title>
06
        <style>
07
            html{
08
                height: 100%;
09
                width: 100%;
10
                margin: 0;
11
                padding: 0;
12
                background: #fff;
13
            }
14
            body{
15
                min-height: 100%;
16
                margin: 0;
17
                padding: 0;
18
                background-position: top center;
19
                background-repeat: no-repeat;
20
                -moz-background-size: 100% 100%;
21
                -o-background-size: 100% 100%;
22
                background-size: 100% 100%;
23
            }
24
            p {
25
                position: fixed;
26
                top: 50%;
27
                left: 50%;
28
                margin-top: -50px;
29
                margin-left: -100px;
30
                height: 50px;
31
                width: 300px;
32
                color: #FFFFFF;
33
                font-size: 2em;
34
            }
35
        </style>
36
    </head>
37
    <body>
38
        <p>Всякая всячина</p>
39
        <script>
40
        (function(){
41
            var interval = 1500,
42
                pictures = [
43
                    'http://imgs.su/tmp/1292024913.jpg',
44
                    'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
45
                    'http://www.wallgrad.ru/_ph/39/251576366.jpg',
46
                    'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg'
47
                ];
48

49
            for (var i = 0; i < pictures.length; i++) {
50
                (new Image()).src = pictures[i];
51
            }
52

53
            var imageIndex = 0;
54
            setInterval(function(){
55
                var image = pictures[imageIndex++] || pictures[imageIndex = 0];
56
                if (document.addEventListener) {
57
                    document.b ody.style.backgroundImage = 'url('+ image + ')';
58
                } else {
59
                    document.b ody.style.filter = 'progid

XImageTransform.Microsoft.AlphaImageLoade r(src=' + image + ', sizingMethod="scale")';
60
                }
61
            }, interval);
62
        })();
63
        </script>
64
    </body>
65
</html>

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

Форум

Справочник

Discord чат

Курсы javascript