The Page Turn Transitions with CSS3

In the previous couple of years, we have seen lots of single page websites lying round the net, most of them exploitation JavaScript for a few transitions impact. Well, currently i am gonna teach you the way you'll have your own, however instead i will be exploitation CSS Transitions and also the :target property to try and do all the magic.
In the previous couple of years, we’ve seen lots of single page websites lying round the net, most of them exploitation JavaScript for a few transitions impact. Well, currently I’m gonna teach you the way you'll have your own, however instead I’ll be exploitation CSS3 Transitions and also the :target property to try and do all the magic.

Markup

The HTML5 can contain 5 main divisions: a header and also the four content sections. every of the content sections goes to own associate degree ID and also the category panel. Moreover, we are going to add another division within which is able to have the category content. the primary content section that is #home can solely have the content category and can not need an additional division:

<!-- Home -->

<div id="home" class="content">

    <h2>Home</h2>

    <p>Some content</p>

    <!-- ... -->

</div>

<!-- /Home -->

 

<!-- Portfolio -->

<div id="portfolio" class="panel">

    <div class="content">

        <h2>Portfolio</h2>

        <p>Some content</p>

        <!-- ... -->

    </div>

</div>

<!-- /Portfolio -->

 

<!-- About -->

<div id="about" class="panel">

    <div class="content">

        <h2>About</h2>

        <p>Some content</p>

        <!-- ... -->

    </div>

</div>

<!-- /About -->

 

<!-- Contact -->

<div id="contact" class="panel">

    <div class="content">

        <h2>Contact</h2>

        <p>Some content</p>

        <!-- ... -->

    </div>

</div>

<!-- /Contact -->

In the header we are going to have the most heading and also the navigation:

<!-- 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>

 

Now, the most plan is to use the pseudo-class :target so as to feature a transition to this section. during this CSS example, we are going to be slippery  up and down our sections.

CSS

First we are going to provide vogue to our header and also the navigation. we wish to stay these on an equivalent spot the least bit the time, despite the fact that everything else are moving.

#header{

    position: absolute;

    z-index: 2000;

    width: 235px;

    top: 50px;

}

#header h1{

    font-size: 30px;

    font-weight: 400;

    text-transform: uppercase;

    color: rgba(255,255,255,0.8);

    text-shadow: 0px 1px 1px rgba(0,0,0,0.4);

    padding: 40px;

    background: #000;

}

#navigation {

    margin-top: 30px;

    width: 235px;

    display:block;

    list-style:none;

    z-index:3;

}

#navigation a{

    color: #444;

    display: block;

    background: #fff;

    background: rgba(255,255,255,0.9);

    line-height: 50px;

    padding: 0px 20px;

    text-transform: uppercase;

    margin-bottom: 6px;

    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

    font-size: 14px;

}

#navigation a:hover {

    background: #ddd;

}

  

In order to vary the color of this item within the navigation, we’ll use the :target pseudo-class with the final relative selector to “get to” the various 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;

}

And that’s all you would like. check up on the demos and you’ll see alternative samples of however you'll try this.

Hope you likeable this tutorial and perhaps you'll experiment together with your own effects.