2

I'm new at Javascript and I'm working on a site that has a full width slider and a set of buttons below the slider that are partially visible depending on the screen size. I set a transform:translate css on the buttons so when you hover over the visible part of each button it will transform upward to reveal the rest of the button. But this is only necessary if the full button is not visible on the screen. Once you scroll down the page and reveal the entire buttons_container div, the transform css needs to be disabled.

Is there a way to disable this transform css once the buttons come in full view when you scroll down? And can we base it on the screen/window size to that it works in mobile/tablet devices?

Here's what I have so far:

<div id="slider"></div>
<div id="button_container">
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div>
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div>
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div> 
</div>

Here's the css

.hp_buttons { 
float:left; 
width:33%; 
transform:translate(0,0); 
-webkit-transition: all.2s ease-in-out; 
-moz-transition: all.2s ease-in-out; 
-o-transition: all .2s ease-in-out; 
-ms-transition: all .2s ease-in-out; 
transition: all .2s ease-in-out; 
}
.hp_buttons:hover { 
transform:translate(0,-80%); 
}

Thanks in advance.

cder
  • 23
  • 6

2 Answers2

0

Here is a good description and code sample of your intended effect:

How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?

simsom
  • 1,966
  • 1
  • 11
  • 13
0

You can handle scroll event and check if the element is visible, then add or remove class from the element, link this:

$(window).scroll(function(){
   if ($('#elementId').visible()) {
     $('#elementId').removeClass('hp_buttons');
   } else {
     $('#elementId').addClass('hp_buttons');
   }
})

To verify if element is visible, you can use this code: https://github.com/customd/jquery-visible

Hope it helps.

Ricardo Pontual
  • 3,629
  • 3
  • 26
  • 40