Небольшая веб-страница, написанная с помощью HTML и CSS, с использованием JavaScript

Сайт "Записки путешественника" с набором интересных пейзажей

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

Страница содержит два блока. Первый блок - 5 "записок путешественника" с изображениями и анимацией. Второй блок содержит слайдер из 10 картинок. Слайдер увеличивается при наведении курсора.

Сайт доступен по ссылке: https://ellvenro.github.io/web_places/

Функциональность сайта

Сайт был адаптирован под различный расширения устройств:

• для мобильных устройств (до 768 пикселей);
• для планшетов (от 768 до 1024 пикселей);
• для ноутбуков и компьютеров (от 1024 пикселей и выше).

Была реализована анимация объектов при скролле и при наведении курсора. С помощью этого создан выпадающий список, кнопки и слайдер.

Основные моменты при реализации

Все использованные шрифты были подключены из внешних файлов.

@font-face {
	font-family: 'Segoe Script Normal';
	font-style: normal;
	font-weight: normal;
	src: local('Segoe Script Normal'), url('../fonts/segoesc.ttf');
}

Простая анимация при наведении и нажатии кнопки мыши была осуществлена с помощью CSS-стилей (были использованы псевдо-классы :hover и :active):

• реализация кнопки "Наверх";

#button {
  ...
  background-color: #050505;
  border: 2px solid #050505;
  border-radius: 50%;
  ...
}

#button:hover {
  box-shadow: 0 0 3vw #202020;
  border: 2px solid #303030;
  transform: scale(0.9);
}

#button:active {
  background-color: #cccccc;
  transform: scale(1.3);
}

• реализация выпадающего списка;
• реализация увеличения слайдера.

Анимация при скролле и слайдер были созданы с помощью добавления класса active к анимируемым объектам при помощи языка JavaScript. Класс active был отдельно описан с помощью CSS-стилей.

// Добавление всех анимируемых блоков, объединенных классом .main_bloks, в массив
const blocks = document.querySelectorAll('.main_bloks');

function animEvent()
{
  for(block of blocks)
  {
    // Определение расстояния от верхней части страницы до блока
    const animItemOffset = offset(block);
    // Коэффициент для реализации анимации
    const animStart = 2;
    // Точка начала анимации
    let animItemPoin = window.innerHeight - window.innerHeight / animStart;

    if ((pageYOffset > animItemOffset - animItemPoin) && (pageYOffset < animItemOffset))
    {
      block.classList.add('active');
    }
    else
    {
      block.classList.remove('active');
    }
  }
}

// Вызов функции, описанной выше, при скролле
window.addEventListener('scroll', animEvent);

Адаптация сайтов реализована с помощью медиа-запросов.

@media only screen and (min-width: 1024px) {
  /* CSS-стили для ширины экрана, большей 1024px */
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* CSS-стили для ширины экрана от 768px до 1024px */
}

@media only screen and (max-width: 768px) {
  /* CSS-стили для ширины экрана до 768px */
}