Gyancode

A free library of HTML, CSS, JS

Search This Blog

Saturday 23 July 2016

right side scroller color change

css here......
.mousescroll::-webkit-scrollbar {
    width: 7px;
}
.mousescroll::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 


    }
 
.mousescroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
div#chatlist {
    width: 50px;
    height: 140px;
}
div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}

html demo
<div id="chatlist" class="mousescroll">
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
Posted by at No comments :

Friday 24 June 2016

Sticky Navigation

<script type="text/javascript">
jQuery(window).scroll(function () {
  if (jQuery(document).scrollTop() == 0) {
    jQuery('.menu').removeClass('sticky');
  } else {
    jQuery('.menu').addClass('sticky');
  }
 
});

</script>

 <header id="home" class="menu">
  <div class="container">
    <div class="header">
      <div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div>
      <div class="nav">
        <ul>
          <li class="active"><a href="#home_bg" class="scroll">Home</a></li>
          <li><a href="#about_bg" class="about scroll">About</a></li>
          <li><a href="#product_bg" class="product scroll">Product</a></li>
          <li><a href="#client" class="client scroll">Clients</a></li>
          <li><a href="#career" class="career scroll">Career</a></li>
          <li><a href="#contact_bg" class="contact scroll">Contacts</a></li>
          <div class="clear"> </div>
        </ul>
      </div>
      <div class="clear"> </div>
    </div>
  </div>
</header>
Posted by at No comments :

Add Class When Page Scroll Reach At Specific ID

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    $('#home').toggleClass('about',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#about').offset().top
    );
    $('#home').toggleClass('product',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#product').offset().top
    );
    $('#home').toggleClass('contact',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#contact').offset().top
    );
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed

</script>
<style>
body{ margin:0px;}
#home{ height:500px; background:#3f9fc9;}
#about{ height:500px; background:#009294;}
#product{ height:500px; background:#ffde00;}
#contact{ height:500px; background:#b619ff;}
</style>
<body>
<header id="home">
</header>
<section id="about">
</section>
<section id="product">
</section>
<section id="contact">
</section>

</body>
</html>
Posted by at No comments :

Tuesday 24 May 2016

On Mousehover Div rotate

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $(".card").hover(function() {
   $(this).addClass("flipped");
}, function() {
    $(this).removeClass("flipped");
});
});
</script>
<style>
.flip {
    -webkit-perspective: 800;
    perspective: 800;
    width: 99%;
    height: 370px;
    position: relative;
    margin: 0 0 20px auto;
    display: inline-block;
    white-space: normal;
}

 .flip .card {
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.flip .card.flipped {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
}

 .flip .card .front {
    position: absolute;
    z-index: 1;
    background: #f9f9f9;
    border: solid 1px #ccc;
    border-radius: 2px;
    color: transparent;
    cursor: pointer;
    padding: 38px 23px;
    display: block;
}
.card img.home_icon {
    max-width: 160px;
    margin: 0 auto 20px;
    width: 100%;
    margin-top: 36px;
    max-height: 200px;
}
.whatwedo_home a {
    color: #333;
}
.flip .card .front h2 {
    padding: 10px;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    text-align: center;
    letter-spacing: 0px;
    text-decoration: none;
}

 .flip .card .back {
    -webkit-transform: rotatex(-180deg);
    -ms-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
    background: #29BBEA;
    cursor: pointer;
    padding: 30px 10px;
}
.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    z-index: 2;
}

 .flip .card .back h2 {
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0px;
    font-family: 'Open Sans', sans-serif;
}

 .flip .card .back ul {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    padding-left: 0;
    list-style: none;
}
.flip .card .back ul li {
    padding: 6px 0;
    text-align: center;
    margin: 0px;
}
.flip .card .back ul a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.flip .card .back ul a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

 .flip .card .back ul a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
}
.flip .card .back ul a::after, .flip .card .back ul a::before {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform .3s,opacity .2s;
    -o-transition: -o-transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s;
}
</style>
</head>
<body>
<div class="flip">
          <div class="card"> <a href="https://akshaysyal.wordpress.com/" class="face front"> <img src="http://logopals.com/img/design1.png" data-lazy-type="image" data-lazy-src="/media/2015/06/atomix_brain.png" alt="" class="lazy img-responsive home_icon" style="">
           
            <h2>WE DESIGN</h2>
            </a>
            <div class="face back">
              <h2>WE DESIGN</h2>
              <ul>
                <li><a href="">Responsive Website </a></li>
                <li><a href="">Website Maintenance</a></li>
                <li><a href="">Small Business Website &nbsp;</a></li>
                <li><a href="">Newsletter Design</a></li>
    <li><a href="">Photographer Website</a></li>
               <li><a href="">Real Estate Website&nbsp;</a></li>
               <li><a href="">Landing Page Design</a></li>
              </ul>
            </div>
          </div>
        </div>

 </body>
</html>
Posted by at No comments :
Subscribe to: Posts ( Atom )