В настоящее время все больше и больше людей используют устройства Android и iOS для доступа к веб -сайтам больше, чем они используют свои настольные устройства. Итак, мобильный дизайн недавно очень часто привлекает наше внимание. Но одна вещь заставила меня задуматься, если мы сможем создать веб-сайты, помнящие о меньших портативных устройствах, тогда мы должны использовать некоторые мобильные функции, чтобы дать пользователям какой-то крутой опыт.
На большинстве веб -сайтов я видел, что меню гамбургера реализовано, чтобы скрыть навигации и сохранить немного места. Но они просто предоставляют кнопку, чтобы нажать, чтобы открыть меню гамбургера. Это просто не очень хорошо для меня. Это также был тот же случай на моем сайте. Недавно я внедрил действия, которое может открыть и закрыть меню, которое чувствует себя более естественным в мобильном сенсорном устройстве. И это похоже на это:
Разве это не круто? Круг показывает позицию прикосновения и на ощупь, он исчезает.
Большинство из вас, кто следит за мной, знает, что я люблю проводить учебные пособия, и вас также не будут разочарованы в этом посте, так как мы будем реализовать карту TODO, где скидка откроет кнопку Delete для этой карты. Так что без дальнейшего Adieu давайте прыгнем прямо в кодирование.
Но прежде чем начать, если вы хотите проверить этот код, это будет доступно на GitHub или Сбой . И размещенная версия этого будет доступна здесь . Вы должны действительно пойти и проверить размещенную версию с вашего телефона, чтобы просто почувствовать себя. Вот GIF, чтобы показать эту открытую работу:
Настройка папки
Для этого проекта не требуется причудливая настройка, вам просто понадобится файл HTML CSS -файл и файл JavaScript, все связанные с файлом HTML и помещены в одну папку. И, очевидно, вам следует использовать редактор кода для быстрого кода.
Написание начального HTML
Таким образом, наше приложение не нуждается в каком -то необычной HTML -макете, чтобы делать вещи. Это будет очень просто с div класс контейнер Завершая все. Внутри этого div будет div с классом карта И внутри это div У нас будет H3 с классом TODO_ESSEALSES который будет иметь наш текст Todo, просто чтобы сохранить код простым. Вы можете сделать это TODO_ESSEALSES a div И сделать этот макет сложным.
После этого нам нужно получить эту кнопку удаления собственного пространства в кнопка с классом Удалить , внутри, что мы будем положить кнопку с значком удаления. Я использовал Значок дизайна материала здесь. Чтобы разместить этот значок, нам нужно импортировать значки дизайна материала:
Тогда мы должны использовать пролет с классом MDI и MDI-Trash-Can-Outline сделать значок.
Итак, теперь наш HTML -файл выглядит примерно так:
Swipe Open Controls
Todo 001
Теперь давайте просто сделаем сайт красивым.
CSS
Поскольку это не учебник CSS, поэтому мы не сосредоточимся на CSS и просто сосредоточимся на необходимых вещах:
Так что сначала мы будем сбросить маржу и прокладку. И тогда мы будем устанавливать позиции, используя .контейнер , шрифты, тени, размер шрифта, края и прокладка:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #e9e9e9;
}
.container {
min-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 80%;
/* border: 2px solid black; */
display: flex;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
background-color: aliceblue;
}
.todo_essentials {
padding: 10px 20px;
}
.delete_button {
margin-left: auto;
display: block;
height: match-parent;
padding: 5px 20px;
background-color: #da0d25;
color: white;
outline: none;
border: none;
font-size: 1.3rem;
}
Теперь это будет время, чтобы обсудить, как работает этот скользящий механизм. Итак, здесь я просто установил Преобразование-аоригин Вправо (как наша кнопка находится на правой стороне экрана), затем установите Scalex к 0, используя Преобразование имущество. Затем я установил несколько анимаций и установил курсор на указатель для просмотра рабочего стола.
.delete-button{
/* rest of the stuff */
transform-origin: right;
transform: scaleX(0);
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
cursor: pointer;
}
Говоря о представлениях на рабочем столе, вот некоторые настройки, которые я использовал, чтобы показать кнопку Delete на Hover для настольных компьютеров:
.delete_button:hover,
.delete_button:focus {
background-color: #9c0315;
}
@media only screen and (min-width: 600px) {
.container {
min-width: 0;
max-width: 500px;
margin: 0 auto;
}
}
@media only screen and (min-width: 900px) {
.card:hover .delete_button {
transform: scaleX(1) !important;
}
}
Далее мы будем прыгать в мясо проекта, то есть материал JavaScript. Но до этого позвольте мне рассказать о доступных событиях Touch и о том, как мы будем их использовать.
События Touch, доступные в браузерах
Есть в основном четыре сенсорных события, для которых вы можете слушать:
1. TouchStart: Это обнаруживает начало Touch/Touch и Fires Eventlistener. Если вы видите объект события, доступный в Callback to Eventlistener, мы получаем список прикосновений, каждый из которых содержит некоторые координаты X и Y относительно экрана, окна, страницы и т. Д. Объект для прикосновения выглядит примерно так:
{
identifier: 0
target: div.card
screenX: 2661
screenY: 471
clientX: 273
clientY: 336
pageX: 273
pageY: 336
radiusX: 11.5
radiusY: 11.5
rotationAngle: 0
force: 1
}
2. Touchmove: Как следует из названия события, его стреляют, когда одно из начальных штрихов перемещается.
3. Touchend: Как следует из названия события, оно будет стрелять после окончания прикосновения, то есть ваш палец вылетел из экрана.
Там также есть еще одно событие Touch, о котором у меня мало знаний.
4. TouchCancel
Каждое из вышеперечисленных событий дает объект, где, по моему мнению, наиболее важными вещами являются касается , TargetTouches и Изменены . Я все еще изучаю сенсорные события и буду изучать и делиться большим количеством в будущем.
С учетом того, что основы событий прикосновения я теперь буду погружаться в кодирование нашего основного удара, что будет полагаться на простую концепцию: Когда начнется прикосновение, мы заметим, что начальный штрих x x of Прикосновение [0] Пользователь. Затем на ходу прикосновения мы возьмем x позицию Прикосновение [0] и найдет разницу между начальным прикосновением X и этим прикосновением. И когда ощущение заканчивается, если разница в конечной позиции x и начальной x составляет меньше 0, мы можем сказать, что был левый удар, и в противном случае мы можем сказать, что был правый удар. Объяснение можно найти с помощью диаграммы ниже:
Итак, давайте просто кодируем обработку прикосновения.
JavaScript
Чтобы начать все, нам понадобится ссылка карта и наш удалить кнопку Анкет Нам нужна ссылка на карту, чтобы добавить слушателей событий. Затем нам нужна ссылка на кнопку, чтобы показать и скрыть ее соответственно. Нам также понадобится логический, чтобы хранить, отображается ли кнопка или нет. Затем нам нужна переменная для хранения начальной позиции X и движения в x. Я также создаю константу для создания небольшого порога, чтобы устранить случайное обнаружение промахи. Пока этот код будет выглядеть так:
const card = document.querySelector(".card");
const theDeleteButton = document.querySelector(".delete_button");
const MOVE_THRESHOLD = 100;
let initialX = 0;
let moveX = 0;
let isDeleteButtonOpen = false;
Таким образом, следующим будет добавить слушателей событий к карте. Как говорилось ранее, на прикосновении мы получим начальную позицию X Touch в нашем начальный X переменная:
card.addEventListener("touchstart", e => {
initialX = e.touches[0].pageX;
});
Теперь, при движении, мы должны были получить текущую позицию и рассчитать движение. Это делается так, так как иногда позиция не обнаруживается должным образом в конце прикосновения (по крайней мере, для меня это не работает должным образом). Итак, код для Touchmove будет выглядеть как:
card.addEventListener("touchmove", e => {
let currentX = e.touches[0].pageX;
moveX = currentX - initialX;
});
Теперь в Touchend Событие нам нужно проверить, было ли это налево и или справа, проверив, если наш MOVEX Сумма была меньше или больше, чем MOVE_THRESHOLD умножено на знак Movex . Если наша ценность Movex меньше, чем рассчитанное MOVE_THRESHOLD Затем, как объяснено, мы сможем сказать, что смайки был левым ударом в противном случае, если наша ценность MOVEX больше, чем рассчитанное MOVE_THRESHOLD Тогда мы можем сказать, что это был справа. Тогда у нас есть ISDELETEBUTTONOPEN Boolean, который говорит, виден ли кнопка или нет.
Итак, если удары остались, а кнопка не была открыта, мы установили Scalex кнопки на 1 (как настройка Scalex 0 мы спрятали кнопку), а также устанавливаем ISDELETEBUTTONOPEN к истинному. И если удары были правильными, и кнопка была открыта, мы установили Scalex до 0. В конце не забудьте сбросить переменную, хранящую движение, в противном случае это может вызвать удивительное поведение. Итак, окончательный код для Touchend будет как:
card.addEventListener("touchend", e => {
if (moveX < MOVE_THRESHOLD * Math.sign(moveX) && !isDeleteButtonOpen) {
theDeleteButton.style.transform = "scaleX(1)";
isDeleteButtonOpen = true;
} else if (moveX > MOVE_THRESHOLD * Math.sign(moveX) && isDeleteButtonOpen) {
theDeleteButton.style.transform = "scaleX(0)";
isDeleteButtonOpen = false;
}
moveX = 0;
});
Таким образом, финальный проект будет работать правильно.
Вывод
Таким образом, это был простой учебник для использования жестов на веб -странице. Но вы можете многое построить на этом, например, настройка X Scale в соответствии с движением, или делать что -то более прохладное с различными жестами, возможно, в небольшой игре. Творчество бесконечно. Пока мой следующий пост не останется счастливым и не продолжайте кодировать. И помнить в нынешнем состоянии, оставайтесь дома, оставайтесь в безопасности.
Оригинал: “https://dev.to/ayushmanbthakur/mobile-first-design-with-swipe-controls-in-website-2n6p”