Как бы я изменил эффект заглядывания с наведения на прокрутку

Question

Я ввел эффект «заглядывания» на свой сайт. Вот оно http://jsfiddle.net/7yrWL/1/ Теперь это работает и заглядывает, когда я когда-либо наводю курсор на изображение. Теперь я просто хочу, чтобы этот эффект работал, только если мы перейдем к этому разделу. Означает, что контейнер просматривает только прокрутку, но щелчок.

Любая идея, кто-нибудь?

Спасибо

<div class="main square">
    <div>
        <div class="content">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <div class="peek">
                <p>Test peek test peek<br/>Test peek</p>
                <h3>MORE TESTING</h3>
            </div>
        </div>
    </div>
</div>
<div class="main">
    <div>
        <div class="content">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <div class="peek">
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <h3>MORE<br/>Peek</h3>
            </div>
        </div>
    </div>
</div>
<div class="main large">
    <div>
        <div class="content">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <div class="peek">
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
            </div>
        </div>
    </div>
</div>

.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */

.main.large { height: 600px; width: 600px; }

Answer 1

$(window).scroll(function() {
  scrollEffect();
});

function scrollEffect() {
  $('.main').each(function(i) {
    if ($(this).position().top <= $(window).scrollTop()) {
      $(this).addClass('effect');
    }
  });
}

.main { padding: 10px; overflow: hidden; background-color: orange; color: white; height: 300px; width: 300px; display: inline-block; }
.main > div { position: relative; background-color: red; height: 100%; }
.main .content { position: absolute; bottom: 0; padding: 10px; right: 0; left: 0; }
.main .peek { max-height: 0; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; transition: max-height: 1s; background-color: green; overflow:hidden; }
.main.effect .peek, .main:hover .peek { max-height: 300px; } /* any way to make this 100% so it can fit any size? */

.main.large { height: 600px; width: 600px; }

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

<div class="main square">
    <div>
        <div class="content">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <div class="peek">
                <p>Test peek test peek<br/>Test peek</p>
                <h3>MORE TESTING</h3>
            </div>
        </div>
    </div>
</div>
<div class="main">
    <div>
        <div class="content">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <div class="peek">
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <h3>MORE<br/>Peek</h3>
            </div>
        </div>
    </div>
</div>
<div class="main large">
    <div>
        <div class="content">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <div class="peek">
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
                <p>Description<br/>with<br/>many<br/>lines.</p>
            </div>
        </div>
    </div>
</div>

Добавьте класс .main.effect .peek для main, который имеет тот же эффект, что и .main:hover .peek, а затем добавьте класс effectкаждому главному элементу div, который входит в видимую область в событии прокрутки.