JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div id="box">
<h1>
We have here content of a fleeting nature—images that move across the screen of night and that reclaim a direct, if amorphous, experience. The dreams draw awareness towards an illogical interplay of the ephemeral self; as imagined in encounters and negotiations with time and space. This collection offers a distillation of realities and experiences that trace feeling of past, present, future, unknown.
<img src="https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png">
The reality that defines the course of our waking hours might impose limits and discouragements. Therefore, our ability may not be sufficient, within the spectacle that is our contemporary social world, to grasp what is offered on the periphery
of consciousness.
I chose the most basic form of line drawing to reflect recall of the unconscious. The sequence might circumvent analytic tendencies, and allow us to come to a place that has nothing to do with chronology or a reasonable narrative.
Perhaps there is no story. There are only clues that allow us some room to wonder.
</h1>
</div>
h1{
mix-blend-mode: difference;
color:white;
font-size:9vw;
font-family:sans-serif;
}
#box
{
background-image: url(https://images.unsplash.com/photo-1515697203610-d0513edf9cb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd428e7688e714f6c98429dc1c18a31f&auto=format&fit=crop&w=654&q=80);
background-position:fixed;
width:80%;
height:700px;
overflow-y:scroll;
background-color:black;
background-position:center;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
}
Also see: Tab Triggers