Кнопка в виде ЛОДКИ

Сего­дня мы абсо­лют­но низа­чем сде­ла­ем кноп­ку, кото­рая при нажа­тии пре­вра­ща­ет­ся в лод­ку и уплывает. 

Зачем? Да низа­чем. Про­сто так.

Кнопка в виде ЛОДКИ

Готовим страницу

Логи­ка про­ек­та будет такой:

  1. Созда­ём стра­ни­цу и под­клю­ча­ем к ней скрипт и CSS-стили.
  2. На этой стра­ни­це дела­ем общий кон­тей­нер, куда сло­жим всю буду­щую ани­ма­цию и кнопку.
  3. В этот кон­тей­нер кла­дём все дета­ли кораб­ля, пока невидимые.

При загруз­ке стра­ни­цы кноп­ка отри­су­ет­ся так, как будет напи­са­но у нас в сти­лях. Потом, при нажа­тии, мы транс­фор­ми­ру­ем кноп­ку в корабль с помо­щью скрип­та, а потом отпра­вим её уплы­вать за гра­ни­цу экрана.

Запи­шем всё это в виде кода.

<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Кнопка-путешественник</title>
  <!-- подключаем стили -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- основной контейнер -->
	<div id="container">
		<!-- блок с будущим корабликом -->
		<!-- сначала идёт мачта -->
		<div id="mast">
			<!-- паруса, которые на старте лежат в сложенном виде -->
			<div id="sail-1"></div>
			<div id="sail-2"></div>
		</div>
		<!-- кнопка, на которую нажимаем -->
		<button type="button" id="buttoun">Подтвердите заказ</button>
	</div>

	<!-- рабочий скрипт -->
  <script  src="./script.js"></script>
</body>
</html>

Задаём стили

В сти­лях будет хит­рость: мы зара­нее нари­су­ем все эле­мен­ты лод­ки, но они все будут спря­та­ны за нари­со­ван­ной кноп­кой. В нуж­ный момент мы про­сто доба­вим свой­ство транс­фор­ма­ции к мачте, пару­сам и самой кноп­ке, что­бы пре­вра­тить всё в корабль.

Един­ствен­ное новое свой­ство, кото­рое мы будем здесь исполь­зо­вать — transform: translate. Оно транс­фор­ми­ру­ет эле­мент так, как про­пи­са­но в пара­мет­рах — пово­ра­чи­ва­ет, умень­ша­ет мас­штаб и так далее. Мы сра­зу рису­ем эле­мен­ты на сво­их местах, как они долж­ны быть, а потом транс­фор­ми­ру­ем, что­бы они спря­та­лись за кнопку.

/* общие настройки для всей страницы */
body,
html {
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: grid;
	background: rgb(238, 174, 202);
	background: linear-gradient(
		30deg,
		rgba(238, 174, 202, 1) 0%,
		rgba(148, 187, 233, 1) 100%
	);
}

/* настройки основного блока */
#container {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	display: flex;
	transform: translatex(0px);
	transition: all 4.5s;
}

/* настоящая кнопка, которую мы нажимаем */
button {
	justify-self: center;
	align-self: flex-end;
}

/* убираем внешнюю границу настоящей кнопки, когда она в фокусе */
button:focus {
	outline: none;
}

/* как бы кнопка, которая будет превращаться в корабль */
/* за этой нарисованной поверх всего кнопкой и будет прятаться остальное */
#buttoun {
	width: 300px;
	height: 100px;
	border-radius: 10px 10px 10px 10px;
	border: none;
	background-color: rgb(100, 100, 200);
	z-index: 1;
	transition: all 1s;
	font-size: 19px;
	color: white;

}

/* мачта */
#mast {
	width: 12px;
	height: 160px;
	transform-origin: bottom;
	transform: translate(170px, 48px) rotatez(-90deg);
	background-color: rgb(100, 100, 200);
	transition: all 1s;
}

/* парус */
#sail-1 {
	width: 0;
	height: 0;
	border-bottom: 145px solid white;
	border-right: 60px solid transparent;
	transform-origin: bottom;
	transform: translatex(16px) scaley(0.001);
	transition: all 1s;
}

/* второй парус */
#sail-2 {
	width: 0;
	height: 0;
	border-bottom: 145px solid white;
	border-left: 100px solid transparent;
	transform-origin: bottom;
	transform: translate(-104px, -145px) scaley(0.001);
	transition: all 1s;
}

Пишем скрипт

Скрипт будет состо­ять из трёх частей:

  1. Полу­ча­ем доступ ко всем эле­мен­там стра­ни­цы по их ID — бла­го­да­ря это­му мы смо­жем менять их свой­ства и добав­лять новые CSS-команды.
  2. Добав­ля­ем обра­бот­чик нажа­тия на кнопку.
  3. При нажа­тии после­до­ва­тель­но под­ни­ма­ем мач­ту, пару­са, а затем отплываем.

👉 Что­бы доба­вить эле­мен­ту новый CSS-стиль, исполь­зу­ем свой­ство объ­ек­та .style.setProperty, в кото­ром про­пи­сы­ва­ем сна­ча­ла назва­ние свой­ства, а потом его зна­че­ние. Как толь­ко у эле­мен­та появ­ля­ет­ся свой­ство, кото­рое меня­ет его внеш­ний вид, оно меня­ет­ся не мгно­вен­но, а с зара­нее задан­ной ско­ро­стью ани­ма­ции. Это и даёт кар­тин­ке плав­ный и кра­си­вый эффект.

// получаем доступ ко всем элементам внутри страницы по их ID
const container = document.getElementById("container");
const buttoun = document.getElementById("buttoun");
const mast = document.getElementById("mast");
const sail1 = document.getElementById("sail-1");
const sail2 = document.getElementById("sail-2");

// отслеживаем нажатие на кнопку
// при нажатии запустится функция sail()
buttoun.addEventListener("click", sail);

// подготовка к отплытию — функция, которая сработает по нажатию кнопки
function sail() {
	// выводим надпись
	buttoun.innerText = 'Счастливого пути!'
	// превращаем кнопку в лодку
	buttoun.style.setProperty("border-radius", "10px 10px 100px 100px");
	// поднимаем мачту
	mast.style.setProperty("transform", " translate(170px, 48px) rotatez(-0deg)");
	// отдаём команду «Поднять паруса»
	setTimeout(hoist, 500);
}

// Поднимаем паруса
function hoist() {
	// поднимаем паруса
	sail1.style.setProperty("transform", "translatex(16px) scaley(1)");
	sail2.style.setProperty("transform", "translate(-104px, -145px) scaley(1)");
	// отдаём команду на отплытие
	setTimeout(sailaway, 1000);
}

// уплываем за экран
function sailaway() {
	// движемся на 150 пикселей правее правой границы экрана
	container.style.setProperty("transform", "translatex(calc(100vw - 150px)");
}

Посмот­реть ани­ми­ро­ван­ную кноп­ку на стра­ни­це проекта.

Что дальше

В сле­ду­ю­щий раз исполь­зу­ем коман­ду transform поплот­нее — сде­ла­ем про­ект, в кото­ром мож­но управ­лять с помо­щью стре­лок кла­ви­а­ту­ры любым эле­мен­том на стра­ни­це на чистом CSS. Под­пи­ши­тесь, что­бы не про­пу­стить новые проекты.

Текст:

Миха­ил Полянин

Редак­ту­ра:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев