Плавный переход между страницами
Вы наверное замечали что часто на сайтах при переходе со страницы на страницу мельком можно уловить момент, когда содержимое в виде изображений и текстур еще не успело загрузиться. В такие моменты «построения», сайт может выглядеть крайне не презентабельно особенно у людей с низкой пропускной способностью интернета.
Больше всего это заметно при первой загрузке страницы, когда еще текстуры фона и изображения еще не кэшируются браузером посетителя. Чтобы «сгладить углы» Pedanto рекомендует использовать простой метод, который подойдет для владельца любого сайта. Он позволит реализовать плавный переход между страницами и плавную загрузку новых страниц.
CSS для эффекта растворения страниц
Первым делом нам понадобиться скрыть HTML тег body используя CSS стиль opacity. Это позволит сделать невидимым весь контент вашего сайта, для последующего плавного его появления при переходе со страницы на страницу. Параметр transition задаст скорость изменения стиля, при его смене. В нашем случае страница станет видимой через пол секунды.
Важный момент: Если фон вашего сайта не белого цвета, то данный стиль лучше использовать на блоке внутри основного фона сайта, чтобы при смене страницы всегда оставался базовый цвет основного фона.
Плавное появление содержимого с помощью Jquery
Страницу мы скрыли, но теперь ее нужно каждый раз как-то отображать, а иначе посетитель будет видеть только фон сайта. Для этого нам потребуется написать простой jquery скрипт, который будет отображать содержимое, после того как страница будет полностью загружена. Должна быть подключена jquery библиотека.
Для этого перед закрывающим тегом следует разместить следующий код:
Как только страница будет сформирована, наш код изменит opacity тега сделав его видимым, а transition предаст плавности. Вот и все. Таким образом можно легко реализовать плавный переход между страницами сайта, и скрыть дефекты подгрузки страницы.
Посмотреть пример работы этого скрипта, можно просто перейдя на любую страницу нашего сайта.
Плавный переход между страницами
Нашел скрипт который украсит ваш сайт. Скрипт подгружает фон сайта а потом уже всю страницу что делает красивое переключение.
Установка:
Необходимо поменять свойства тега body:
$(document).ready(function() <
$(«body»).css(«display», «none»); /** body (здесь и далее) означает, что эффект применяется ко всей странице. Можно изменить на идентификаторы любых элементов (#content, .comments и т.д.) */
$(«body»).fadeIn(500); /** время появления в миллисекундах */
function redirectPage() <
window.location = linkLocation;
>
>);
Плавный переход будет работать только если вы подключите к ссылке class — fade
Получится что то типа:
Как создать плавную анимацию перехода между страницами сайта?
Можно ли это сделать только через css и html, или с добавлением js? Мне нужна анимация, когда я нажимаю на какую-либо ссылку или кнопку, которая ведет на следующую html страницу сайта, и в это время идет плавная анимация перехода. Например блюр сайта при переходе.
Отслеживать
задан 7 мая в 13:05
11 1 1 бронзовый знак
s-sd.ru/blog_studio_design/… примерно такой механизм
7 мая в 14:41
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Это возможно сделать. К примеру на серверной стороне, для страниц у которых url адресс заканчиваеться на /page2/ добавлять для тега , если же у вас SPA тоже есть решения, возможно там у вас не загрузка новой страницы, а обновления контента. Вообщем ответ — да. Дальше уже смотреть от вашего сайта, это задача над которой надо посидеть, но решения в интернете уже есть.
Отслеживать
ответ дан 7 мая в 14:13
BlackStar1991 BlackStar1991
5,789 3 3 золотых знака 19 19 серебряных знаков 58 58 бронзовых знаков
Во времена, когда повсеместно царствовал IE, был в нём такой метатег RevealTrans . Вот начинающим раздолье было — вставил тег и готов переход с эффектами между страницами 🙂
Плавный переход между страницами сайта. Как реализовать?
Уже давно заметил что многие умельцы делают интересные анимации при переходе на новые страницы сайта. Многие креативные агенства например. Те же примеры с behance и dribbble. И это не просто плавное угасание и появление которое легко можно реализовать с java sc. Здесь все намного сложнее. Посмотрите пример (выберите любой проект и он очень плавно загрузится в новую страницу): redcollar.ru
На сколько все это сложно реализовать учитывая что сайт делается на wordpress? Подгрузка новой страницы в основной? Нужно ли использовать adobe animate для таких сложных анимаций?
- Вопрос задан более трёх лет назад
- 37437 просмотров
Комментировать
Решения вопроса 2
Тыжверстальщик! Наверстай мне упущенное.
https://s-sd.ru/files/ppcontent/index.html
https://s-sd.ru/blog_studio_design/plavnaya_smena_.
Делайте что хотите в качестве эффектов %)
По идее, это делается 10-15 строк jquery.
А логика у этого плагина простая, как 5 копеек.
1. Жмем на ссылку перейти по ссылке.
2. Страница откладывает переход, запоминая ссылку.
3. Сначала показывает эффект, потом скрывает всю страницу.
4. Потом уже переходит на другую страницу.
5. А на новой странице, просто идет плавная загрузка контента.
Ответ написан более трёх лет назад
Нравится 11 3 комментария
▪ ▪ @kingdomofcrooked Автор вопроса
Можно и так, но я все же заметил что сейчас многие подгружают контент на основную.
Спасибо, очень помог!
Айназ Қамбар @ainazkambar
С этим решением я столкнулся с одной проблемой. Если после перехода на другую страницы пользователь нажмет кнопку назад и вернется на первую страницу, то скрытые элементы так и остаются скрытыми. Пока решение не нашел
Антон Мудренок @mudrenokanton
frontend dev
Сложно это все грамотно и красиво сделать. А сама технология несложная.
Загляните в dev-tools. Перезагрузки страницы не происходит, происходит несколько анимаций и смена контента. Смена контента происходит в блоке . При смене контента, происходит вспышка и ре-рендер, и это заметно. Подгружается html для каждой страницы проекта заранее или асинхронно — не так важно, как через ajax можно подгрузить гуглится несложно. Для того, чтобы быстро вставить нужный нам html в блок, можно испольовать такую штуку.
Анимации сделаны(все или почти все) на css и запускаются сменой классов. Увидеть каждую из них очень просто если включить вкладку Animations в dev-tools:
upd: из либ они используют Swipe, skrollr, gsap и Three. Последняя похоже используется только для текстового эффекта на главной странице и занимает половину размера js билда =) В целом я бы не сказал, что они все клево сделали. 10 мб основной страницы сайта это перебор + видосики автоподгружаются с течением времени и кушают уже 65мб трафика. Мелкие картинки не в svg и не в спрайте, потому мы делаем около 50 запросов по ним. И т.п.
Ответ написан более трёх лет назад
Нравится 3 1 комментарий
Да говнище тотальное, хуже сайтов «креативных агентств» вообще ничего нету. Понаделают свой пидерастический дизайн, а глянешь внимательней — кривость и убогость. О лапше джеквери я вообще молчу. Тьфу, нечисть.
Ответы на вопрос 6
Сергей Кардашов @bykardashov
Web – программист
Есть одна крутая платформа GSAP, с помощью нее можно анимировать что угодно и не сложно это все. Вот пример реализации на русском. В кратком содержании. Далее применяется технология HTML5 History Api.
Ну а дальше дело рук, нужно просчитать действия анимации и по ее завершению заменять история браузера. Ну а страницу соответственно подгружать или сразу при загрузки всей страницы или перед началом анимации через ajax.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
на всё воля Бога
Плавный переход, это минимум ajax.
Подгружается не вся страница, а только контент.
Например у Jquery есть функции fadeIn и fadeOut, можно и другими реализовать.
Жмешь на ссылку, отправляется запрос на подгрузку контента следующей страницы, в этот момент происходит «затухание» текущей страницы, контент подгружен, стартует функция «появления». «Сбалансировать» время между запросом контента и его получением можно гифкой ajax-loader.
Если это сделать не асинхронным запросом, получится «каша», ведь первая страница может потухнуть, а вторая еще будет в ожидании, так и вторая может не сразу открыться.
Хотя это можно сделать. Просто к клику вешаешь событие «затухание». Браузер пока ответ не получит от сервера, страницу не сменит. А на ready ДОМа каждой страницы (или только переходов), повешать появление . Будет самый простой эффект плавного перехода между страницами. Клик — затухание, пока браузер ждет ответ на клик — переход на новую страницу — появление контента. Если сервер быстро обрабатывает запросы, сайт оптимизирован, а у пользователя шустрый интернет, будет выглядеть как по настоящему.