Destino Solutions

+91 9747866100

Flipping Header Animation Add to Blogger Blog

April 1st, 2014

Customize your Blogger Header with CSS Flipping (Horizontal Rotate) Animated Blogger Header, It is work with Mouse Hover on blog Header and it rotate the back side, It have two sides Horizontal Flip Header animation support all major web browsers. This idea came from David Walsh blog article. make impress your blog readers with ‘Flipping Header Animation’.

So I’m Thankful for David Walsh Tutorial Create a CSS Flipping Animation This Tutorial is help to make Vertical Flipping Animation and my tutorial tells only Horizontal Flip, Try to make your own Vertical Flipping Header.


You should see on top of Digitcrop (Header)| Text used Header DEMO

Follow Steps :

Note : Backup Blogger Template After do following Steps
Go to Blogger > Template > Edit HTML

Steps 1,2,3  for custom Image (Logo) header using blogs.
(Not Using custom image logo? Use Steps 4 and 5 only )

Step 1. Find following html code (Ctrl+F).

<img expr:alt='data:title'
 Just Above Paste following Html code.
<div class='flip-container' ontouchstart='this.classList.toggle(&apos;hover&apos;);'>
    <div class='flipper'>
        <div class='front'>

Step 2. look below code.

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Just below Paste following Html code.

</div> <div class='back'>
            <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:width='data:width' src='http://1.bp.blogspot.com/-1O6Zay9jFEc/UzoXX2wHbzI/AAAAAAAABg4/XRORsTablBs/s1600/3-2014-HOVER.png' style='display: block'/>
        </div>
    </div>
</div>

Step 3. Replace Gray marked image link with your blog logo.

You are using default blogger header,not added a custom logo? Please follow below steps.

Step 4. Find following html code (Ctrl+F).

<h1 class='title'>

( It look like below code )

<h1 class='title'>
          <b:include name='title'/>
        </h1>

Above code (<h1 to </h1> ) Replace With Just below code.

<h1 class='title'>
<div class='flip-container' ontouchstart='this.classList.toggle(&apos;hover&apos;);'>
<div class='flipper'>
<div class='front'>
          <b:include name='title'/></div>
<div class='back'>
<b:include name='title'/>
</div>
    </div>
</div>
        </h1>

Finally add CSS Flipping Animation in your blog CSS section.

Step 5. find following script (type keyboard Ctrl + Shift + F )

]]></b:skin>

Just Above Paste following CSS.

/* Start Header Flipper
----------------------------------------------- */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
       -o-perspective: 1000;
-moz-transform-style: preserve-3d;
-Webkit-transform-style: preserve-3d;
-0-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-0-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-webkit-transform: perspective(1000px);
-ms-transform: perspective(1000px);
}
.flip-container:hover .back {
        transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);       

    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 125px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transition: 0.6s;
-ms-transition: 0.6s;
     -moz-transition: 0.6s;
       -o-transition: 0.6s;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
    transition: 0.6s;
-webkit-transition: 0.6s;
     -moz-transition: 0.6s;
       -o-transition: 0.6s;
-ms-transition: 0.6s;
    transform-style: preserve-3d;
position: absolute;
    top: 0;
    left: 0; }
.front {
    z-index: 2;
    transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg); }
.back {
    transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
       -o-transform: rotateY(-180deg);
       -ms-transform: rotateY(-180deg); }
.vertical.flip-container {
    position: relative;}
.vertical .back {
        transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg); }
    .vertical.flip-container:hover .back {
        transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
       -o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg); }
    .vertical.flip-container:hover .front {
        transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);}

Save Template.

Any Problems Faced with Flipping Header Customization Adding To your blog? Please Feel Free Mentioned it below Comment Box.

Categories: Blogger