Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Text fly-in</h1>
<p data-lining data-auto-resize>Now, this is a story all about how, My life got flipped-turned upside down, And I'd like to take a minute, Just sit right there, I'll tell you how I became the prince of a town called Bel Air! In west Philadelphia born and raised, On the playground was where I spent most of my days, Chillin' out maxin' relaxin' all cool, And all shootin some b-ball outside of the school, When a couple of guys who were up to no good, Started making trouble in my neighborhood, I got in one little fight and my mom got scared, She said 'You're movin' with your auntie and uncle in Bel Air'! I begged and pleaded with her day after day, But she packed my suit case and sent me on my way, She gave me a kiss and then she gave me my ticket, I put my Walkman on and said, 'I might as well kick it'! First class, yo this is bad, Drinking orange juice out of a champagne glass, Is this what the people of Bel-Air living like?, Hmmmmm this might be alright! But wait I hear they're prissy, bourgeois, all that, Is this the type of place that they just send this cool cat?, I don't think so, I'll see when I get there, I hope they're prepared for the prince of Bel-Air! Well, the plane landed and when I came out, There was a dude who looked like a cop standing there with my name out, I ain't trying to get arrested yet, I just got here, I sprang with the quickness like lightning, disappeared! I whistled for a cab and when it came near, The license plate said fresh and it had dice in the mirror, If anything I could say that this cab was rare, But I thought 'Nah, forget it' - 'Yo, homes to Bel Air'! I pulled up to the house about 7 or 8, And I yelled to the cabbie 'Yo homes smell ya later', I looked at my kingdom, I was finally there, To sit on my throne as the Prince of Bel Air.
<footer>by <a target="_blank" href="http://rileyjshaw.com">rileyjshaw</a></footer>
              
            
!

CSS

              
                $fg: #b05574
$bg: #dcd1b4
  
body
  padding: 0 10%
  text-align: center
  background: $bg
  &, a
    color: $fg
  
h1, footer
  font: 800 60px 'Open Sans', sans-serif
  text-transform: uppercase
  
footer
  font-size: 24px

p
  margin-bottom: 0
  font: 60px 'Gentium Basic', serif
  
.line
  position: relative
  top: 1/6*100vh
  opacity: 0
  transition: top 0.4s, opacity 0.2s
  &.visible
    top: 0
    opacity: 1
    transition: top 0.4s, opacity 0.8s

footer
  height: 50vh
  line-height: 50vh
  
              
            
!

JS

              
                function handler () {
  var scrollTop = $window.scrollTop();
  var cutoff = scrollTop + threshold * (scrollTop - prev < 0 ? 5 / 6 : 1);
  $lines.each(function () {
    if ($(this).offset().top < cutoff) $(this).addClass('visible');
    else $(this).removeClass('visible');
  });
  prev = scrollTop;
}

function reline () {
  $lines = $('.line');
  handler();
}

function thresholder () {
  threshold = $window.height();
}

var $window = $(window);
var $p = $('p');
var $lines, threshold;
var prev = 0;

$p.on('afterlining', reline);
$window.scroll(handler);
$window.resize(thresholder);

thresholder();

              
            
!
999px

Console