How to make an effect like on this site?

A

Anna Chumachenko2018-01-28 19:34:50

css

Anna Chumachenko, 2018-01-28 19:34:50

How to make a smooth change of blocks, test.ulitabiz.in.ua/#catalog when you switch it is not at all clear that something is happening. I have the same pictures, but the description under them is different. How to make, like here postelshop.com the effect of a smooth change of blocks! Or downloads. Something like this.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Постельное бельё РАЗПРОДАЖА!!!</title>
<style type="text/css">
   .block-of-text{
  height: 0px;
  overflow: hidden;
  transition: height 1s linear;
}
.block-of-text.active{
height: auto;
}
</style>
 </head>
 <body>
 <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $('.js-open-box').click(function(){
    var id = $(this).attr("data-target");
    if ( !$(id).hasClass("active") ){
      $(".js-block-of-text").removeClass("active");
      $(id).addClass("active");
    }
  });
});
</script>

<a href="#" class="js-open-box" data-target="#box1">Записаться</a>
<a href="#" class="js-open-box" data-target="#box2">Записаться</a>
<a href="#" class="js-open-box" data-target="#box3">Записаться</a>
<a href="#"  class="js-open-box" data-target="#box4">Записаться</a>

<div class="js-block-of-text block-of-text" id="box1">Отображаемый блок 1</div>
<div class="js-block-of-text block-of-text" id="box2">Отображаемый блок 2</div>
<div class="js-block-of-text block-of-text" id="box3">Отображаемый блок 3</div>
<div class="js-block-of-text block-of-text" id="box4">Отображаемый блок 3</div>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Andrey Tsvetkov, 2018-01-28
@Againts7

You can place the "sale" icon for different categories in different places, you can also drag part of the product description, price or something else that changes into the picture.
Well, or write a function for hiding catalog elements, something noticeable so that transparency is lost within a second, and then the element becomes display: none
But better do it as in the original, that is, hide the entire block with catalog elements for a while