Достигните расширяемого, многослойного эффекта параллакса с прокруткой за несколько минут

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

• Каждая страница вашего сайта должна начинаться с <article> для правильного определения содержания.
• Раздел заголовка каждой страницы обозначается тегом <header>. Здесь страница будет отдыхать при прокрутке после нажатия одной из кнопок навигации.
• <nav> — это место для размещения навигационных ссылок. Конечно, вы можете создать свой собственный, но это уже готовые версии.

Чтобы добавить новую страницу, вам нужно отредактировать три файла:

• HTML-документ
  • Добавьте новую страницу, содержащую, например, <article> и уникальный идентификатор — id = ”page-number-5 ″.
  • Обновите элемент навигации предыдущей страницы, чтобы включить новую страницу. Ссылка на имя, которое вы дали.
• CSS документ
  • В разделе «контентная статья» добавьте свой идентификатор страницы в список
  • Добавьте новый тег # page-number-5 (или как вы назвали свою страницу) под тегом «content article». Сделайте положение абсолютным и высоту с шагом 1090 пикселей — так, пятая страница будет высотой: 4360 пикселей; В качестве примера.
• Parallax.js
  • Добавьте новую функцию для новой страницы (не волнуйтесь! Это проще, чем кажется!)
  • Просто скопируйте и вставьте функцию «page-number-4» и переименуйте идентификатор внутри нее.

Проверьте готовую версию этого шага в файле «02-add-content.html» из загружаемых ресурсов.

Шаг 4: Добавление фоновых изображений

Под своим контентом и над закрывающим тегом </ body> добавьте этот код:

<div id="parallax-bg1">
<img id="bg1-1" src="img/cloud1.png" alt="cloud"/>
<img id="bg1-2" src="img/cloud2.png" alt="cloud"/>
<img id="bg1-3" src="img/cloud1.png" alt="cloud"/>
<img id="bg1-4" src="img/cloud2.png" alt="cloud"/>
<img id="bg1-5" src="img/cloud1.png" alt="cloud"/>
</div>

Это добавляет изображения в фоновом режиме или в «самом дальнем» слое. Другими словами, эти изображения движутся меньше всего. Вы можете индивидуально расположить каждое изображение, используя документ CSS. Просто откройте документ CSS и выполните поиск «фонового изображения», и вы увидите, как он расположен.

Чтобы добавить новое изображение, вам нужно будет продублировать и переименовать новый атрибут CSS для каждого изображения.

Смотрите файл «03-background-images.html» в загрузке для завершения шага.

Шаг 5: Добавление изображений Midground

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

<div id="parallax-bg2">
<img id="mg2-1" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-2" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-3" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-4" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-5" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-6" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-7" src="img/cloud3.png" alt="cloud"/>
</div>

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

Вы можете редактировать положение каждого элемента в файле CSS в разделе «изображение среднего плана». Смотрите последний фрагмент в файле «04-midground-images.html» в загрузке.

Шаг 6: Добавление изображений переднего плана

Вы должны быть чемпионом в этом сейчас. То же, что шаги 5 и 6:

<div id="parallax-bg3">
<img id="fg3-1" src="img/twitter.png" width="529" height="386" alt="Big freaking Twitter bird"/>
<img id="fg3-2" src="img/facebook.png" width="603" height="603" alt="Facebook in your face!"/>
<img id="fg3-3" src="img/linkedin.png" width="446" height="446" alt="LinkedIn logo"/>
<img id="fg3-4" src="img/landscape.png" width="1104" height="592" alt="Landscape foreground"/>
<img id="fg3-5" src="img/design-festival-logo.png" width="135" height="136" alt="Bluified Design Festival logo"/>
</div>

Еще раз, положение может быть легко отредактировано для этих изображений в документе CSS в разделе «изображения переднего плана».

Смотрите готовый шаг в файле «05-foreground-image.html» с файлами.

Шаг 7. Добавление элементов навигации (необязательно)

Я только добавляю этот шаг, потому что Джонатан Николь проделал такую ​​большую работу, что я подумал, что стоит сохранить его идею в этом уроке. Вы можете разместить этот код в любом месте внутри <body>, но мне нравится держать его сверху (но под открывающим div содержимого):

<nav id="primary">
<ul>
<li>
<h1>Intro</h1>
<a class="page-number-1" href="#page-number-1">View</a>
</li>
<li>
<h1>Wow!</h1>
<a class="page-number-2" href="#page-number-2">View</a>
</li>
<li>
<h1>More stuff...</h1>
<a class="page-number-3" href="#page-number-3">View</a>
</li>
<li>
<h1>Last page!</h1>
<a class="page-number-4" href="#page-number-4">View</a>
</li>
</ul>
</nav>

Если вам нужно больше страниц, это так же просто, как добавить еще один <li> и ваш контент. Убедитесь, что якорный текст обновлен правильно, и все готово.

Версия с навигационным кодом «06-navigation.html» в файлах ресурсов.

Вывод

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