Анимация и переключение заголовков с помощью CSS

                    

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

Получить учебники для этого учебника

01. Начало работы

Чтобы воссоздать переключение текста, как показано на домашней странице Hassyadai, будет создана базовая компоновка HTML, которая была создана в папке «start» файлов учебников. Чтобы сделать изображения более крупными при опрокидывании, два класса создадут этот переход.

  .grow {
переход: все .7s простота в обращении;
}
.makeGrow {
transform: масштаб (1.3);
}  

02. Показать текст

Чтобы отобразить текст, «скрытый» класс будет динамически включаться и выходить из текстовых элементов. У этого просто нет непрозрачности. Из-за перехода на текстовые элементы непрозрачность будет затухать.

  .hidden {
непрозрачность: 0;
}
#главный,
#leftText,
#rightText {
переход: все .7s простота в обращении;
}  

03. Заставьте это работать

. Функциональность этого будет контролироваться с помощью JavaScript. Здесь код добавляется в теги скриптов в нижней части страницы. Код ссылается на все элементы на странице, которые необходимо контролировать, чтобы они были кэшированы в переменных.

  var over = false;
var middle = window.innerWidth / 2;
var grid = document.getElementById ("сетка");
var main = document.getElementById ("main");
var leftImg = document.
getElementById ( «leftImg»);
var rightImg = document.
getElementById ( «rightImg»);
var leftText = document.
getElementById ( «leftText»);
var rightText = document.
getElementById ( «rightText»);  

04. Возьмите мышь

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

  grid.onmouseover = function () {
main.classList.add ( «скрытый»);
over = true;
}
grid.onmouseout = function () {
main.classList.remove ( «скрытый»);
over = false;
}
document.onmousemove = function () {
var x = event.clientX;  

05. Влево или вправо

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

  if (over == true) {
если (x <средний) {
leftImg.classList.add ( «makeGrow»);
leftText.classList.remove ( «скрытый»);
rightImg.classList.remove ( «makeGrow»);
rightText.classList.add ( «скрытый»);
} else {
leftImg.classList.remove ( «makeGrow»);
leftText.classList.add ( «скрытый»);  

06. Over and out

Последняя часть кода — это восстановить все в нормальном состоянии в приведенном здесь выражении «else». Это восстанавливает текст, который будет невидимым, и изображения будут их обычного размера, если мышь не находится над контейнером.

  rightImg.classList.add («makeGrow»);
rightText.classList.remove ( «скрытый»);
}
} else {
leftImg.classList.remove ( «makeGrow»);
leftText.classList.add ( «скрытый»);
rightImg.classList.remove ( «makeGrow»);
rightText.classList.add ( «скрытый»);
}
}  

Эта статья была первоначально опубликована в Web Designer. Подпишитесь здесь .

Подробнее о пользовательском опыте

Создать Лондон