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

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

В этом посте я расскажу о том, как я это делал.

Отображение основного изображения после загрузки

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

Это звучит очень просто, но размер изображения будет отличаться в зависимости от размера окна. Также вы когда-нибудь пытались сделать треугольник из div?

Чтобы решить задачу создания треугольника из div. Я использовал код ниже в CSS.

border-bottom: 500px solid black
border-left: 500px solid transparent

Создаваемый здесь треугольник находится исключительно за границей div без высоты и ширины. Чтобы убедиться, что эти треугольники проходят по изображению, необходимо применить несколько свойств CSS.

.triangle-topleft {
  position: absolute;
  top:0;
  right:0;
  z-index: 10
}

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

Для этого я добавил приведенную ниже функцию в функцию componentDidMount().

getWindowSize = () => {
    const windowWidth = window.innerWidth
    this.setState({windowWidthHeight: {
      width: windowWidth,
      height: windowWidth/1.5006321112515804
    }
  })

Эта функция получает внутреннюю ширину окна, и я знал, что высота изображения будет равна ширине окна, деленной на 1,5. Я установил эти два значения в состояние и передал эти значения в объект стиля, чтобы поместить их в два элемента.

const rightStyle = {
        borderBottom: `${this.props.windowWidthHeight.height}px solid black`,
        borderLeft: `${this.props.windowWidthHeight.width+1}px solid transparent`
    };

Теперь, когда эти треугольники будут иметь правильную ширину и высоту, мне нужно переместить эти треугольники с изображения при загрузке страницы.

Для этого я использовал ванильный Javascript и добавил новый класс к треугольникам после загрузки изображения. См. код ниже.

handleOnLoad = (event) => {
    document.getElementsByClassName('triangle-topleft')[0].className = 'goLeft triangle-topleft';
    document.getElementsByClassName('triangle-bottomright')[0].className = 'goRight triangle-bottomright'
  }

Классы goRight и goLeft работают именно так, как они звучат. Он перемещает изображения влево или вправо с помощью перехода.

.goLeft{
  right: 2000px;
  transition: right 1.5s ease-in;
}

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

#root {
  overflow: hidden;
}

Выпадающая панель навигации при загрузке

Это намного проще, чем анимация загрузки изображения, и требует очень похожих шагов. Во-первых, сделать так, чтобы панель навигации находилась над страницей при ее загрузке. Это легко сделать с помощью top:-4em . В зависимости от размера панели навигации размер может меняться.

Оттуда добавьте класс на панель навигации при загрузке значков.

document.getElementsByClassName('nav-ul')[0].className = 'moveNavDown nav-ul'

Теперь, когда класс загружен, осталось позаботиться о том, как панель навигации появится на экране с классом moveNavDown.

.moveNavDown {
  top:0;
  transition: top .7s ease-in
}

Вот и все! Очень просто добавить несколько анимаций, чтобы ваш сайт выглядел немного более профессионально.