CSS3 Transitions For Single-Page Websites
It’s impressive how some single-page websites are designed, particularly in the way they transition from one section of the page to the next. Most of these effects are done with the use JavaScript and Sergio Camalich shows us that we can accomplish pretty much the same feat with his CSS3 tutorial.
Click on the image check out the demo showcasing three different transition effects. You can download the source files here.
In the tutorial, the HTML page will basically consist of four sections aside from the header; Home, Portfolio, About, and Contact. Each will have its own DIV ID, and CLASS. As shown in a simplified version of the HTML markup below:
<!-- Home -->
<div id="home">
<h2>Home</h2>
<p>Some content</p>
<!-- ... -->
</div>
<!-- Portfolio -->
<div id="portfolio">
<div >
<h2>Portfolio</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- About -->
<div id="about">
<div >
<h2>About</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- Contact -->
<div id="contact">
<div >
<h2>Contact</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- Header with Navigation -->
<div id="header">
<h1>Page Transitions with CSS3</h1>
<ul id="navigation">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
<li><a id="link-about" href="#about">About Me</a></li>
<li><a id="link-contact" href="#contact">Contact</a></li>
</ul>
</div>
|
Also, the header is located at the bottom and not at the top. Sergio explains that the reason for this is so “that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently.”
In the CSS side of things, as far as the header and the navigation are concerned, you’ll still style and the position them as you normally would even though everything else will be moving because of the transitioning effect. Since the Home section has its own class apart from the other sections, you’ll be assigning it with a different CSS attribute:
.panel{
min-width: 100%;
height: 98%;
overflow-y: auto;
overflow-x: hidden;
margin-top: -150%;
position: absolute;
background: #000;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
z-index: 2;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.panel:target{
margin-top: 0%;
background-color: #ffcb00;
}
|
Below will be the style of the content class for the rest of the sections:
.content{
right: 40px;
left: 280px;
top: 0px;
position: absolute;
padding-bottom: 30px;
}
.content h2{
font-size: 110px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 18px;
padding: 10px;
line-height: 24px;
color: #fff;
display: inline-block;
background: black;
padding: 10px;
margin: 3px 0px;
}
|
Lastly, if you want to change the color of the current item in the navigation, just use the :target pseudo-class with the general sibling selector (~) to “get to” the respective navigation item:
#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
background: #000;
color: #fff;
}
|
As always, feel free to tinker with the code and experiment with different effects. Again, credits and thanks go to Sergio. Cheers, everyone!
0
505
