Как сделать переход на другую страницу в html с задержкой
Добавил пользователь Валентин П. Обновлено: 04.10.2024
Когда пользователь наводит курсор на объект или нажимает на него, псевдокласс hover срабатывает мгновенно. Чтобы как-то сгладить переход, необходимо использовать анимацию. Приведем простой пример ссылки:
Теперь сгладим переход цвета фона при наведении курсора на ссылку. Для этого будем использовать три свойства: transition-property , transition-duration и transition-timing-function . Первое указывает на свойство, к которому мы применяем переход. Второе указывает продолжительность перехода. Третье указывает скорость перехода, в зависимости от времени.
В нашем примере устанавливается переход для свойства background , длительностью 1s и с временной функцией ease . Если необходимо установить плавный переход для всех свойств, то замените конкретное свойство на all , то есть таким образом: transition-property: all .
Теперь рассмотрим значения, которые может принимать свойство transition-timing-function . Достаточно тяжело описать работу каждого значения, поэтому просто их перечислю: ease , linear , ease-in , ease-out , ease-in-out и cubicbezier . Чтобы понять, чем они отличаются, попробуйте каждый по очереди. Для упрощения кода эти три строчки можно записать одной. Далее равнозначный пример:
Приведенные ранее примеры небыли кроссплатформенными. Чтобы свойство transition корректно работало во всех браузерах, необходимо добавлять специальные приставки (вендорные префиксы). Вот основные:
- -webkit- для Chrome, Safari и всех браузеров, написанных на движке WebKit;
- -o- для Opera;
- -moz- для Firefox;
- -ms- для браузеров Microsoft.
Используются они следующим способом:
Кстати, в свойстве transition можно перечислять значения через запятую, например, вот так:
Возможно, кто-то задается вопросом, почему бы не использовать JavaScript? Использовать его можно, но зачем усложнять себе жизнь, когда имеется возможность решить задачу средствами CSS.
В материале ниже я опишу шесть способов как сделать редирект страницы. Не сомневаюсь, что уже многие слышали о таком понятии как редирект, и примерно знают для чего он нужен. Но как его правильно сделать знают не все. Данный материал не представляет собой исчерпывающий набор редиректов — это всего лишь несколько наиболее популярных видов и способов редиректа.
Что такое редирект
Для чего нужен редирект? Основная функция для перенаправление посетителей с одного сайта на другой (с одной страницы на другую).
Причиной этому могут служить разные обстоятельства, например смена раскрученного домена, арбитраж трафика, работа с партнерскими программами.
Суть работы редиректа следующая — пользователь набирает один адрес сайта, нажимает ENTER, и попадает на совершенно другой сайт.
Давайте рассмотрим следующие виды редиректа:
Как сделать редирект страницы. Способ 1 — PHP-редирект.
Этот редирект срабатывает без загрузки странички.
Страничка на которую идёт редирект — получает оригинальный REFERER (т.е. таким образом не скрыть откуда был редирект).
Данный редирект например можно использовать для Ютуба. Ютуб как известно можно связать только с одним сайтом, соответственно на чужой сайт вы не сможете сделать ссылку. Для обхода этого ограничения создаете отдельный подкаталог на своем домене, в него кладете index.phd с прописанным кодом редиректа.
Рекомендую прочитать мою статью YouTube — инструмент для заработка в интернете, в которой я подробно прошелся о преимуществах использования Ютуба.
301 и 302 редирект особой разницы не имеют для арбитражника (обычно в SEO больше) — но некоторые рекламные сети принципиально пропускают только один из редиректов. Технически 301 обозначает временный редирект, а 302 — постоянный редирект. Указать можно третьим параметром функции код редиректа, например 302 (второй должен быть true, параметры идут через запятую):
Способ 2. htaccess-редирект
Этот редирект делается простым помещением файла .htaccess в папку где нужно сделать редирект.
Например, редирект любого url (из папки где .htaccess) на нужный адрес, вот содержимое .htaccess:
Возможны более сложные редиректы, но такой вариант по своей сути — такой же как и header-редирект (если указывается внешний URL). Возможны вариант переадресации файла — вместо (.*) указать к примеру имя go — будет редиректить адрес go и т.п. Можно указать в одном файле несколько строчек RewriteRule подряд с разными правилами — тогда не нужно писать каждый раз RewriteEngine On.
Способ 3. Простейший javascript-редирект.
Оформляется так (в секции или ):
Если на страничке установлен код Яндекс.Метрики — он скорее всего не успеет сработать и засчитать посетителя, т.к. подобный редирект срабатывает быстрее метрики.
Способ 4. META-refresh-редирект.
Считается одним из наименее надёжных редиректов, но тоже используется, особенно там где нельзя вставить Javascript-код. Также срабатывает уже только после загрузки странички, как и javascript-редирект.
Код нужно вставлять в секцию HTML-странички:
Также делается с задержкой. Можно попробовать менять значение задержки (вместо цифры 1 — указать другое время, 0, 5 секунд и т.п.)
В основном этот вариант не рекомендуется к использованию.
Способ 5. Javascript-редирект с задержкой.
Этот вариант больше подходит если нужно сначала выполнить какой-то Javascript-код (например Метрики и т.п.) — а потом редиректить.
Не слишком надёжный способ выполнения задержки, т.к. у всех на компьютерах скорость выполнения Javascript может быть разной, но это лучше чем ничего. Т.е. можно рядом поставить код метрики и к примеру задержку в 300 миллисекунд — код Метрики скорее всего успеет выполниться и потом будет редирект.
Таким образом, можно пробовать использовать и этот редирект для учёта достижения целей в метрике например и др.
В данном случае код сработает через 300 миллисекунд (1000 = 1 секунда). Не очень удобно может быть и для посетителя, но если нужен учёт метрикой (и не используются цели на предыдущей страничке на клик по кнопке и т.п.) — это тоже вариант.
Способ 6. Псевдоредирект через IFRAME или FRAMESET.
Почему псевдоредирект? Потому что по факту редиректа не происходит, а просто в фрейме грузится нужная страничка.
Даже если растянуто на всю страничку, а основная страница не содержит кода или содержит минимальный код (например, Метрика или счётчик).
Как правило, такой редирект, не детектируется рекламными сетями, которые не пропускают редиректные ссылки (например Яндекс.Директ), а в URL-строке видно только адрес оригинальной странички с кодом, а не той что грузится во фрейме.
Вариант А — через FRAMESET:
Заголовок странички
Ваш браузер не поддерживает отображение фреймов
— в этом случае нельзя разместить другой код (метрику, счётчики и т.п.) на самой страничке, т.к. он все равно не выполнится
Автоматическое перенаправление на другую страницу осуществляется при помощи простого скрипта. Итак есть несколько скриптов для автоматического перенаправления пользователей с одного сайта на другой:
1. Автоматический без согласия пользователя:
2. Автоматический с согласия пользователя на переход:
Впрочем, как видите ничего сложного, два простых кода размещаете на любой странице своего сайта.
3. 301-й редирект
Еще один простой вариант перенаправления с одной страницы на другую. В основном 301-й редирект используется, при переносе сайта с одного домена на другой. Кроме этого можно использовать для переноса контента с одной страницы на другую.
На такой платформе, как WordPress нужно устанавливать специальный плагин. Что касается Blogger, то здесь немного проще, однако и в Блоггере есть минусы, например вы легко можете настроить 301-й редирект с одной страницы вашего блога на другую страницу вашего же блога, но сделать редирект с одной страницы вашего блога на страницу другого вашего блога не выйдет. Но есть возможность использовать 301 директ при переезде с Блоггера на WordPress, опять таки с помощью плагинов.
Для настройки 301-го редиректа в Блоггере откройте Настройки - Настройки поиска - Пользовательские переадресации - Изменить - Новая переадресация.
Берем часть ссылки выделенную жирным /2020/04/tekst.html
В строке "Куда" ставим ссылку на перенаправляемую, так же берем только ту часть ссылки, которая идет после названия домена.
Ставим галочку напротив "Всегда" и "Сохраняем изменения".
Допустим, вы хотите сдвинуть элемент при :hover для создания забавного визуального эффекта.
Классно! Но что если у вас есть несколько пунктов списка и вы хотите чтобы все они сдвигались при наведении, но каждый из них бы смещался пошагово по времени?
Хитрость заключается в transition-delay и применении разной задержки для каждого элемента. Давайте выберем каждый пункт списка по отдельности и применим к ним разные задержки. В данном случае мы выбираем вложенный просто для удовольствия.
Если вы хотите дать себе чуть больше программистского контроля, то можете установить задержку как пользовательское свойство CSS.
Всё это может показаться немного капризным на ваш вкус. Скажем, ваш список вырастет, допустим, до семи или более пунктов и пошаговые переходы неожиданно перестанут работать для новых пунктов списка, поскольку здесь не учитывается их количество.
Так что при желании вы можете передать задержку из HTML.
Или, если вы склоняетесь к Sass, то могли бы создать цикл с большим количеством пунктов, чем нужно в данный момент (зная, что дополнительный код довольно эффективно сожмётся).
Это может оказаться полезным, независимо от того, какой размер цикла вы выбираете.
Читайте также: