A Pen by Alex Vazquez.

Fade-in-description-on-scroll.markdown

Fade in description on scroll

A concept for a portfolio page.

A Pen by Alex Vazquez on CodePen.

License.

index.html

<h1 class="title">Scroll Through the pics!</h1>
<article>
  <a href="http://bit.ly/18bmCDj">
    <img src="http://behance.vo.llnwd.net/profiles5/121545/projects/8894715/19d6a561e28ef3141ca8560796ee62e1.jpg" width="400px" alt=""/>
  </a>
  <div class="description">
    <h2>Stepladder</h2>
    <p>“Get your stinking paws off me, you damned dirty ape.”</p>
  </div>
</article>
<article>
  <a href="http://bit.ly/xAd4yU">
    <img src="http://behance.vo.llnwd.net/profiles14/943430/projects/3218473/ce68c40f6a771fd1ceee23634d3649e4.jpg" width="400px" alt=""/>
  </a>
  <div class="description">
    <h2>Stercoricolous</h2>
    <p>“A census taker once tried to test me. I ate his liver with some fava beans and a nice Chianti.”</p>
  </div>
</article>
<article>
  <a href="http://bit.ly/12HCDJz">
    <img src="http://behance.vo.llnwd.net/profiles25/431525/projects/9863095/efcdea1bc2fb89815a2a300f9755355d.jpg" width="400px" alt=""/>
  </a>
  <div class="description">
    <h2>Graphically</h2>
    <p>“The greatest trick the devil ever pulled was convincing the world he didn't exist ... and like that, he's gone</p>
  </div>
</article>
<article>
  <a href="http://bit.ly/12onSLu">
    <img src="http://behance.vo.llnwd.net/profiles24/469477/projects/9636917/37e6413589a9417bdfdceeb38e676a33.jpg" width="400px" alt=""/>
  </a>
  <div class="description">
    <h2>Loudmouth</h2>
    <p>“Mama always said life was like a box of chocolates. You never know what you're gonna get.”</p>
  </div>
</article>
<article>
  <a href="http://bit.ly/YR7Jmu">
    <img src="http://behance.vo.llnwd.net/profiles4/130877/projects/8666099/d73d6be72c1783c76d680f7ed11eb7dd.jpg" width="400px" alt=""/>
  </a>
  <div class="description">
    <h2>Potatoes</h2>
    <p>“That's it...”</p>
  </div>
</article>

script.js

;(function() {
    
    //If no js or jquery doesn't load-> falls back nicely
    $('.description').hide().css("position","fixed");
    //Show first description by default
    $('article').first().children('.description').show();

    $(window).scroll(function() {
            //Get 1/4 of window height
        var oneFourth = (window.innerHeight/4), 
            //Get scrolled position
            currentPosition = $(window).scrollTop(),
            //Imaginary line 25% from the top
            theLine = currentPosition + oneFourth;

        $('article').each(function() {
            //Get the position of each <article> in the document
            var articlePos = $(this).position().top,
                //Find out how long each <article> is, doesn't work as expected though, need to specify height explicitly in CSS...
                articleHeight = $(this).height();
            //Determine if <article> is overlapping our imaginary line
            function intersect() {
                if (theLine > articlePos && theLine < articlePos + articleHeight) {
                    return true;
                } else {
                    return false;
                }
            }
            //If intersect returns true, it means the article is visible in our viewport

            if (intersect() === true) {
                //Basic effect for showing/hiding of description text
                $(this).children('.description').clearQueue().fadeIn(600);
            } else {
                $(this).children('.description').clearQueue().hide();
            }
       })
    });
})();

style.css

body {
  font-family: "Futura", "Tw Cen MT", sans-serif;
  color: #333;
  word-spacing: 0.1em;
  letter-spacing: 0.06em;
  line-height: 1.4em;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 1.4em;
}
p {
  font-size: 1em;
  font-family: Georgia, Times, serif;
}
.title {
  text-align: center;
  padding-bottom: 60px;
}
article {
  width: 700px;
  min-height: 650px;
  margin: 100px auto;
}
.description {
  top: 200px;
  opacity:1;
  width: 200px;
}
img {
  float: right;
}