я сейчас делаю простенький сайт на реакт, и вот у меня, как у новичка возникла такая проблема. Я хотел сделать параллакс, допустим у меня есть горы, за ними еще горы и небо. Когда мышка двигается влево, то ближайшие горы двигаются быстрее,…
Изучите всё, необходимое фронтенд-разработчику: HTML, CSS, JS, а также React в связке с Redux. Ничего платить не придётся, пока не найдёте работу в Москве.
— Читать дальше «Обучение фронтенду с оплатой после трудоустройства»
…
Модальное окно можна закрыть (modalClose()) 4 разными способами: нажав на крестик (modalCloseIco), нажав на кнопку с надписью "Закрыть" (modalCloseBtn), нажав на фон модального окна (modalBackground) и нажав кнопку Escape.
modalC…
React – одна из самых популярных JavaScript-библиотек для разработки пользовательских интерфейсов. В этой статье вы найдете подборку бесплатных ресурсов о React: открытые курсы, подкасты, ёмкие конспекты и плейлисты YouTube.
…
Веб-проект, над которым вы работаете, стал медленнее загружаться? Рассказываем о десятке моментов, на которые стоит обратить внимание, чтобы сократить время загрузки страниц.
Существует множество причин, почему у пользователей может медленно загружаться сайт. Следуя лучшим практикам, можно, по крайней мере, смягчить проблему, убедившись, что мы сделали всё возможное.
CDN (Content Delivery Network) – географически распределённая сетевая инфраструктура, которая оптимизирует доставку контента конечным пользователям, давая доступ к сотням серверов по всему миру, размещающих копию
вашего сайта.
Если вы уже используете CDN, проверьте,
правильно ли вы настроили кэширование. Проблемы с кэшем могут привести к тому,
что CDN будет запрашивать ресурс у вашего сервера, а это противоречит
цели использования этой инфраструктуры.
В некоторых CDN gzip-сжатие можно включить флажком Enable. Сжатие файлов обеспечит более быструю загрузку контента пользователями сайта.
compression
Распространённая причина долгой загрузки страниц – избыточное качество изображений или выбор неподходящего формата. Можно уменьшить количество пикселей по каждой из сторон и применить сжатие изображений. Прогресс не стоит на месте – обратите внимание на формат сжатия изображений WebP.
Если у вас сайт на WordPress, можно использовать плагины, которые уменьшат размер автоматически в процессе загрузки.
Сократите число запросов, необходимых для загрузки верхней части страницы. Есть два способа:
Редиректы значительно
замедляют работу сайта. Чтобы не держать специальный поддомен для
мобильных пользователей, используйте адаптивный CSS.
Некоторые редиректы
неизбежны, например, www -> root domain или root domain -> www, но
основная часть трафика не должна поступать через перенаправления.
Время до первого байта (TTFB) –
это время, которое браузер тратит на ожидание данных с сервера после отправки запроса на ресурс.
На этот показатель влияют два параметра:
Первый параметр можно уменьшить, оптимизировав работу на стороне сервера: запросы к базам данных, вызовы API, балансировку нагрузки и т. д..
О втором параметре мы уже поговорили – на него мы можем повлиять, используя CDN.
Внешние скрипты часто блокируют загрузку страницы до
тех пор, пока не выполнятся сами. Этот эффект можно смягчить, пометив внешние скрипты директивой async:
https://example.com/external.js
Можно отложить
загрузку сценариев до тех пор, пока пользователь не начнёт совершать
активные действия:
window.addEventListener(
'scroll',
() =>
setTimeout(() => {
//insert marketing snippets here
}, 1000),
{ once: true }
);
Минимизация подразумевает
использование инструментов для удаления пробелов, символов перевода строки и
сокращения длины имён переменных. Как правило, это делается автоматически в рамках
процесса сборки. Есть специальные инструменты: например, UglifyJS для JavaScript или cssnano для CSS.
Чем больше проект, тем больше вероятность, что какой-то код стал неактуальным. И лучший способ его минимизировать и сократить время загрузки – просто удалить ненужный код.
Начиная с Chrome 59, в Chrome DevTools
можно анализировать использование JavaScript и CSS. Для этого откройте DevTools, перейдите во вкладку Console, нажмите на три точки и
откройте Coverage. При нажатии кнопки со значком перезагрузки будет проведен аудит использования CSS и JavaScript. Помеченные красным блоки кода загружаются, но не используются.
Если вы возьмете за
правило обращать внимание на проверку скорости загрузки, это станет гораздо меньшей проблемой.
Есть бесплатные
инструменты для мониторинга скорости, например, WebPageTest и Google Lighthouse. Но нужно не забывать запускать их до и после внесения изменений. Для автоматизации запуска GoogleLighthouse можно использовать PerfBeacon.
Несомненно, скорость
сайта – важный параметр. Важно следить за этим показателем и вносить по мере необходимости изменения в структуру веб-проекта. Но кроме скорости сайта поисковые системы оценивает полезность контента – в погоне за улучшением производительности сайта не забывайте о его наполнении.
Народ подскажите как будет выглядить код, как сделать прямоугольный треугольник понимаю, а оводку вокруг прямоугольного не выходит
<div class=”box arrow-top”>
This is a box with some content and an arrow at the top.
</div>
….
Основная структура модуля:
class RegisterForm extends Component {
render() {
const success = false;
return ( …
{!success ? ( … ) : ( … )}
)
}
}
как сделать такой же плавный скроллинг как на этом сайте,и чтобы он сохранил свою плавность на телефоне
сайт: https://rluijten.photography/
У меня в голове появилась идея сделать 3д сайт, и начал раздумывать, и пришёл к такой проблеме, как незнание того, как сделать так что бы пользователь на зажатый клик мог менять угол обзора
…
$(function(){
$(‘.faq__quest’).click(function(e) {
$(‘.faq__quest’).not(this).next().removeClass(‘show’).slideUp(550);
$(this).next().toggleClass(‘show’).slideToggle(550, function(){
$(‘.faq__quest’).toggleClass(“bgi”);
…
https://jsfiddle.net/sunsexsurf/gw3185to/6/
не работает клик при нажатии на значок бургер-меню
html
<!doctype html>
<html lang=”ru”>
<head>
<meta charset=”UTF-8″>
<!– адаптив–>
<meta name=”v…
Разбираем Svelte 3 — фреймворк для создания пользовательского интерфейса, который позаимствовал хорошие идеи из React и Vue и привнёс свои.
— Читать дальше «Краткое введение в Svelte 3»
…
Рассказываем, какие есть альтернативы reCAPTCHA и чем они лучше антиспам-сервиса от Google.
— Читать дальше «Я не робот: 10 альтернатив reCAPTCHA»
Представляем список полезных бесплатных ресурсов для создания веб-интерфейсов: иллюстрации, фото и видео, шрифты, цветовые палитры, иконки, анимации и прочие элементы 🐕
c306519b-…
Нужно в корневой элемент(#root) вставить очень большое количество цветных блоков(40тыс+). Пробовал вставлять фрагментами по 1000 через setTimeout(), но все равно зраузер виснет после 2-3к элементов
…
Изучите современные возможности JavaScript для клиентской разработки и получите все необходимые знания и готовый проект для трудоустройства.
— Читать дальше «Курс «JavaScript. Профессиональная разработка веб-интерфейсов»»
…
**Здравствуйте, помогите, пожалуйста, с выбором типа валидации для input. Желательно чистый js или того лучше какой-нибудь jquery плагин.
При клике на кнопку с пустым инпутом должна сработать валидация как указана на рисунке. И еще, вне ч…
Подскажите из за чего плывет верстка в safari на мобильных десктопах.
Кэш уже сбрасывал, ставил версии стилей, не помогло. Сайт https://forpost-dvery.ru
…
Делаю сайт на React и при создании компонентов изменяется позиционирование элементов
App.js
import React,{Component} from ‘react’;
import ‘./App.css’;
import Header from ‘./script/Header’;
import Nav from ‘./script/Nav’;
import Conte…
Галереи картинок с горизонтальной прокруткой выглядят современно и узнаваемо. Рассказываем, как с помощью CSS и JS перенести знакомую пользователям механику в ваши веб-приложения.
В этой статье мы реализуем два типа горизонтальных списков и галерею. Вначале в теоретической части опишем, какое поведение элементов интерфейса хотим получить. В практической части рассмотрим, как воплотить необходимую механику в CSS и JavaScript.
Приведённая ниже анимация иллюстрирует горизонтальный список со свободным скроллингом. Структуру можно свободно прокручивать влево и вправо. Список можно слегка оттягивать на крайних элементах. Это даёт подсказку пользователю о границах объекта.
Горизонтальный список со снэппингом – почти то же самое, но текущий элемент списка при тапе заменяется на следующий.
Оба элемента могут применяться я в сочетании, например, список со снэппингом для изображений, относящихся к одному сюжету или пользователю, а список с прокруткой – для быстрого перемещения между такими разделами.
Третий рассматриваемый элемент – галерея. Она похожа на snapping-списки, но каждый элемент занимает всё поле, как в обычном посте Instagram из нескольких фотографий. Под картинками расположен ряд точек – по одной для каждого изображения. Пользователю понятно, что есть другие изображения и какое из них видно в данный момент.
Для горизонтального списка используем flexbox, которому разрешим горизонтальный скроллинг. Размер элементов списка
укажем явно, как и зазор между ними. Поля установим бо́льшими, чем зазор, чтобы видеть, когда мы докрутили до начала или конца списка.
.list {
display: flex;
padding: 20px;
overflow-x: scroll;
}
.item {
height: 224px;
width: 125px;
flex-shrink: 0;
}
.item:not(:last-child) { margin-right: 10px; }
Интерактивное представление и полный код доступны в в
сэндбоксе:
Работает, но
можно улучшить.
Поведение при прокрутке влево. В некоторых браузерах свайп влево повторяет действие кнопки «Назад». Такое поведение можно предотвратить, установив для overscroll-behavior значение contain.
Полосу прокрутки можно скрыть, установив overflow-x в auto. Однако при скроллинге полоса вновь появится. Чтобы скрыть полностью, можно установить scrollbar-width в none. На момент написания статьи это работало только в Firefox. Для других браузеров придется добавить трюкачества в CSS:
.list { -ms-overflow-style: none; }
.list::-webkit-scrollbar { display: none; }
Плавная прокрутка. В iOS не хватает
стандартной плавной прокрутки (momentum scrolling). Потребуется добавить -webkit-overflow-scrolling:.
touch;
Предотвращение
вертикальной прокрутки. Мы можем прокручивать
страницу по вертикали. Эту возможность лучше
отключить для пользователей мобильных устройств, добавив к списку touch-action:. Однако если список покрывает всю видимую область просмотра, а на странице есть что-то ещё, эти элементы станут недоступны. То есть такой вариант надо использовать с осторожностью.
pan-x
В результате наших преобразований соответствующая часть CSS теперь будет иметь следующий вид:
.list {
display: flex;
overflow-x: scroll;
padding: 20px;
/* Предотвращает случайное использование "Назад"*/
overscroll-behavior: contain;
/* Скрывает полосу прокрутки */
scrollbar-width: none;
-ms-overflow-style: none;
/* Плавная прокрутка на iOS */
-webkit-overflow-scrolling: touch;
/* Отключает вертикальный скроллинг для тач-устройств */
touch-action: pan-x;
}
/* Скрывает полосу прокрутки */
.list::-webkit-scrollbar {
display: none;
}
.item {
height: 224px;
width: 125px;
flex-shrink: 0;
}
.item:not(:last-child) {
margin-right: 10px;
}
/* фикс для отступов в конце списка */
.item:last-child {
position: relative;
}
.item:last-child::after {
position: absolute;
left: 100%;
height: 1px;
width: 20px;
display: block;
content: "";
}
А результат выглядит вот так (там же полный код примера):
Для описания этого типа списков отталкиваемся от списка со свободной прокруткой. Сначала сообщаем списку, когда нужно останавливаться:
.list {
scroll-snap-type: x mandatory;
}
Элементам списка добавляем опцию scroll-snap-align: start. Чтобы дать подсказку, следующий элемент может немного «выглядывать» из-за края экрана. Для этого достаточно установить отступ прокрутки: scroll-padding-inline-start:. Если хочется свайпнуть
20px
одним движением несколько элементов,
можно добавить scroll-snap-stop: always к элементам списка, но не все браузеры пока
такое поддерживают.
Код полностью также выложен на Codesandbox:
Если мы сделаем наш
предыдущий список таким же широким, как область прокрутки, и удалим отступы, он будет выглядеть и вести себя примерно так же, как галерея
Instagram. За исключением маленьких точек. Без точек будет выглядеть так:
Но как мы поясняли в теоретической части, эти маленькие точки – полезный графический приём. Получается, что нам нужно следить за тем, какой из элементов списка сейчас виден. Наиболее простой способ – использовать IntersectionObserver.
Составим список
точек, каждая из которых соответствует одной из картинок. Когда она пролистывается в списке, мы получаем индекс элемента и устанавливаем
индикаторную точку с соответствующим индексом в активное положение.
Вот как это будет
выглядеть:
// ссылки на элементы DOM
const list = document.querySelector('.list');
const items = Array.from(document.querySelectorAll('.item'));
const indicators = Array.from(document.querySelectorAll('.indicator'));
// создание наблюдателя
const observer = new IntersectionObserver(onIntersectionObserved, {
root: list,
threshold: 0.6
});
// наблюдаем за каждым элементом
items.forEach(item => {
observer.observe(item);
});
// когда observer обнаруживает изменение записи
// (пункт, входящий в список)
// и эта запись пересекается,
// получаем индекс пересекающегося элемента
// устанавливаем нужный индикатор в активное положение
function onIntersectionObserved(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const intersectingIndex = items.indexOf(entry.target);
activateIndicator(intersectingIndex);
}
});
}
function activateIndicator(index) {
indicators.forEach((indicator, i) => {
indicator.classList.toggle('active', i === index);
});
}
Полный результат также доступен в сэндбоксе:
Мы разобрали несколько
вариаций построения горизонтальных списков изображений. У приведённых решений есть и свои недостатки, и преимущества. Поскольку используется нативная
прокрутка, нет возможности настроить способ движения, мы не можем
контролировать «липкость» ползунка (в этом случае правильнее было бы использовать решение на
JavaScript). Кроме того, в нашем решении мы использовали не самые стандартные подходы в CSS. Однако объём кода невелик, и он работает даже в старых браузерах.
Галереи картинок с горизонтальной прокруткой выглядят современно и узнаваемо. Рассказываем, как с помощью CSS и JS перенести знакомую пользователям механику в ваши веб-приложения.
В этой статье мы реализуем два типа горизонтальных списков и галерею. Вначале в теоретической части опишем, какое поведение элементов интерфейса хотим получить. В практической части рассмотрим, как воплотить необходимую механику в CSS и JavaScript.
Приведённая ниже анимация иллюстрирует горизонтальный список со свободным скроллингом. Структуру можно свободно прокручивать влево и вправо. Список можно слегка оттягивать на крайних элементах. Это даёт подсказку пользователю о границах объекта.
Горизонтальный список со снэппингом – почти то же самое, но текущий элемент списка при тапе заменяется на следующий.
Оба элемента могут применяться я в сочетании, например, список со снэппингом для изображений, относящихся к одному сюжету или пользователю, а список с прокруткой – для быстрого перемещения между такими разделами.
Третий рассматриваемый элемент – галерея. Она похожа на snapping-списки, но каждый элемент занимает всё поле, как в обычном посте Instagram из нескольких фотографий. Под картинками расположен ряд точек – по одной для каждого изображения. Пользователю понятно, что есть другие изображения и какое из них видно в данный момент.
Для горизонтального списка используем flexbox, которому разрешим горизонтальный скроллинг. Размер элементов списка
укажем явно, как и зазор между ними. Поля установим бо́льшими, чем зазор, чтобы видеть, когда мы докрутили до начала или конца списка.
.list {
display: flex;
padding: 20px;
overflow-x: scroll;
}
.item {
height: 224px;
width: 125px;
flex-shrink: 0;
}
.item:not(:last-child) { margin-right: 10px; }
Интерактивное представление и полный код доступны в в
сэндбоксе:
Работает, но
можно улучшить.
Поведение при прокрутке влево. В некоторых браузерах свайп влево повторяет действие кнопки «Назад». Такое поведение можно предотвратить, установив для overscroll-behavior значение contain.
Полосу прокрутки можно скрыть, установив overflow-x в auto. Однако при скроллинге полоса вновь появится. Чтобы скрыть полностью, можно установить scrollbar-width в none. На момент написания статьи это работало только в Firefox. Для других браузеров придется добавить трюкачества в CSS:
.list { -ms-overflow-style: none; }
.list::-webkit-scrollbar { display: none; }
Плавная прокрутка. В iOS не хватает
стандартной плавной прокрутки (momentum scrolling). Потребуется добавить -webkit-overflow-scrolling:.
touch;
Предотвращение
вертикальной прокрутки. Мы можем прокручивать
страницу по вертикали. Эту возможность лучше
отключить для пользователей мобильных устройств, добавив к списку touch-action:. Однако если список покрывает всю видимую область просмотра, а на странице есть что-то ещё, эти элементы станут недоступны. То есть такой вариант надо использовать с осторожностью.
pan-x
В результате наших преобразований соответствующая часть CSS теперь будет иметь следующий вид:
.list {
display: flex;
overflow-x: scroll;
padding: 20px;
/* Предотвращает случайное использование "Назад"*/
overscroll-behavior: contain;
/* Скрывает полосу прокрутки */
scrollbar-width: none;
-ms-overflow-style: none;
/* Плавная прокрутка на iOS */
-webkit-overflow-scrolling: touch;
/* Отключает вертикальный скроллинг для тач-устройств */
touch-action: pan-x;
}
/* Скрывает полосу прокрутки */
.list::-webkit-scrollbar {
display: none;
}
.item {
height: 224px;
width: 125px;
flex-shrink: 0;
}
.item:not(:last-child) {
margin-right: 10px;
}
/* фикс для отступов в конце списка */
.item:last-child {
position: relative;
}
.item:last-child::after {
position: absolute;
left: 100%;
height: 1px;
width: 20px;
display: block;
content: "";
}
А результат выглядит вот так (там же полный код примера):
Для описания этого типа списков отталкиваемся от списка со свободной прокруткой. Сначала сообщаем списку, когда нужно останавливаться:
.list {
scroll-snap-type: x mandatory;
}
Элементам списка добавляем опцию scroll-snap-align: start. Чтобы дать подсказку, следующий элемент может немного «выглядывать» из-за края экрана. Для этого достаточно установить отступ прокрутки: scroll-padding-inline-start:. Если хочется свайпнуть
20px
одним движением несколько элементов,
можно добавить scroll-snap-stop: always к элементам списка, но не все браузеры пока
такое поддерживают.
Код полностью также выложен на Codesandbox:
Если мы сделаем наш
предыдущий список таким же широким, как область прокрутки, и удалим отступы, он будет выглядеть и вести себя примерно так же, как галерея
Instagram. За исключением маленьких точек. Без точек будет выглядеть так:
Но как мы поясняли в теоретической части, эти маленькие точки – полезный графический приём. Получается, что нам нужно следить за тем, какой из элементов списка сейчас виден. Наиболее простой способ – использовать IntersectionObserver.
Составим список
точек, каждая из которых соответствует одной из картинок. Когда она пролистывается в списке, мы получаем индекс элемента и устанавливаем
индикаторную точку с соответствующим индексом в активное положение.
Вот как это будет
выглядеть:
// ссылки на элементы DOM
const list = document.querySelector('.list');
const items = Array.from(document.querySelectorAll('.item'));
const indicators = Array.from(document.querySelectorAll('.indicator'));
// создание наблюдателя
const observer = new IntersectionObserver(onIntersectionObserved, {
root: list,
threshold: 0.6
});
// наблюдаем за каждым элементом
items.forEach(item => {
observer.observe(item);
});
// когда observer обнаруживает изменение записи
// (пункт, входящий в список)
// и эта запись пересекается,
// получаем индекс пересекающегося элемента
// устанавливаем нужный индикатор в активное положение
function onIntersectionObserved(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const intersectingIndex = items.indexOf(entry.target);
activateIndicator(intersectingIndex);
}
});
}
function activateIndicator(index) {
indicators.forEach((indicator, i) => {
indicator.classList.toggle('active', i === index);
});
}
Полный результат также доступен в сэндбоксе:
Мы разобрали несколько
вариаций построения горизонтальных списков изображений. У приведённых решений есть и свои недостатки, и преимущества. Поскольку используется нативная
прокрутка, нет возможности настроить способ движения, мы не можем
контролировать «липкость» ползунка (в этом случае правильнее было бы использовать решение на
JavaScript). Кроме того, в нашем решении мы использовали не самые стандартные подходы в CSS. Однако объём кода невелик, и он работает даже в старых браузерах.
**Объясните, пожалуйста, за счет какой функции реализуются подобное (желательно js / jquery) с учетом активного состояния кнопки “Доставка” по умолчанию? Т.е. пока активна кнопка “Доставка” должен отображать первый вариант макета, в ин…
По клику на кнопку Change color выпадает компонент с div-ами цветами
Компонент модального окна
<template>
<transition name=”modal-fade”>
<div class=”modal-backdrop”>
<div class=”container”&…
Я писал регулярное выражение, которое находит в строке символ, который является: длинным тире (–), обычным тире (-), или буквой ‘А’.
Получился RegExp: /[–-А]/, но при его создании вылезает ошибка:
Uncaught SyntaxError: Invalid regular ex…
Выпадающие списки и родственные им элементы встречаются в любых графических интерфейсах – к месту и невпопад. В этом посте иллюстрированный свод правил – когда и как их использовать.
…
Есть калькулятор, когда ввожу в него числа с клавиатуры, фокусировка следует за символами, а когда я ввожу числа с кнопок <div>Вводимая Цифра</div> у меня фокус не следует за вводимыми пользователем символами, и из-за этого у м…
Подборка YouTube-каналов, плейлистов и подкастов, посвящённых фронтенду: вёрстка, JS, библиотеки и фреймворки, уроки и скринкасты, доклады на конференциях и записи встреч локальных сообществ. Приятного просмотра!
…
Более 200 докладов в 30 разных секциях. Всего 6 крупных направлений: разработка, диджитал, карьера и образование, тренды, менеджмент и IT и государство.
— Читать дальше «Конференция «Стачка-2020»»
…
Использую Highcharts. У меня есть ось Y с рейтингом и ось X с датами. Я хочу перевернуть ось Y, и в этом мне призван помочь параметр:
yAxis: {
reversed: true
}
Но у меня, помимо прочего, есть fillColor, который тоже переворачивается…
Свежие комментарии