Минимальные переходы между страницами с помощью jQuery и CSS

Внезапные изменения в интерфейсе трудно обработать пользователям. Лучший способ облегчить пользователю переход с текущей страницы на новую страницу, на которую он собирается перейти, - это использовать переход, и в этом руководстве я покажу вам, как именно это сделать.

CSS

  1. Настройте всю нашу страницу так, чтобы она начиналась с пустого состояния и переходила через keyFrames.
  2. Имейте fadeSiteOut класс, который мы добавим через JS после нажатия на ссылку, чтобы скрыть сайт.

JS

Здесь мы сделаем несколько вещей:

  • Автоматический переход между внутренними ссылками (на вашем сайте) без добавления класса вручную .
  • Если ссылка будет прокручиваться к содержимому текущей страницы, например <a href="#content">Go Here</a>, плавно прокрутите до него.
  • Если ссылка представляет собой mailto, например <a href="mailto:[email protected]">Email</a>, действуйте нормально.

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

  1. Прокрутите каждую ссылку на странице и сравните ее с URL-адресом на панели браузера.
  2. Сохраните ссылку.
  3. Проверьте, является ли ссылка href="#content".
  4. Получите ссылку и создайте цель, к которой мы хотим прокрутить.
  5. Прокрутите до содержимого на странице.
  6. Если ссылка href="mailto:[email protected]", действуйте как обычно.
  7. Если ссылка внутренняя, мы сразу же предотвратим переход по этой ссылке.
  8. Добавьте класс fadeSiteOut, чтобы страница исчезла.
  9. Подождите 0,5 секунды, пока анимация закончится, затем перейдите по ссылке.

Я надеюсь, что этот урок дал вам минимальный эффект перехода между страницами, который вы хотели. Любые вопросы просто задавали мне в Twitter.

Спасибо, что прочитали, надеюсь, вам понравилось 🤙 Я пишу о фрилансе, фронтенд-разработке и дизайне.

Вы можете найти меня в Twitter, Dribbble и Github.

Ищете внештатного веб-дизайнера и интерфейсного разработчика?
Ознакомьтесь с моими работами.