Эффект движения в формате GIF создается путем соединения нескольких изображений вместе, почти как в покадровой фотографии. Эта короткая последовательность изображений затем зацикливается, что придает изображению его анимированные качества. Применение одного из этих изображений на вашем веб-сайте — это просто вставка его с помощью некоторого кода. Различные бесплатные источники предлагают изображения, созданные для использования в качестве фона, но вы также можете легко разместить меньшее изображение на странице, чтобы получить желаемый вид.
Восемь источников для анимированных GIF-фонов
В Интернете есть множество источников анимированных GIF-фонов. При использовании любого изображения на своем сайте проверяйте политику использования сайта, чтобы не нарушать законы об авторских правах. Ниже перечислены восемь лучших бесплатных ресурсов.
- Gifs.net : этот источник предлагает небольшие GIF-изображения, связанные с различными областями, такими как спорт, природа, праздники, еда, технологии, мультфильмы и животные.
- Backgrounds.Free-Animations.co.uk : изображения на этом веб-сайте специально предназначены для использования в качестве фона и включают в себя звезды, цвета, пузыри и другие узоры. Преимущество использования этих изображений заключается в том, что ваш фон не будет выглядеть мозаичным и будет выглядеть чище.
- Bells N Whistles : здесь доступны анимированные фоны и небольшие GIF-файлы, а также множество красочных шаблонов на выбор. Есть три страницы с различными фонами, а также несколько страниц с анимированными картинками, маркерами и формами.
- ART-TLC : Это еще один сайт, специализирующийся на анимированных фонах. На шести страницах изображений представлены звезды, цветовые эффекты, эффекты жидкости и различные текстуры.
- Gif-анимация : хотя в нем нет изображений, специально предназначенных для использования в качестве фона, он предлагает обширную коллекцию небольших изображений, которые можно размещать на странице. Вам нужно будет установить обратную ссылку на этот веб-сайт, если вы используете какие-либо изображения, которые вы найдете здесь.
- Heather Animations : эта небольшая коллекция творческих фонов содержит изображения со спецэффектами, животными, пузырьками, сердцами , воздушными шарами и текстурами.
- Animate It : Предлагая более 5000 изображений, этот сайт позволяет вам просмотреть, как каждое изображение будет выглядеть в качестве фона. Большинство изображений имеют средний размер и должны быть размещены на странице плиткой для наилучшего отображения.
Как разместить анимированный фон на вашем сайте
Как только вы найдете фон, который вам нравится, вам нужно будет добавить его на свой сайт.
Параметры метода
Есть два основных способа добавить анимированный фон на ваш сайт.
- Первый вариант включает в себя непосредственный ввод некоторого кода в теле HTML-документа. Если вы используете этот метод, вам нужно будет добавить код на каждую страницу вашего веб-сайта, поэтому он может быть не лучшим выбором для сайтов с большим количеством страниц.
- Второй метод является лучшим решением, если на вашем веб-сайте используется каскадная таблица стилей (CSS) для указания стилей страницы, поскольку для этого требуется только добавить код изображения в один файл CSS.
Загрузка изображения на ваш сайт
Прежде чем вы сможете использовать любой из методов, вам необходимо загрузить GIF на свой веб-сайт, обычно через FTP. В зависимости от вашего хостинга вы можете использовать отдельную программу FTP или специальную панель управления файлами на вашем сайте. При загрузке изображения вы должны поместить его в каталог, содержащий файлы HTML и CSS вашего сайта, если это применимо. Это упростит указание пути к изображению при добавлении кода.
Добавление фона в документ HTML
Процесс добавления пути к фоновому изображению в документ HTML очень прост, но вы должны помнить, что вам нужно будет добавить код изображения на каждую страницу. Используйте следующий процесс, чтобы добавить соответствующий код в документ HTML:
- Откройте HTML-файл в приложении для веб-дизайна или в текстовом редакторе.
- Найдите тег <body>, расположенный под тегами <html> и <head> в начале кода.
- Измените тег <body> на <body background=”picturename.gif”>, заменив “picturename” на имя изображения.
- Сохраните HTML-файл и повторно загрузите его на свой веб-сайт.
- Повторите процесс для каждой страницы вашего веб-сайта, на которой вы хотите отображать фон.
Добавление фона в файл CSS
Использование CSS делает процесс добавления фона на весь ваш веб-сайт менее трудоемким и позволяет настраивать его. Если вы уже используете CSS для определения стиля своего веб-сайта, просто внесите следующие изменения в файл CSS своего веб-сайта, чтобы добавить анимированный фон:
- Откройте файл CSS в текстовом редакторе или другой совместимой программе.
- Найдите элемент body { на листе и нажмите Enter, чтобы создать новую строку для свойства.
- Введите следующую строку, заменив «nameofbackground» именем вашего файла: background-image: url («nameofbackground.gif»);
- Если вы используете изображение, которое не хотите повторять на странице, нажмите Enter, чтобы создать еще одну новую строку, и введите следующее: background-repeat: no-repeat;
- Сохраните файл CSS и повторно загрузите его на свой веб-сервер.
Лучшие практики
При использовании анимированного GIF в качестве фона вашего веб-сайта вы должны сначала выбрать правильное изображение, которое имеет смысл в контексте, тоне и тематике веб-сайта. Если изображение маленькое, важно помнить, что использование GIF заставит его повторяться вдоль оси X и оси Y, если вы не указали иное в CSS. Для больших GIF-файлов изображение может быть обрезано по краям окна браузера. Некоторые основные моменты, которые следует учитывать при использовании анимированных фонов GIF:
- Не используйте изображения, которые могут чрезмерно отвлекать посетителя.
- Используйте правильное изображение по отношению к контенту на сайте.
- Убедитесь, что изображение не слишком маленькое и не слишком большое.
- Установите повторяющееся изображение на странице, если вы используете маленькое изображение. (Примечание: это происходит автоматически, если вы просто добавляете код в HTML-документ.)
Другие причины использования анимированных изображений
Есть много причин для использования анимированных GIF, особенно на небольших самодельных веб-сайтах. Хотя фоны являются популярным использованием, существуют и другие применения этих изображений, в том числе:
- Привлечение внимания к информации на странице
- Дайте сайту представление о движении
- Дополнение к более статичным изображениям на веб-сайте
- Добавление действия к рекламным баннерам на веб-сайтах, часто привлекающее внимание зрителя.
- Анимация маркеров, чтобы сделать информацию более визуально интересной.
Правильное использование фона
Выбор подходящего фона GIF может помочь вам создать более привлекательный и интересный веб-сайт, независимо от того, размещаете ли вы небольшое изображение или используете специально разработанный фон. Выбирая GIF-анимацию, помните, что она должна дополнять внешний вид сайта, а не отвлекать его. Это означает выбор изображения подходящего размера и избегание изображений, которые могут отвлечь посетителей от чтения содержимого вашего сайта. Если все сделано правильно, эффект анимированного фона может быть весьма приятным.