Although the title of my question may not be very descriptive, I am essentially trying to implement a functionality where a page will slide right if a user clicks a link to the right of their current active link, and slide left if they click a link to the left.
Let's consider this snippet of a webpage:
<header>
<nav>
<ul>
<li><a href="/page/about">About</a></li>
<li><a href="/page/contact">Contact</a></li>
<li><a href="/page/services" class="yourehere">Services</a></li>
<li><a href="/page/other">Other</a></li>
</ul>
</nav>
</header>
<section id="content">
Page content here
</section>
Essentially, when a user clicks a link in the header element to the right of an element with the class 'youarehere', I want the page to slide right. Conversely, clicking a link to the left of 'youarehere' should make the page slide left.
I have condensed this JavaScript code which enables content loading via AJAX and triggers the sliding effect after loading:
$(function() {
var History = window.History;
if ( !History.enabled ) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$.get(State.url, function(response) {
var ajax_div = '#content';
$(ajax_div).html(response).addClass('animated slideInRight');
});
});
$('body').on('click', '.ajax', function(event) {
$('header nav ul li a').not(this).removeClass('yourehere');
$(this).parent().addClass('yourehere');
event.preventDefault();
History.pushState(null, $(this).text(), $(this).attr('href'));
});
});
These are the CSS classes used for the sliding effect:
.animated {
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes fadeInRight {
0% {
opacity: 1;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
If anyone has any insights or techniques on achieving my desired slide effect, it would be much appreciated. The Krimper website serves as a perfect example of what I am aiming for. Cheers :)