Sunday, June 7, 2015

Scroll(horizontally) on hover using jquery

Hi!
  Before few days I faced a problem :
There will be a alley contains logo/icons of clients and if we hover on it ,it should scroll left to right  and make a loop (on click on any will redirect you on new link)

Have a look on screenshot :



So at that time I have decided that I'll not use any plugin for the app (it will make my page heavy ).
so here is simple solution :

Jsfiddle
Here is Example


Html :

<div class="cont">
                <div id="cont1">
                <div id="contS" class="Img_cl1">
                <div  class="col-md-12 fdfll  scroll-left">
                        <a target="_blank" href="http://www.meraevents.com/">
                            <div class=" cl1 hde " >
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.appvirality.com/">
                            <div class=" cl2 hde">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <style>
                         

                        </style>
                        <a target="_blank" href="http://www.customfurnish.com/">
                            <div class=" cl3 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a><a target="_blank" href="http://www.medplusmart.com/home.mart">
                            <div class="  cl4 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.ishyd.org/">
                            <div class=" cl5 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a><a target="_blank" href="http://www.stileeye.com/">
                            <div class=" cl6 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>                  
                        <a target="_blank" href="http://vuego.tv/index.html">
                            <div class=" cl7 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.veooz.com/">
                            <div class=" cl8 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.zapevent.com/">
                            <div class=" cl9 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="https://www.doctrz.com/">
                            <div class=" cl10 hde ">
                               <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://reveye.in/">
                            <div class=" cl11 hde ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                        <a target="_blank" href="http://www.leonia.in/">
                            <div class=" hde cl12 ">
                                <img alt="client" src="http://commons.wikimedia.org/wiki/File:Vanamo_Logo.png" />
                            </div>
                        </a>
                </div>
               </div>
                 
             
                </div>
               </div>


Jquery :

 var $content = $('#contS'); // Cache your selectors!
    $(".cont").hover(
            function loop() {
                var first_node = $('.hde')[0];
                if(-parseInt($content.css('marginLeft'), 10)>=$('.hde').width()) {
                    $content.css('marginLeft', '+=' + $('.hde').width());
                    $('.hde')[0].remove();
                    $('.hde').last().after(first_node);
                }
                $content.stop().animate({ marginLeft: '-=20' }, 500, 'linear', loop);
            },
            function stop() {
                $content.stop();
            });

CSS:

ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
.hde img
{
    width:80px;
   
    margin:18px 0px;
    
}
#content
{
    margin-top:10px;
    float:left;
    width:100%;
}
#content img
{
    width:100%;
}
li
{
    float:left;
}
.Homepage,.bgpink
{
    background-color:#ff2c7e !important;
    color:White;
}

.Layout
{
    float:left;
    width:100%;
    
}


/*----------------------------stories--------------------------------------*/
.container
{
    width:90%;
    margin:0px auto;
}

.active
{
    font-weight:bold;
}
.ImageSec
{
    cursor:pointer;
}
.ImageSec img
{
    
     width: 100%;

}
.WholeView h3
{
      font-size: 14px;
      text-align: center;
      line-height: 18px;
      text-transform: uppercase;
      color: #333333;
      display: inline-block;
      width:100%;
      min-height:45px;
      
}
.OverlaySec
{
  
  cursor: pointer;
  background-size:100%;
  z-index: 9999;

  display:none;
  
}
/*
.img1hover
{
    background-image: url(../img/work/1hover.png);
}
.img2hover
{
    background-image: url(../img/work/2hover.png);
}
.img3hover
{
    background-image: url(../img/work/3hover.png);
}
.img4hover
{
    background-image: url(../img/work/4hover.png);
}
.img5hover
{
    background-image: url(../img/work/5hover.png);
}
.img6hover
{
    background-image: url(../img/work/6hover.png);
}
.img7hover
{
    background-image: url(../img/work/7hover.png);
}

.img8hover
{
    background-image: url(../img/work/1hover.png);
}
.img9hover
{
    background-image: url(../img/work/9hover.png);
}
.img10hover
{
    background-image: url(../img/work/10hover.png);
}
.img11hover
{
    background-image: url(../img/work/11hover.png);
}
.img12hover
{
    background-image: url(../img/work/12hover.png);
}
*/
.CircleBox
{
      height: 70px;
  width: 70px;
  margin: 0px auto;
  margin-top: 39%;
  background-image: url(../img/thumb.png);
  background-size: 60px;
  background-position: center;
  background-repeat:no-repeat;
  
  
}

Hope will help you 

No comments:

Post a Comment