Создавая мой личный сайт, я заметил, что он выглядит хорошо, когда все изображения и значки загружены, но до загрузки файлов была секунда или около того, где вместо значков были странные коробки. Затем главная фотография, которая была у меня при входе на сайт, загружалась за доли секунды, и когда это происходило, сайт прыгал на всю длину окна.
Чтобы скрыть эти неприятные характеристики, я использовал анимацию 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 }
Вот и все! Очень просто добавить несколько анимаций, чтобы ваш сайт выглядел немного более профессионально.