Как сверстать сайт "Приземление Пришельца" с эффектом прокрутки

() translation by (you can also view the original English article)

В этом руководстве, во втором в серии из двух частей, мы возьмем удивительную векторную иллюстрацию, созданную Юлией Соколовой «Как создать фон с длинной прокруткой для сайта», и сверстаем готовый сайт.

Иллюстрация

Как создать фон с длинной прокруткой для сайта

Юлия Соколова

Что мы будем разрабатывать

Мы соберем все воедино, чтобы, прокрутив вниз от верхней части страницы, вы увидели «Приземления Инопланетянина», который будет направляться вниз к земле. В начале мы увидим летающую тарелку, парящую в космосе.

Image: https://cms-assets.tutsplus.com/uploads/users/53/posts/26826/image/ufo.png

По мере прокрутки вниз НЛО достигнет атмосферы и станет “кометой пришельцев”.

Image: https://cms-assets.tutsplus.com/uploads/users/53/posts/26826/image/comet.png

И, наконец, когда комета проходит через линию деревьев, она превращается в «маленького зеленого человечка», который приземляется на землю.

Взгляните на демо!

SVG изображения

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

Прежде чем мы начнем разработку, вам понадобится изображение, созданное в первой части этой серии уроков, которое поделено на четыре SVG-файла:

Файл с НЛО называется “ufo.svg”
Файл с “кометой пришельцев” называется “alien_comet.svg”
Файл с “маленьким зеленым человечком” называется “alien_landing.svg”
Файл с чистым фоновым изображением называется “background.svg”

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

Настройка базовой структуры

Создайте новую папку для своего проекта и внутри нее создайте подпапку с именем “css” и другую с именем “images”.

Скопируйте и вставьте четыре SVG изображения в новую папку “images”.

В папке “css” создайте файл с именем “style.css”.

В основной папке создайте новый файл с именем “index.html”.

Структура вашей папки теперь должна выглядеть так:

В файле «index.html» добавьте следующий базовый HTML-код, чтобы получить необходимые сведения и загрузить таблицу стилей:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
</head>
<body>


  
</body>
</html>

Добавляем фон

Это может показаться нелогичным, но мы собираемся добавить наше фоновое изображение, используя элемент img, а не как фоновое изображение CSS. Мы это делаем, потому что:

Мы хотим воспользоваться возможностью SVG изменять размер, заполняя все окно просмотра нашим фоновым изображением “background.svg”, независимо от размеров окна браузера.
Чтобы техника прокрутки работала, нам нужно знать высоту фонового изображения.
Поскольку мы разрешаем плавное изменение размера нашего фонового изображения, мы не можем заранее знать, каким будет его высота.
Так как мы не можем заранее узнать высоту фонового изображения, нам придется определять это после того как изображение будет загружено.
Если мы установим “background.svg” в качестве фонового изображения CSS, его высота не повлияет на макет сайта, что затруднит его определение.
Вставляя “background.svg” в качестве обычного изображения, его высота будет влиять на дизайн сайта, делая его относительно простым для определения с помощью jQuery.

Теперь, когда вы понимаете, почему мы используем этот подход, давайте начнем разработку!

В файле «index.html» добавьте этот код:

1	<img class="background" src="images/background.svg">

Если вы просматриваете файл в браузере, вы должны увидеть изображение, заполняющее область просмотра. Тем не менее все еще будет некоторое свободное пространство по краям.

Это связано с тем, что браузер по умолчанию содержит небольшое поле для элементов body. Чтобы это изменить, добавьте этот код в файл «style.css»:

1	body {
2	margin: 0;
3	}

Существует также еще одно CSS свойство по умолчанию, которое нам нужно изменить, это свойство display для изображений, которое установлено как inline. Если вы прокрутите страницу до конца, вы увидите, что под изображением есть небольшое пустое пространство из-за этого значения по умолчанию. Измените это, добавив код:

1	img {
2	display: block;
3	}

Теперь вы должны увидеть, что изображение “background.svg” заполняет окно полностью, и если вы измените ширину окна, вы увидите, что SVG изображение масштабируется в соответствии с новым размером. Высота макета сайта также изменится, чтобы сохранить правильное соотношение сторон для изображения "background.svg".

Добавляем контейнер переднего плана

Чтобы изображение, которое мы только что поместили, работало как фоновое изображение, нам нужен способ, чтобы оставшаяся часть нашего контента находилась поверх него на переднем плане. Мы можем добиться этого, добавив элемент div, который будет действовать как контейнер, затем изменим его свойства position и z-index.

В файле «index.html» после только, что добавленного изображения, вставьте новый тег div:

1	<div class="foreground">
2	</div>

И в файле «style.css» добавьте этот CSS код:

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

Давайте рассмотрим, что же делает этот код.

Во-первых, устанавливая свойству позиционирования position значение absolute, мы убираем элемент из обычного потока документа (который в противном случае поместил бы его ниже фонового изображения), что позволяет нам размещать его где угодно.

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

После этого мы задаем элементу height (высоту) и width (ширину) 100%. Это гарантирует, что элемент не сузиться опускаясь вниз, скрывая любой контент внутри себя.

Наконец, мы устанавливаем свойству z-index значение равное 1, которое выдвигает элемент вперед, чтобы он находился перед нашим фоновым изображением (значение свойства z-index по умолчанию auto). Это предотвращает загораживания содержимого внутри элемента фоновым изображением.

Теперь наш контейнер переднего плана готов к добавлению в него контента.

Добавляем НЛО панель

Мы собираемся сделать так, чтобы наша летающая тарелка «приземлялась» вниз на землю, создав три панели, по одной для каждой стадии «приземления». Затем мы добавим соответствующее SVG изображение для каждой панели, например файл «ufo.svg», в качестве фонового изображения с фиксированным положением. Изображение будет оставаться на месте во время прокрутки, в то время как фон перемещается за ним, создавая иллюзию спуска.

Внутри нашего элемента div «foreground», добавьте новый тег div:

1	<div class="ufo_section"></div>

Теперь добавьте следующий код в ваш CSS файл:

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

В первой строке нашего кода мы присваиваем элементу height значение 100%, чтобы его содержимое было видимым. Затем мы добавляем изображение «ufo.svg» в качестве фона. Мы устанавливаем для свойства background-repeat значение no-repeat, поскольку хотим, чтобы отображалась только одна летающая тарелка, и затем устанавливаем background-position, размещая изображение в центре как по горизонтали, так и по вертикали.

С нашим свойством background-size мы устанавливаем ширину в процентах и позволяем автоматически вычислять высоту. Эта ширина берется из исходного векторного изображения, в котором ширина летающей тарелки составляет приблизительно 40% от ширины всей иллюстрации.

Устанавливая ширину нашего изображения «ufo.svg» в процентах, размер окна изменяется и изображение «background.svg» изменяется вместе с ним, изображение летающей тарелки также будет корректировать свою ширину, чтобы поддерживать желаемые пропорции.

В последней строке мы устанавливаем свойству background-attachment значение fixed, это означает, что изображение при прокрутке будет оставаться на месте, создавая иллюзию спуска.

Попробуйте обновить страницу и проскроллить вниз - вы должны увидеть, как летающая тарелка движется вертикально между планетами.

Добавьте комету и посадочные панели

При прокрутке сайта вниз, как только вы спуститесь достаточно далеко, вы заметите, что летающая тарелка исчезает. Это происходит потому, что мы скроллим за пределы высоты панели ufo_section, поэтому мы больше не можем видеть ее фон.

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

Итак, теперь мы повторим процесс, который использовали раньше, чтобы вставить изображения «alien_comet.svg» и изображение «alien_landing.svg».

Добавьте следующий HTML-код сразу после раздела ufo_section и все еще внутри тега div переднего плана:

1	<div class="comet_section"></div>
2	<div class="landing_section"></div>

Затем в файл CSS добавьте эти новые классы:

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

Мы используем все тот же код и те же методы, только изменились имена файлов изображений, а ширине свойства background-size установлено значение 15%, чтобы это соответствовало более узким изображениям, которые мы только что добавили.

Наш окончательный CSS код

Наш файл “style.css” уже готов и должен содержать следующий код:

body {
  margin: 0;
}

img {
  display: block;
}

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

Вернитесь на свой сайт, прокрутите немного вниз, и вы увидите, как летающая тарелка превращается в комету, а затем прокрутив немного дальше, в «маленького зеленого человечка».

Добавим расчет высоты панели

Прямо сейчас вы заметите, что у нас есть несколько проблем при прокрутке, которые нужно решить:

Каждая из трех панелей недостаточно высока. Это создает впечатление, что космический корабль слишком быстро меняется от одной формы к другой, поэтому он никогда не достигнет земли.
Вы можете видеть, что изображение "alien_comet.svg" начинает появляться до того, как изображение "ufo.svg" полностью исчезло, что выглядит странно.

Поскольку наше изображение "background.svg" не имеет фиксированного размера, мы не будем знать точную высоту в пикселях, которую должна иметь каждая панель перед загрузкой. Тем не менее мы можем определить высоту, которую каждая панель должна иметь в процентах от высоты «background.svg».

Мы можем реализовать этот процесс, используя jQuery:

Укажите высоту, которую мы хотим для каждой панели, в процентах (или дробях) от высоты изображения "background.svg".
Определите высоту "background.svg" после загрузки.
Рассчитайте и установите высоту панелей на основе двух приведенных выше сведений.

Пока мы работаем над этим, мы также добавим пару дополнительных пустых тегов div, которые будут использоваться в качестве разделителей между каждой панелью, и мы также установим с помощью jQuery их высоту. Добавление пространства между панелями сделает переход более плавным, решая проблему просмотра изображения «alien_comet.svg» до того, как изображение «ufo.svg» исчезнет.

Обновите ваш HTML-код, чтобы между каждым существующим тегом div был разделительный элемент, например, вот так:

<div class="foreground">
  <div class="ufo_section"></div>
  <div class="spacer_one"></div>
  <div class="comet_section"></div>
  <div class="spacer_two"></div>
  <div class="landing_section"></div>
</div>

А в раздел head загрузите библиотеку jQuery, добавив следующий код:

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Настройка JavaScript функций

Перед закрывающим тегом </body> создайте пару тегов <script></script> и создайте новую функцию:

<script>

  function set_section_heights(){

  }
  
</script>

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

$(document).ready(function(){
  set_section_heights();
});

$(window).resize(function(){
  set_section_heights();
});

Установка высоты фонового изображения

Первое, что нам нужно сделать в функции set_section_heights(), это выяснить, какая теперь высота нашего фонового изображения, и сохранить ее как переменную. Для этого добавьте этот код:

1	var doc_height = $(".background").height();

В первой части кода, $(".background"), jQuery находит элемент с именем класса background. Затем добавленная функция .height () получает значение высоты пикселя этого элемента в виде целого числа. Это говорит нам о том, насколько высоко наше изображение "background.svg" и сохраняет это число в переменной doc_height.

Определяем предполагаемую высоту секции

Теперь мы собираемся установить объект, в котором мы можем определить:

Имя класса каждого элемента, для которого мы хотим установить высоту.
Какой высоты должен быть элемент в виде дробного числа от высоты фона.

Мы собираемся повторять этот объект и использовать содержащиеся в нем значения, чтобы изменить размеры разделов на переднем плане.

Давайте начнем с одной записи в объекте:

1	var section_heights = {
2	"ufo_section": 0.25
3	}

Здесь мы установили индекс (значение слева) равным ufo_section, чтобы это соответствовало имени класса нашего первого раздела.

Затем мы установили значение 0.25, что является еще одним способом выражения 25%. Через некоторое время мы умножим это значение на число, хранящееся в переменной doc_height, то есть на высоту фонового изображения. Делая это, мы будем говорить, что мы хотим, чтобы панель ufo_section составляла 25% от текущей высоты background.svg.

Например, если высота «background.svg» была 1000px, высота ufo_section будет равна 250px:

1000 * 0.25 = 250

Теперь, когда мы проанализировали, как этот объект будет работать, мы добавим некоторые записи для других элементов, для которых мы хотим установить высоту. Обновите объект следующим образом:

var section_heights = {
  "ufo_section": 0.25,
  "spacer_one": 0.03,
  "comet_section": 0.36,
  "spacer_two": 0.06,
  "landing_section": 0.298
}

Примечание. Я выбрал эти значения на основе метода проб и ошибок, поэтому не стесняйтесь поиграться с числами после завершения этого урока, чтобы увидеть результаты.

Итерация объекта `section_heights`

Когда наш объект завершен, мы готовы выполнить итерацию и изменить размеры наших панелей.

Сначала нам понадобится функция $.each() для итерации объекта section_heights и извлечения индекса и значения (представляющих имя класса и высоту соответственно) из каждой записи, которую он содержит.

Добавьте этот код после объекта section_heights:

1	$.each( section_heights, function( index, value ) {
2	console.log( "Index: " + index, "\| Value: " + value );
3	});

Чтобы увидеть, как вышеприведенная итерационная функция выведет значения перебора переменных index и value, мы используем console.log(), для того, чтобы написать небольшое сообщение в консоль для каждой записи в объекте section_heights.

Перезагрузите свой сайт, откройте Chrome Web Developer Tools (или его эквивалент в выбранном вами браузере) и перейдите на вкладку консоль. Вы должны увидеть это:

Слева от каждого сообщения после индекса Index: вы можете видеть значения index для каждой записи, то есть имена классов элементов, размер которых мы хотим изменить.

Справа от каждого сообщения после значения Value: вы можете видеть значение value для каждой записи, то есть ту часть общей высоты, которую должна иметь каждая панель.

Рассчитываем и устанавливаем высоту раздела

Теперь вместо того, чтобы просто записывать эти данные в консоль, мы собираемся использовать их для установки размеров наших передних секций. Удалите строку console.log() и измените ее следующим образом:

1	$( "." + index ).height( Math.floor(value * doc_height) );

Давайте разберемся, что делает эта строка.

Сначала у нас есть индекс заданного элемента $("." + index). Мы его используем, чтобы найти элемент, который мы хотим изменить. Например, в первой записи в нашем объекте index индекс установлен в ufo_section. В этом случае первая часть нашего кода станет $.( ".ufo_section" ). С помощью этого jQuery кода запрашивается поиск на странице элемента с классом ufo_section.

Далее мы добавляем .height (...). С помощью этого jQuery кода устанавливается высота найденного элемента, изменяется его значение, переданное в скобках.

В скобках вы видите значение умноженное на высоту value * doc_heigh. Здесь мы делаем умножение, которое упоминалось ранее, для того чтобы вычислить предполагаемую высоту панели. Например, первая запись нашего объекта имеет значение 0.25. Это число будет умножено на число, сохраненное в переменной doc_height.

Рядом с умножением этих двух переменных вы видите метод Math.floor(). Это округляет результат нашего умножения до ближайшего целого числа.

Итак, если сложить все вместе, если значение doc_height равно 5197, первая запись в нашем объекте умножит это на 0.25 , что даст нам результат 1299.25.

Метод Math.floor() округляет эту сумму до 1299. Это означает, что наш код теперь определяется как: $. (".Ufo_section") .height (1299);

С помощью этой строки jQuery найдет элемент с классом ufo_section и установит его высоту 1299 пикселей.

Ваш окончательный HTML и JavaScript код

Это ваш итоговый HTML и JavaScript код. Ваш завершенный файл «index.html» теперь должен содержать следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>

  <img class="background" src="images/background.svg">

  <div class="foreground">
    <div class="ufo_section"></div>
    <div class="spacer_one"></div>
    <div class="comet_section"></div>
    <div class="spacer_two"></div>
    <div class="landing_section"></div>
  </div>

<script>

  $(document).ready(function(){
    set_section_heights();
  });

  $(window).resize(function(){
    set_section_heights();
  });

  function set_section_heights(){

    var doc_height = $(".background").height();

    var section_heights = {
      "ufo_section": 0.25,
      "spacer_one": 0.03,
      "comet_section": 0.36,
      "spacer_two": 0.06,
      "landing_section": 0.298
    }

    $.each( section_heights, function( index, value ) {
      $( "." + index ).height( Math.floor(value * doc_height) );
    });

  }
  
</script>

</body>
</html>

Перезагрузите сайт и вы увидите код в действии, и когда вы проинспектируете HTML код, вы должны увидеть, что вновь рассчитанные размеры отображаются в строке:

Измените размер окна браузера, и вы увидите, как эти значения пересчитываются и обновляются:

Вот и всё вы справились!

Посмотрите на конечный результат! Теперь, когда вы начнете прокручивать с верхней части страницы вниз, вы увидите, что космический корабль начинает опускаться. Когда он достигает атмосферы, он ненадолго исчезает, и его место занимает «инопланетная комета», которая продолжает спуск. Ближе к вершине деревьев она снова исчезает, и «маленький зеленый человечек» завершает путешествие приземляясь на землю.

Как я упоминал ранее, было бы неплохо поэкспериментировать со значениями, установленными в объекте section_heights, чтобы вы могли увидеть, как они влияют на ход приземления на различных его этапах.

Надеюсь, вам понравился этот урок, и вы получили новые идеи, касающиеся работы с SVG изображениями и фиксированными фонами.

Еще раз спасибо Юлии за оригинальную векторную иллюстрацию, спасибо за чтение, и скоро увидимся!