HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URL's added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="main">
<h1>Scroll</h1>
<div class="controls">
<div>
<p><strong>Toggle scroll indicator:</strong>
<a href="#" id="toggle-button">
<strong>ON</strong>/<span>OFF</span>
</a>
</p>
</div>
</div>
<hr>
<p>Alice was beginning to get very
tired of sitting by her sister on
the bank, and of having nothing
to do: once or twice she had
peeped into the book her sister was reading,
but it had no pictures or conversations in
it, "and what is the use of a book," thought
Alice, "without pictures or conversations?"</p>
<p>So she was considering in her own mind
(as well as she could, for the hot day made
her feel very sleepy and stupid) whether the
pleasure of making a daisy-chain would be
worth the trouble of getting up and picking
the daisies, when suddenly a White Rabbit
with pink eyes ran close by her.</p>
<p>There was nothing so <i>very</i> remarkable in
that; nor did Alice think it so <i>very</i> much out
of the way to hear the Rabbit say to itself, "Oh
dear! Oh dear! I shall be too late!" (when
she thought it over afterwards, it occurred
to her that she ought to have wondered at
this, but at the time it all seemed quite
natural); but when the Rabbit actually <i>took
a watch out of its waistcoat-pocket</i>, and
looked at it, and then hurried on, Alice
started to her feet, for it flashed across her
mind that she had never before seen a rabbit
with either a waistcoat-pocket, or a watch to
take out of it, and burning with curiosity,
she ran across the field after it, and was just
in time to see it pop down a large rabbit-hole
under the hedge.</p>
<p>In another moment down went Alice after
it, never once considering how in the world
she was to get out again.</p>
<p>Either the well was very deep, or she fell
very slowly, for she had plenty of time as she
went down to look about her, and to wonder
what was going to happen next. First, she
tried to look down and make out what she
was coming to, but it was too dark to see
anything; then she looked at the sides of the
well and noticed that they
were filled with cupboards and
book-shelves: here and there
she saw maps and pictures
hung upon pegs. She took
down a jar from one of the
shelves as she passed; it was
labelled "ORANGE MARMALADE,"
but to her disappointment
it was empty;
she did not like to drop the
jar for fear of killing somebody
underneath, so managed to put it into
one of the cupboards as she fell past it.</p>
<p>"Well!" thought Alice to herself. "After
such a fall as this, I shall think nothing of
tumbling down stairs! How brave they'll all
think me at home! Why, I wouldn't say
anything about it, even if I fell off the
top of the house!" (Which was very likely
true.)</p>
<p>Down, down, down. Would the fall <i>never</i>
come to an end? "I wonder how many miles
I've fallen by this time?" she said aloud. "I
must be getting somewhere near the centre of
the earth. Let me see: that would be four
thousand miles down. I think—" (for, you
see, Alice had learnt several things of this
sort in her lessons in the schoolroom, and
though this was not a <i>very</i> good opportunity
for showing off her knowledge, as there was
no one to listen to her, still it was good practice
to say it over) "—yes, that's about the
right distance—but then I wonder what Latitude
or Longitude I've got to?" (Alice had
no idea what Latitude was, or Longitude
either, but thought they were nice grand
words to say.)</p>
<p>Presently she began again. "I wonder if
I shall fall right <i>through</i> the earth! How
funny it'll seem to come out among the people
that walk with their heads downwards! The
Antipathies, I think—" (she was rather glad
there <i>was</i> no one listening, this time, as it
didn't sound at all the right word) "—but
I shall have to ask them what the name of the
country is, you know. Please, Ma'am, is this
New Zealand or Australia?" (and she tried to
curtsey as she spoke—fancy <i>curtseying</i> as
you're falling through the air! Do you think
you could manage it?) "And what an ignorant
little girl she'll think me! No, it'll
never do to ask: perhaps I shall see it written
up somewhere."</p>
<p>Down, down, down. There was nothing
else to do, so Alice soon began talking again.
"Dinah'll miss me very much to-night, I
should think!" (Dinah was the cat.) "I
hope they'll remember her saucer of milk at
tea-time. Dinah, my dear, I wish you were
down here with me! There are no mice in
the air, I'm afraid, but you might catch a bat,
and that's very like a mouse, you know. But
do cats eat bats, I wonder?" And here Alice
began to get rather sleepy, and went on saying
to herself, in a dreamy sort of way, "Do cats
eat bats? Do cats eat bats?" and sometimes,
"Do bats eat cats?" for, you see, as she
couldn't answer either question, it didn't
much matter which way she put it. She felt
that she was dozing off, and had just begun
to dream that she was walking hand in hand
with Dinah, and saying to her very earnestly,
"Now, Dinah, tell me the truth: did you ever
eat a bat?" when suddenly, thump! thump!
down she came upon a heap of sticks and dry
leaves, and the fall was over.</p>
<p>Alice was not a bit hurt, and she jumped
up on to her feet in a moment: she looked
up, but it was all dark overhead; before her
was another long passage, and the White
Rabbit was still in sight, hurrying down it.
There was not a moment to be lost: away
went Alice like the wind, and was just in time
to hear it say, as it turned a corner, "Oh my
ears and whiskers, how late it's getting!" She
was close behind it when she turned the corner,
but the Rabbit was no longer to be seen: she
found herself in a long, low hall, which was lit
up by a row of lamps hanging from the roof.</p>
<p>There were doors all round the hall, but
they were all locked; and when Alice had been
all the way down one side and up the other,
trying every door, she walked sadly down the
middle, wondering how she was ever to get
out again.</p>
<p>Suddenly she came upon a little three-legged
table, all made of solid glass; there
was nothing on it but a tiny golden key, and
Alice's first idea was that this might belong
to one of the doors of the hall; but, alas!
either the locks were too large, or the key was
too small, but at any rate it would not open
any of them. However, on the second time
round, she came upon a low curtain she had
not noticed before, and behind it was a little
door about fifteen inches high: she tried the
little golden key in the lock, and to her great
delight it fitted!</p>
<p>Alice opened the door and found that it led
into a small passage, not much larger than a
rat-hole: she knelt down and looked along
the passage into the loveliest garden you ever
saw. How she longed to get out of that dark
hall, and wander about among those beds of
bright flowers and those cool fountains, but
she could not even get her head through the
doorway; even if my head would go
through," thought poor Alice, "it would be of
very little use without my shoulders. Oh,
how I wish I could shut up like a telescope!
I think I could, if I only knew how to begin."
For, you see, so many out-of-the-way things
had happened lately, that Alice had begun to
think that very few things indeed were really
impossible.</p>
<p>There seemed to be no use in waiting by
the little door, so she went back to the table,
half hoping she might find another key on it,
or at any rate a book of rules for shutting
people up like telescopes: this time she found
a little bottle on it ("which certainly was not
here before," said Alice,) and tied round the
neck of the bottle was a paper label, with the
words "DRINK ME" beautifully printed
on it in large letters.</p>
<p>It was all very well to say "Drink me,"
but the wise little Alice was not going to do
<i>that</i> in a hurry. "No, I'll look first," she
said, "and see whether it's marked '<i>poison</i>'
or not;" for she had read several nice little
stories about children who had got burnt,
and eaten up by wild beasts, and other
unpleasant things, all because they <i>would</i>
not remember the simple rules their friends
had taught them: such as, that a red-hot
poker will burn you if you hold it too
long; and that, if you cut your finger <i>very</i>
deeply with a knife, it usually bleeds; and
she had never forgotten that, if you drink
much from a bottle marked "poison," it is
almost certain to disagree with you, sooner
or later.</p>
<p>However, this bottle was <i>not</i> marked
"poison," so Alice ventured to taste it, and
finding it very nice (it had, in fact, a sort of
mixed flavour of cherry-tart, custard, pineapple,
roast turkey, coffee, and hot buttered
toast,) she very soon finished it off.</p>
<p>"What a curious feeling!" said Alice.
"I must be shutting up like a telescope."</p>
<p>And so it was indeed: she was now only
ten inches high, and her face brightened up
at the thought that she was now the right
size for going through that little door into
that lovely garden. First, however, she
waited for a few minutes to see if she was
going to shrink any further: she felt a little
nervous about this: "for it might end, you
know," said Alice to herself, "in my going
out altogether, like a candle. I wonder what
I should be like then?" And she tried to
fancy what the flame of a candle looks like
after the candle is blown out, for she could
not remember ever having seen such a thing.</p>
<p>After a while, finding that nothing more
happened, she decided on going into the
garden at once; but, alas for poor Alice!
when she got to the door, she found she had
forgotten the little golden key, and when
she went back to the table for it, she found
she could not possibly reach it: she could
see it quite plainly through the glass, and
she tried her best to climb up one of the legs
of the table, but it was too slippery; and when
she had tired herself out with trying, the
poor little thing sat down and cried.</p>
<a href="http://svarden.se/blog/2013-05-07-making-scrolling-less-confusing/">← back to blog post</a>
</div>
@keyframes fade {
to {opacity: 0.4; transform: scale(0);}
}
@-o-keyframes fade {
to {opacity: 0.4; -o-transform: scale(0);}
}
@-ms-keyframes fade {
to {opacity: 0.4; -ms-transform: scale(0);}
}
@-moz-keyframes fade {
to {opacity: 0.4; -moz-transform: scale(0);}
}
@-webkit-keyframes fade {
to {opacity: 0; -webkit-transform: scale(0);}
}
body {
max-width: 650px;
margin: 0 auto;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
color: #444;
line-height: 1.6;
background: #fff;
}
a {
color: #2DC67C;
text-decoration: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.controls span {
color: #94EFC0;
}
.main {
position: relative;
}
.hidden {
visibility: hidden;
}
.indicator {
position: absolute;
width: 30px;
height: 20px;
left: -45px;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-ms-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.eye {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAYAAAAHpoRMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAGYktHRAD/AP8A/6C9p5MAAAGySURBVEhLzVa7qsJAEJ2kESIRO+u0scwf+Gg0IqL4BUIqfyFFKlG0yC9Yp7MQJFUKO9FCK7GyEAtLS3PdvSTkOps1FyNkwcJ5np05sxPBfx7IyBEzgoPCyBQYgdemxWIBq9UKTqcTRa4oCtTrdWi1Wt8pKAHzeobDIeER92cYBsv1IxlEvY/HIxOALMt+oVBg6g6Hw0cAos4hGNd1UTJd11GibreL7JbLZSwgVVUTg6VgdrsdStBsNsMgs9nMH4/H4f9er4fsN5sNMykBkxQQJbAgCIiQwfPzqouTkwCsJ6tcLoex9/s9l/hipVJBBrlcjsps20a60WhEZcViEelqtRo3WRQYy1C83W6pjen9fufGelcZuFwuzCkJCPA64nHy3y7h8x/OiKVSCUzTRDd6EpjKCA+m0ylMJpOQE08CI3vP82Kr8rYigWdwl36/jyrUaDTQVTudDrJzHCfx+PIM/9TWsixmyyRJ8vP5PFO33W5TAUKCoEZfr1df07S362AwGKQGIggUuygfjwfM53NYr9dwPp+BvDdkUVarVWi326lNYDQQd2t/JSMnaKa+ZzIF5gfo9Jtm1adlJwAAAABJRU5ErkJggg==');
}
.arrow {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAIAAACIxBMbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABvSURBVEhL7ZRRDgAQDEPdxf3PiC+JGdpYRsS+rU/TbSF5VfACpYYU7ao3IEkmFsuHryGZGBqJHJoIxJOaAdLIeaqziUiLNwRJrAALQ0nqplEwiDRZaBwGkaqcU06F90lthlxOeP6LC7sjtOx90VMGFXKCDo6ccOUAAAAASUVORK5CYII=');
}
/*!
* scrollindicator.js
* http://svarden.se/demo/scroll/
* MIT licensed
*
* Copyright (C) 2013 Jonathan Svärdén, http://svarden.se
*/
var scrollIndicator = (function(){
'use strict';
var settings = {
// The text container where you want the indicator to appear. Needs to be positioned.
indicateOn: '.main',
// After this many milliseconds the indicator no longer sticks, and starts disappearing.
fadeDelay: 1500,
// CSS class that defines the indicator icon.
icon: 'eye'
};
// Poor man's options extend.
var extend = function(options){
var prop;
for( prop in options ){
if( prop in settings ){
settings[prop] = options[prop];
}
}
};
var create = function(options){
if(options){
extend(options);
}
var indicatorElement = document.createElement('span'),
indicateOn = document.querySelector(settings.indicateOn);
indicatorElement.classList.add('indicator');
indicatorElement.classList.add(settings.icon);
indicatorElement.style.top = window.innerHeight + window.pageYOffset - 23 + 'px';
indicateOn.appendChild(indicatorElement);
return indicatorElement;
};
var init = function(options){
var indicator = create(options),
scrolling = false;
function delayedExec(fn, delay){
var timer,
yOffset = window.pageYOffset;
return function(){
if(!scrolling){
indicator.style.top = window.innerHeight + yOffset - 23 + 'px';
scrolling = true;
}
yOffset = window.pageYOffset;
indicator.style.webkitAnimationName = '';
indicator.style.MozAnimationName = '';
indicator.style.animationName = '';
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
}
var updatePosition = delayedExec(function(){
scrolling = false;
indicator.style.webkitAnimationName = 'fade';
indicator.style.MozAnimationName = 'fade';
indicator.style.animationName = 'fade';
}, settings.fadeDelay);
document.addEventListener('scroll', updatePosition, false);
};
return {
init: init
}
})();
scrollIndicator.init();
var toggle = document.getElementById('toggle-button'),
indicator = document.querySelector('.indicator'),
toggledOn = true;
toggle.addEventListener('click', function(){
toggledOn = toggledOn ? false : true;
indicator.classList.toggle('hidden');
if(toggledOn){
toggle.innerHTML = "<strong>ON</strong>/<span>OFF</span>";
}else {
toggle.innerHTML = "<span>ON</span>/<strong>OFF</strong>";
}
}, false);
Also see: Tab Triggers