0

Всем привет!

Мне нужно подготовить дизайн для бэкграунда сайта, зная о технических органичениях. На фоне будет изображены множество маленьких звезд (много овалов белого цвета), которые при скролле будут создавать эффект параллакса и объема. Подготовленный файл png, который был по размеру 5000х5000px (размер такой сделан, чтобы и на ретине хорошо смотрелось) очень много весит и тормозит сайт.

Подскажите пожалуйста, как можно другими способами сделать такой фон, чтобы к нему можно было применить парралакс, хорошее качество на ретине.

2
  • 2
    Используйте векторную графику (svg). Она отлично подходит для простых фигур, мало весит и прекрасно смотрится на retina - дисплеях.
    – zhurof
    10 янв 2018 в 6:50
  • Если звёзды расположены хаотично, я бы подготовил меньшее изображение и повторял его. Главное - добиться бесшовности и визуальной равномерности.
    – Ruslan
    10 янв 2018 в 8:29

1 ответ 1

0

Есть несколько вариантов:

  1. Взять все уникальные звезды, сделать из них спрайт и создать блок, в который добавить рандомно блоки с фоновым изображением из этих самых звезд. Псевдокод будет таким:
.parallax {
  position: relative;
}

.parallax__star {
  position: absolute;
  background: url(images/stars.png);
}

.parallax__star--2 {
  top: 0;
  left: 50%;
  background-position: 100% 0;
}

.parallax__star--3 {
  top: 50%;
  left: 50%;
  background-position: 0 100%;
}

.parallax__star--4 {
  top: 80;
  left: 20%;
  background-position: 100% 100%;
}
<div class="parallax">
  <div class="parallax__star parallax__star--1"></div>
  <div class="parallax__star parallax__star--2"></div>
  <div class="parallax__star parallax__star--3"></div>
  <div class="parallax__star parallax__star--4"></div>
</div>
  1. Сделать то же самое, но собрать SVG-спрайт.

  2. Если эти варианты точно не подходят (что маловероятно), то хотя бы оптимизировать графику через, например, TinyPNG. Но оптимизировать графику надо в любом случае, даже для первых двух вариантов.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.