Auto-Hiding Navbar with Javascript

Intoduction :- 
Hii Friends...
today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with big name brands like Facebook, Twitter, Google, LinkedIn, and others using this pattern. Other apps and websites are already doing this, and it’s pretty sweet. Here’s how you do it.

DEMO:- 

• Go quickly to ->
• Mobiles
• AC
• Refrigerators
• Cameras
• Sports

Example :-

<style type="text/css">

 .topper-link
{
list-style:none;
background:#fff;
width:100%;
text-align:center;
box-shadow: 2px 2px 3px #000;
height:35px;
}
.topper-link li
{
display:inline-block;
color:#333;
}
.tp1
{

}
.topper-link li a
{
border-right: 1px solid #333;
color: #333;
display: block;
padding: 5px 10px;
text-decoration: none;
}
    </style>

<div id="scid" class="row">
    <div class="container">
        <div class="top_menu tp1">
            <ul class="topper-link" style="margin-top: 3px; padding-top: 3px;">
                <li>Go quickly to -> </li>
                <li><a href="#">Mobiles</a> </li>
                <li><a href="#">Books</a> </li>
                <li><a href="#">Food</a> </li>
                <li><a href="#">Lighting</a> </li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).scroll(function () {
        if (($(this).scrollTop() / 10) > 10) {
            $('#scid').css('display', 'none');
        }
        else {
            $('#scid').css('display', 'block')

        }
    });
</script>

</div>
</div>

</div>

Read More

css Hovering Bounce

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle  boundary with images bounce .
hover selector is used to select elements when you mouse over them.  When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.  And the images is give a little bounce.

DEMO:- 

Example :-

<style type="text/css">
.theImage {
    animation-duration: .3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.theImage:hover {
    animation-name: jittery;
}

@keyframes jittery {
    10% {
        transform: translate(-2px, -3px) scale(1.01, 1.01);
    }
    20% {
        transform: translate(3px, 2px) scale(.99, .99);
    }
    30% {
        transform: translate(-4px, -5px) scale(1.01, 1.01);
    }
    40% {
        transform: translate(2px, 3px) scale(1, 1);
    }
    50% {
        transform: translate(-1px, -2px) scale(.98, .98);
    }
    60% {
        transform: translate(0px, 3px) scale(1.02, 1.02);
    }
    70% {
        transform: translate(-2px, -4px) scale(1, 1);
    }
    80% {
        transform: translate(3px, 5px) scale(.99, .99);
    }
    90% {
        transform: translate(-5px, -3px) scale(1.1, 1.1);
    }
    100% {
        transform: translate(3px, 1px) scale(.95, .95);
    }
}
</style>

<img class="theImage" alt="hover over it" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">

Read More