Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Плавающий background без JavaScript

Красивый фоновый рисунок в сочетании с движением выглядит очень впечатляюще.

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

Сейчас плавающий фон делается на чистом CSS с использованием анимации, т.е. свойства animation.

Пример более сложного фона в виде эффекта дождя можно посмотреть на странице Анимированный фон на JavaScript.

Исходный код этого примера:

<style>
    @keyframes animatedBackground {
    0 {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -600px;
    }
    }
    .animated_background {
        height: 100%;
        width: 100%;
        padding: 15px;
        background-image: url('kirpich.gif');
        animation: animatedBackground 60s linear infinite;
    }
</style>
<div class="animated_background">
    <h1>Плавающий background без JavaScript</h1>
    <p>Красивый фоновый рисунок в сочетании с движением выглядит очень впечатляюще.</p>
    <p>
        Когда-то передвигающийся фон можно было сделать только с помощью JavaScript, да еще и с кучей проблем:
        то не во всех браузерах работает, то надо использовать дополнительные функции.
    </p>
    <p>
        Сейчас плавающий фон делается на чистом CSS с использованием анимации, т.е. свойства <a href="/css/styles1.php#animation">animation</a>.
    </p>
    <p>
        Пример более сложного фона в виде эффекта дождя можно посмотреть на странице
        <a href="/java/example/image_backgraund.php">Анимированный фон на JavaScript</a>.
    </p>

</div>

.
Прокомментировать/Отблагодарить