Анимированное открытие страницы при переходе по ссылке?

Question

[@ayran]

Подскажите решение на css: клик по ссылке анимированно-плавно открывает и выводит страницу снизу окна монитора. Отлично если будет ссылка на пример кода подобной реализации, возможно есть готовые css библиотеки.

Answer 1

[Максим Тимофеев]

клик по ссылке

это js, а не про css. Возможно сейчас найдутся ниндзи, которые через :active начнут городить велосипед, но это будет из разряда "вот как я умею".

Так что отслеживаете в js событие клика, вешаете класс на блок, а аму анимацию можно уже в css сделать по этому классу.

Comments

[@ayran]

Выходит, что нельзя на css задать появление блока снизу окна? Под блоком понимаю страницу, ведь по сути страница и есть некий блок с разным содержимым – wraper или container. Или криво данный вопрос понимаю?

[Максим Тимофеев]

Выходит, что нельзя на css задать появление блока снизу окна?

не верно. Задать появление блока можно и нужно именно в css, а вот обработать событие клика надо в js

[Максим Тимофеев]

dupre,

Выходит, что нельзя на css задать появление блока снизу окна?

не верно. Задать появление блока можно и нужно именно в css, а вот обработать событие надо в js
"клик по ссылке" - это событие

[@ayran]

зн@webinar, это должно быть, к примеру как-то так?:

hoo.onclick = function ShowWindow() { 
    window.open("http://www.google.com/", 'popUpWindow', 'height=300,width=600,left=100,top=30,resizable=Yes,scrollbars=Yes,toolbar=no,menubar=no,location=no,directories=no, status=No');
}

[Максим Тимофеев]

dupre, что это?

[@ayran]

Максим Тимофеев, обработчик js; "обработать событие надо в js
"клик по ссылке" - это событие" – код js привёл в качестве примера, как бы это могло бы быть реализовано – это имелось в виду, никакой конкретики здесь нет, потому как и css здесь не приведён. Вот и спросил: примерно как-то так?

Answer 2

[Максим]

разве что можно , повесить на body{opacity:0;} а пр загрузке страницы менять это значение ...

на css это сделать нельзя - css не знает события браузера onload , onclick и т д ....

Answer 3

[j n]

В идеале весь контент страницы должен быть помещён в общий блок-контейнер. Впрочем, как уже писали ранее, можно анимировать и сам тег body.

Самый примитивный вариант реализации вот, но для его усложнения уже понадобится JS

Comments

[@ayran]

Что имеется в виду под усложнением: событие клик js или анимационные манипуляции или что? Хочу понять суть просто.