Как создается этот эффект изображения?

StackOverflow https://stackoverflow.com/questions/2419523

  •  19-09-2019
  •  | 
  •  

Вопрос

Я просматривал эту страницу уже некоторое время.Удивительно, правда.Но я не могу сказать, как работает эффект фонового изображения, возникающий при прокрутке.Просмотрев код, выяснилось, что они используют Jquery плюс несколько плагинов для прокрутки, но ничего об изображениях, которые я вижу.

Как бы вы сказали, что это сделано?

Сайт: http://herohousing.org/UBBT/

Это было полезно?

Решение

Этот трюк довольно прост и требует лишь некоторого CSS, где каждая панель имеет фиксированное фоновое изображение:

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

Здесь я использую одно и то же фоновое изображение, но другой цвет фона и повтор изображения должны показать вам, что это три разных элемента.

РедактироватьЛадно, похоже, некоторые сомневаются в том, что я пишу.И на самом деле цитируемый сайт использует для этого jQuery.Но только для того, чтобы подогнать изображение по ширине и высоте области просмотра браузера, поскольку вы пока не можете изменить размер фонового изображения.CSS 3 определяет background-size свойство но его поддержка по-прежнему является собственной собственностью с использованием префикса, специфичного для поставщика, например -khtml- (Конкерор), -moz- (браузеры на базе Gecko, такие как Firefox), -o- (Опера) и -webkit- (Браузеры на основе WebKit, такие как Safari).

Если вы можете воздержаться от этого, вы можете использовать технику CSS, которую я вам показал.

Другие советы

Это 4 элемента div с разными фоновыми изображениями для каждого, поэтому эффект особенно хорошо работает благодаря свойству «background-attached:исправлено;" для остановки фоновой прокрутки.

Если вы загружаете Firebug для Firefox, вы можете проверить элементы div и наблюдать, как CSS заставляет страницу вести себя, и попытаться воспроизвести это для себя.

Очень красивый эффект, надо признать :-)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top