Scrolling image gallery

Question

Scrolling image gallery

Navigation

#1 by (0 votes)

1

I created a gallery and I would like it to only appear the first two lines, and the rest would be hidden, so when the person rolled the scroll of the mouse, appearing the others, until the end, only then when get to the end of the gallery start page scrolling indeed.

I tried creating a class involving the gallery and applying a overflow-x: auto and a max-height , but it was kind of strange, it only works if the mouse is over the gallery area, and when I want to scroll the page I try to take it the mouse to another area of the page.

This gray part below is simulating the footer, it would be cool when you were scrolling the page, there would appear a 150px of the footer there would start the gallery scrolling.

Did you understand?

.galeria {
  float: left;
  width: 100%;
  overflow-x: auto;
  max-height: 240px;
}

.galeria ul {
  list-style: none;
  float: left;
  width: 100%;
}

.galeria li {
  float: left;
  width: 20%;
  padding: 1px;
}

.galeria img {
  width: 100%;
  height: auto;
}

.rodape {
  float: left;
  width: 100%;
  height: 300px;
  background: #7f8c8d;
  margin-top: 30px;
}

<div class="galeria">
  <ul>
    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff"alt="">
    </li>

    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff"alt="">
    </li>

    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff"alt="">
    </li>

    <li>
      <img src="http://placehold.it/200x150/34495e/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/9b59b6/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/3498db/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/2ecc71/ffffff"alt="">
    </li>
    <li>
      <img src="http://placehold.it/200x150/1abc9c/ffffff"alt="">
    </li>
  </ul>
</div>

<div class="rodape"></div>

jquery html5 css3

asked by anonymous 17.04.2018 / 13:23

1 answer

How to get data from a modal page? Is it possible to recreate this gradient effect only with html and css?

score 0 · Answer 1

Well you can do this using javascript and jquery I created a very simple script here ( see working here ) add to your code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>setInterval(function(){vargallery=$(".galeria");
        if(gallery.scrollTop() > (parseInt(gallery.find("ul").height()) - parseInt(gallery.height()))){
            $("html").css({"overflow":"auto"}); 
        }else{
            $("html").css({"overflow":"hidden"});   
        }
    });
</script>

It verifies if the scroll of the galeris div is greater than the height of <ul> in case it lets the body roll otherwise it does not leave

Remember that if you already have jquery in your project you can skip this line

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Andifyou'reworkingofflineorwouldrather download jquery use this link