Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавное движение страниц сайта (https://javascript.ru/forum/misc/35854-plavnoe-dvizhenie-stranic-sajjta.html)

Tit6ka 24.02.2013 17:18

Плавное движение страниц сайта
 
Как сделать , чтобы при клике на пункт меню "Статьи" , текущая страница плавно сьежала в лево , и страница "Статьи" становилась на её место .

ksa 25.02.2013 08:53

Цитата:

Сообщение от Tit6ka
Как сделать

Как вариант, иметь 2 контейнера... В один добавлять новый контент, после чего смещать второй влево...
После смещения вообще удалять вместе с содержимым. Затем добавлять пустой, для нового контента...

danik.js 25.02.2013 08:58

На github сделан подобный эффект перехода. Впринципе эффект - дело десятое. На GitHub такая фишка что адрес в адресной строке меняется, а новый контент подгружается через асинхронный запрос. Впринципе можно сделать также. Однако если страниц очень мало и они короткие - то можно весь контент держать в одной html-странице. Сделать анкорную навигацию (причем работающую на чистом css), а поверх - javascript, добавляющий нужный эффект.

dmitry111 25.02.2013 18:43

Цитата:

Сообщение от danik.js
На GitHub такая фишка что адрес в адресной строке меняется, а новый контент подгружается через асинхронный запрос.

На github вроде нет такой фишки (по крайней мере браузер показывает полосу загрузки)
В vk такая фишка! Именно поэтому там можно слушать музыку и перемещаться по страничкам
Это HTML5 History API

Суть в три этапа:
1 Запрашиваем данные
2 Вставляем данные
3 Изменяем урл

У devote есть кроссбраузерное решение https://github.com/devote/HTML5-History-API


Вот демо от devote - http://history.spb-piksel.ru/

danik.js 25.02.2013 18:48

Цитата:

Сообщение от dmitry111
На github вроде нет такой фишки

А вот и есть ) Например при навигации по папкам.

dmitry111 25.02.2013 18:51

Цитата:

Сообщение от danik.js
А вот и есть ) Например при навигации по папкам.


да, по папкам есть!
Я просто на главную зашел, кликнул и эффекта не увидел))

melky 25.02.2013 19:26

Цитата:

Сообщение от dmitry111
Именно поэтому там можно слушать музыку и перемещаться по страничкам
Это HTML5 History API

это не одна HTML5 History API, это все разные технологии : Web Storage, HTML5 Audio (wth Flash fallback), AJAX, History API )

dmitry111 25.02.2013 19:45

melky,

ну то есть да.. Там много чего)


Часовой пояс GMT +3, время: 22:45.