cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <link href='https://fonts.googleapis.com/css?family=Open+Sans|Cabin+Sketch' rel='stylesheet' type='text/css'>
  <article>
  <div class="hero">
    <h1>Thus Spake Zarathustra</h1>
  </div>
  <div class="wrap">
    <h2>1</h2>
    <p>When I came to men for the first time, then did I commit the hermit's folly, the great folly: I appeared in the market-place.</p>
    <p>And when I spoke to all, I spoke to none. In the evening, however, rope-dancers were my companions, and corpses; and I myself almost a corpse.</p>
    <p>With the new morning, however, there came to me a new truth: Then did I learn to say "Of what account to me are market-place and crowd and crowd-noise and long crowd-ears!"</p>
    <p>You higher men, learn this from me: In the market-place no one believes in higher men. But if you will speak there, very well! The crowd, however, sputters "We are all equal."</p>
    <p>"You higher men," -- so sputters the crowd -- "there are no higher men, we are all equal; man is man, before God -- we are all equal!"</p>
    <p>Before God! -- Now, however, this God has died. Before the crowd, however, we will not be equal. You higher men, go away from the market-place!</p>
    <hr />
    <small class="explanation">(Psssst... Hover the &#60;hr&#62; element to see your progress)</small>
    <h2>2</h2> 
    <p>Before God! -- Now however this God has died! You higher men, this God was your greatest danger.</p>
    <p>Only since he lay in the grave have you again arisen. Only now comes the great noontide, only now does the higher man become -- master!</p>
    <p>Have you understood this word, O my brothers? You are frightened: Do your hearts turn giddy? Does the abyss here yawn for you? Does the hell-hound here yelp at you?</p>
    <p>Well! Take heart, you higher men! Only now does the mountain of the human future begin to work. God has died: Now we desire that the Superman live!</p>
    <hr />

    <h2>3</h2>
    <p>The most careful ask today "How is man to be maintained?" I, Zarathustra, ask, as the first and only one: "How is man to be surpassed?"</p>
    <p>The Superman I have at heart;-- that is the first and only thing to me -- and not man: Not the neighbour, not the poorest, not the sorriest, not the best.</p>
    <o>O my brothers, what I can love in man is that he is an over-coming and a down-going. And also in you there is much that makes me love and hope.</o>
    <o>In that you have despised, you higher men, that makes me hope. For the great despisers are the great reverers.</o>
    <o>In that you have despaired, there is much to honour. For you have not learned to submit yourselves, you have not learned petty policy.</o>
    <p>For today the petty people have become master: They all preach submission and humility and policy and diligence and consideration and the long et cetera of petty virtues.</p>
    <p>Whatever is of the effeminate type, whatever originates from the servile type, and especially the crowd-mishmash -- that is what wishes now to be master of all human destiny -- O disgust! Disgust! Disgust!</p>
    <p>They ask and ask and never tire of asking: "How is man to maintain himself best, longest, most pleasantly?" Thereby are they the masters of today.</p>
    <p>These masters of today, surpass them, O my brothers:  These petty people, they are the Superman's greatest danger!</p>
    <p>Surpass, you higher men, the petty virtues, the petty policy, the sand-grain considerateness, the ant-hill politeness, the pitiable comfortableness, the "happiness of the greatest number!"</p>
    <p>And rather despair than submit yourselves! And verily, I love you, because you do not know how to live today, you higher men! For thus do you live best!</p>
    <hr />
    <h2>4</h2>
    <p>Have you courage, O my brothers? Are you stout-hearted? Not the courage before witnesses, but hermit courage and eagle courage, which not even a God any longer beholds?</p>
    Cold souls, mules, the blind and the drunken, I do not call stout-hearted. He has heart who knows fear, but conquers it; who sees the abyss, but with pride.
    <p>He who sees the abyss, but with eagle's eyes, he who with eagle's talons grasps the abyss: He has courage.</p>

    <hr />

    <h2>5</h2>
    <p>"Man is evil" -- so all the wisest ones said to me for consolation. Ah, if only it were still true today! For evil is man's best strength.</p>
    <p>"Man must become better and more evil"- so do I teach. The most evil is necessary for the Superman's best.</p>
    <p>It may have been well for the preacher of the petty people to suffer and be burdened by men's sin. I, however, rejoice in great sin as my great consolation!</p>
    <p>Such things, however, are not said for long crowd-ears. Every word, also, is not suited for every mouth. These are fine far-away things: At them sheep's hooves shall not grasp!</p>

    <hr />

    <h2>6</h2>
    <p>You higher men, do you think that I am here to put right what you have put wrong?</p>
    Or that I wish henceforth to make snugger couches for you sufferers? Or show you restless, lost, and confused climbers new and easier footpaths?</p>
    <p>No! No! Three times No! Always more, always better ones of your type shall succumb, for you shall always have it worse and harder.</p>
    <p>Thus only does man grow upwards to the height where the lightning strikes and shatters him: High enough for the lightning!</p>
    <p>Out to the few, the long, the remote go my soul and my seeking: Of what account to me are your many little, short miseries!</p>
    <p>You do not yet suffer enough for me! For you suffer from yourselves, but you have not yet suffered from man. You would lie if you spoke otherwise! None of you suffers from what I have suffered.</p>
  </div>
</article>
            
          
!
            
              /*---- general stuff ----*/
//column width
$columnWidth:  750px;

//font colors
$primaryTextColor:   #555;
$secondaryTextColor: #000;

//font family
$primaryFontFamily:   'Open Sans', sans-serif;  
$secondaryFontFamily: 'Cabin Sketch', serif;

/*---- hr stuff ----*/
//hr colors
$barColor:      #555;
$barColorHover: #ff9d62;
$barTextColor:  #555;

//hr size
$barHeight:      3px;
$barHeightHover: 5px;

//hr transition
$barTransition: .3s;

*, 
*::before, 
*::after {
  box-sizing: border-box;
}

html, 
body {
  font-family: $primaryFontFamily;
  font-size: 17px;
  color: $primaryTextColor;
  border-top: 5px solid #000;
}

h1 {
  font-family: $secondaryFontFamily;
  font-size: 3.5em;
  color: $secondaryTextColor;
  margin-bottom: .25em;
  &::after {
    content: attr(data-timeToRead);
    font-size: .25em;
    font-weight: normal;
    font-family: 'Open Sans';
    font-style: italic;
    color: #919191;
    display: block;
  }
}

h2 {
  font-size: 1.25em;
  text-transform: uppercase;
  color: #555;
  text-align: center;
  font-family: 'Cabin Sketch';
  &::before, 
  &::after {
    content: '-';
  }
}

.hero {
  height: 20em;
  width: 100%;
  background: url(http://www.zawada.com.au/wordpress/wp-content/uploads/2013/03/Photo-Joshua-White-2012-77471.jpg);
  margin: 0;
  padding-top: 1px;
  background-size: cover;
  h1 {
    max-width: $columnWidth;
    padding: 20px;
    margin: 0 auto;
    margin-top: .25em;
  }
}

.wrap {
  max-width: $columnWidth;
  margin: 0 auto;
  padding: 0 1em;
  font-size: 1.25em;
  position: relative;
  overflow: hidden;
  background: white;
}

hr { 
  border: none;
  height: $barHeight;
  width: 100%;
  background: $barColor;
  margin: 0;
  border-top: 15px solid white;
  border-bottom: 15px solid white;
  transition: $barTransition;
  &::before, 
  &::after {
    opacity: 0;
    font-size: .65em;
    margin-top: 12px;
    color: $barTextColor;
    position: absolute;
    transition: $barTransition;
  }
  &::before {
    content: attr(data-percent);
    left: 20px;
    width: 100%;
    border-top: 30px solid transparent;
    margin-top: -18px;
    transform: translateY(5px);
  } 
  &::after {
    content: attr(data-readtime);
    right: 20px;
    transform: translateY(5px);
  }
  
  &:hover {
    &::before, 
    &::after {
      opacity: 1;
      transition: $barTransition;
    }
    &::before {
      transform: translateY(-5px);
    }
    &::after {
      transform: translateY(-5px);
    }
  }
  
  &.active {
    height: $barHeightHover;
    background: $barColorHover;
    margin-top: -2px;
  }
} 
 
.explanation {
  position: absolute;
  font-size: .6em;
  color: #919191;
}

@media screen and (max-width: 768px) {
  html, 
  body {
    font-size: 14px;
  }
  .hero {
    background-size: auto;
    background-position-y: 15%;
  }
}

@media screen and (max-width: 600px) {
  .hero {
    background-position-y: 10%;
  }
}

            
          
!
            
              /* 

Hover over the <hr /> tag to see the effect.

TO DO:
======

1. Add the option to make the <hr> element show progress automatically when the user scrolls past it.

2. Make the "time remaining" based on word count rather than % scrolled.

3. Clean up/organize the code. 

*/

var $el = $('.wrap'),
    wordCount = $el.text().trim().replace(/\s+/gi, ' ').split(' ').length,
    avgSpeed = 150,
    readTime = Math.round(wordCount/avgSpeed); 

// sets 
function hrHover(scrollPercent, currentReadTime){
  var scrollPercent = scrollPercent < 0 
    ? 0 
    : scrollPercent;
  $('hr.active')
    .css({
      'width': scrollPercent + '%'
    })
    .attr('data-percent', Math.round(scrollPercent) + '% complete')
    .attr('data-readtime', currentReadTime);
}

function hrVals() {
  var currY = $(this).scrollTop() - $('.hero').height(),
      postHeight = $(this).height(),
      scrollHeight = $el.height(),
      scrollPercent = (currY / (scrollHeight - postHeight)) * 100 < 100 
        ? (currY / (scrollHeight - postHeight)) * 100
        : 100,
      currentReadTime = Math.round(readTime - (readTime*(scrollPercent/100))) < 1
        ? 'Less than a minute remaining'
        : 'About ' + Math.round(readTime - (readTime*(scrollPercent/100))) + 'min remaining';
  
  hrHover(scrollPercent, currentReadTime);
}

$(window).on('scroll', hrVals);

$('hr')
  .on('mouseenter', function(){
    $(this).addClass('active');
    $('.explanation').hide();hrVals();
  }) 
  .on('mouseleave', function(){
    $(this)
      .removeClass('active')
      .css('width', '100%')
  })

$('h1').attr('data-timeToRead', 'By Friedrich Nietzsche • '+ Math.round(readTime) + ' min read'); 
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console