Показать сообщение отдельно
  #7 (permalink)  
Старый 11.06.2014, 19:36
Новичок на форуме
Отправить личное сообщение для Dionid Посмотреть профиль Найти все сообщения от Dionid
 
Регистрация: 11.06.2014
Сообщений: 9

Еще раз благодарю. Собственно это тени, которые при открытии страницы уезжают налево, при переходе на другую наезжают на страницу. Вот как я реализовал:
HTML
<a class="links" href="www/A.html">TEXT</a>
<div class="box" id="box"></div>
<div class="boxret" id="boxret"></div>

CSS
.box {
	width: 100%;
	height: 110%;
	background-color: black;
	position: fixed;
	top: 0;
	right: -105%;
	-webkit-box-shadow: -50px 0px 105px 50px rgba(0, 0, 0, 1);
	-moz-box-shadow:    -50px 0px 105px 50px rgba(0, 0, 0, 1);
	box-shadow:         -50px 0px 105px 50px rgba(0, 0, 0, 1);
}

.boxret {
	width: 100%;
	height: 110%;
	background-color: black;
	position: fixed;
	top: 0;
	left: 0%;
	-webkit-box-shadow: 50px 0px 105px 50px rgba(0, 0, 0, 1);
	-moz-box-shadow:    50px 0px 105px 50px rgba(0, 0, 0, 1);
	box-shadow:         50px 0px 105px 50px rgba(0, 0, 0, 1);
}

JS
$('.links').click(function(event){
      event = event || window.event 
      event.preventDefault ? event.preventDefault() : (event.returnValue=false);
      var link = this.href
      $('#box').animate({"right": "0%"}, 1200, function(){
        document.location = link
      });
      $('#box').animate({"right": "-105%"}, 1200)
    });

    $(document).ready(function(){
      $('#boxret').animate({"left": "-105%"}, 1200)
    });
Ответить с цитированием