Еще раз благодарю. Собственно это тени, которые при открытии страницы уезжают налево, при переходе на другую наезжают на страницу. Вот как я реализовал:
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)
});