Last Updated:

Site content using powered animation CSS

We've been experimenting lately with CSS powered animation, which replaces updating a web page while content is updated using Ajax. Today's lesson is based on the same idea, but in a different version: we will set the side navigation, while we will have prepared three pages with web content that will update the content with animations and load the content. Ajax loading content will help to simplify the display when you go to another page without updating it.

 

Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:

 

The idea is that when you select a new page, a new .cd-section element is created and inserted into the DOM. The load(), a function used to load new content (we used the data-menu attribute assigned to the navigation list items to determine the contents of the file and load it). Let's get started.

Step 1. HTML

The HTML structure consists of a .cd-main element, which serves as a wrapper for the content of the page, and a .cd-side-navigation element, which contains navigation, and a #cd-loading-bar to create a loading bar for the animation.

<nav class="cd-side-navigation">
<ul>
<li>
<a href="index.html" class="selected" data-menu="index">
<svg></svg>
intro
</a>
</li>
<li>
<!-- ... -->
</li>
</ul>
</nav>
<main class="cd-main">
<section class="cd-section index visible">
<header>
<div class="cd-title">
<h2>Heading #2</h2>
<span>Description</span>
</div>
<a href="#index-content" class="cd-scroll">Scroll Down</a>
</header>
<div class="cd-content" id="index-content">
</div> <!-- .cd-content -->
</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<div id="cd-loading-bar" data-scale="1" class="index"></div>

The markup is quite simple and should not cause you difficulties, the full markup can be viewed in the source code, we have simplified it as much as possible to make it easier for you to implement it in the structure of your site.

Site content using powered animation CSS

Step 2. CSS

We created a .cd-side-navigation for navigation in a fixed position, with a height of: 100%. To create a line that will be visible when you hover over each navigation point, we used a::afterpseudo-elements. The lines are in the absolute position and have width positions: 4px, top: 0 and right: -4px. One note: we've assigned a width value: calc(100%-4px) for each list item to be able to place a::after for elements inside the .cd-side-navigation (since it has overflow: hidden).

.cd-side-navigation {
position: fixed;
z-index: 3;
top: 0;
left: 0;
height: 100vh;
width: 94px
overflow: hidden;
}
.cd-side-navigation ul {
height: 100%;
overflow-y: auto;
}
.cd-side-navigation::before {
/* menu navigation background&nbsp;*/
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% - 4px);
background-color: #131519;
}
.cd-side-navigation li {
width: calc(100% - 4px);
}
.cd-side-navigation a {
display:block;
position: relative;
}
.cd-side-navigation a::after {
content: '';
position: absolute;
top: 0;
right: -4px;
height: 100%;
width: 4px
background-color: #83b0b9;
opacity: 0
}
.no-touch .cd-side-navigation a:hover::after {
opacity: 1
}

When the user selects a new item in the side navigation, a new .cd-section item is created and inserted into the DOM. By default, this new .cd-section element is moved to the left, out of visible space on the screen (translateX (-100%)). It will then return to the visible position using the .visible class to replace the old content.

position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: translateX(-100%);
transition: transform 0s 0.5s;
}
.cd-section.visible {
position: relative;
z-index: 2;
transform: translateX(0);
transition: transform 0.5s 0s;
}

Step 3. JS

The index.html file contains only the contents of the "Intro". Another HTML file was created for each navigation element (services.html, contact.html, ..) with exactly the same structure, but with different .cd-section content.

When the user clicks one of the items in the side navigation, the triggerAnimation() function will take effect. This function starts the loading bar animation (loadingBarAnimation() function) and loads new content , loadNewContent ().

To load the bar animation, we use Velocity.js: at the beginning of the animation, the -#cd-loading-bar is located next to the selected navigation element.

var scaleMax = loadingBar.data('scale');
if( scaleY + 1 &lt; scaleMax) {
newScaleValue = scaleY + 1;
}
// ...


loadingBar.velocity({
scaleY: newScaleValue
}, 100, loadingBarAnimation);

Once the new HTML has been loaded, the animation bar finishes the animation and loading, the old content is replaced with the new content and a new page is added to the window.history (using the PushState() method).

function loadNewContent(newSection) {
var section = $('


&lt;section class="cd-section overflow-hidden '+newSection+'"&gt;&lt;/section&gt;




').appendTo(mainContent);
section.load(newSection+'.html .cd-section &gt; *', function(event){
loadingBar.velocity({
scaleY: scaleMax
}, 400, function(){
section.addClass('visible');
var url = newSection+'.html';
if(url!=window.location){
window.history.pushState({path: url},'',url);
}
// ...
});
});
}

To trigger the same animation effect when the user presses the browser's back button, we listen for the popstate value and then execute the triggerAnimation() function.