123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

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.

            
              <main>

  <p class="o-text">
  I do not find it easy to get sufficiently far away from this
Book, in the first sensations of having finished it, to refer
to it with the composure which this formal heading would
seem to require. My interest in it, is so recent and strong;
and my mind is so divided between pleasure and regret -
pleasure in the achievement of a long design, regret in the
separation from many companions - that I am in danger of
wearying the reader whom I love, with personal confidences,
and private emotions.
Besides which, all that I could say of the Story, to any
purpose, I have endeavoured to say in it.
It would concern the reader little, perhaps, to know, how
sorrowfully the pen is laid down at the close of a two-years’
imaginative task; or how an Author feels as if he were dismissing
some portion of himself into the shadowy world,
when a crowd of the creatures of his brain are going from
him for ever. Yet, I have nothing else to tell; unless, indeed,
I were to confess (which might be of less moment still) that
no one can ever believe this Narrative, in the reading, more
than I have believed it in the writing.   Instead of looking back, therefore, I will look forward. I
cannot close this Volume more agreeably to myself, than
with a hopeful glance towards the time when I shall again
put forth my two green leaves once a month, and with a faithful remembrance of the genial sun and showers that
have fallen on these leaves of David Copperfield, and made
me happy. I REMARKED in the original Preface to this Book, that I
did not find it easy to get sufficiently far away from it, in
the first sensations of having finished it, to refer to it with
the composure which this formal heading would seem to
require. My interest in it was so recent and strong, and my
mind was so divided between pleasure and regret - pleasure
in the achievement of a long design, regret in the separation
from many companions - that I was in danger of wearying
the reader with personal confidences and private emotions.
Besides which, all that I could have said of the Story to
any purpose, I had endeavoured to say in it.
  </p>
  
  
  <section>
  
    <h3>Sleppy kitten</h3>
    
    <div class="c-img-box c-img-box--aspect-ratio">
      
        <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="is-hidden" data-img-src="https://farm9.staticflickr.com/8581/15814510633_47bdc6476b_c.jpg" width="800" height="534" alt="Sleepy baby bear">
      
    </div>
    
  </section>
  
  <p class="o-text">
 It would concern the reader little, perhaps, to know how
sorrowfully the pen is laid down at the close of a two-years’
imaginative task; or how an Author feels as if he were dismissing
some portion of himself into the shadowy world,
when a crowd of the creatures of his brain are going from
him for ever. Yet, I had nothing else to tell; unless, indeed, I
were to confess (which might be of less moment still), that
no one can ever believe this Narrative, in the reading, more
than I believed it in the writing.
So true are these avowals at the present day, that I can
now only take the reader into one confidence more. Of all my books, I like this the best. It will be easily believed that I
am a fond parent to every child of my fancy, and that no one
can ever love that family as dearly as I love them. But, like
many fond parents, I have in my heart of hearts a favourite
child. And his name is DAVID COPPERFIELD. Whether I shall turn out to be the hero of my own life,
or whether that station will be held by anybody else,
these pages must show. To begin my life with the beginning
of my life, I record that I was born (as I have been informed
and believe) on a Friday, at twelve o’clock at night. It was
remarked that the clock began to strike, and I began to cry,
simultaneously.
In consideration of the day and hour of my birth, it
was declared by the nurse, and by some sage women in
the neighbourhood who had taken a lively interest in me
several months before there was any possibility of our becoming
personally acquainted, first, that I was destined to
be unlucky in life; and secondly, that I was privileged to see
ghosts and spirits; both these gifts inevitably attaching, as
they believed, to all unlucky infants of either gender, born
towards the small hours on a Friday night.
I need say nothing here, on the first head, because
nothing can show better than my history whether that prediction
was verified or falsified by the result. On the second
branch of the question, I will only remark, that unless I ran
  </p>
  
  <section>
  
    <h3>Flower</h3>
    
    <div class="c-img-box c-img-box--aspect-ratio">
      
      <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="is-hidden" data-img-src="https://farm9.staticflickr.com/8713/16947123705_0ea83601da_b.jpg" width="765" height="510" alt="Untitled">
      
    </div>
    
  </section>
  
  <p class="o-text">
through that part of my inheritance while I was still a baby,
I have not come into it yet. But I do not at all complain of
having been kept out of this property; and if anybody else
should be in the present enjoyment of it, he is heartily welcome
to keep it. I was born with a caul, which was advertised for sale, in
the newspapers, at the low price of fifteen guineas. Whether
sea-going people were short of money about that time, or
were short of faith and preferred cork jackets, I don’t know;
all I know is, that there was but one solitary bidding, and
that was from an attorney connected with the bill-broking
business, who offered two pounds in cash, and the balance
in sherry, but declined to be guaranteed from drowning on
any higher bargain. Consequently the advertisement was
withdrawn at a dead loss - for as to sherry, my poor dear
mother’s own sherry was in the market then - and ten years
afterwards, the caul was put up in a raffle down in our part
of the country, to fifty members at half-a-crown a head, the
winner to spend five shillings. I was present myself, and I
remember to have felt quite uncomfortable and confused,
at a part of myself being disposed of in that way. The caul
was won, I recollect, by an old lady with a hand-basket, who,
very reluctantly, produced from it the stipulated five shillings,
all in halfpence, and twopence halfpenny short - as
it took an immense time and a great waste of arithmetic,
to endeavour without any effect to prove to her. It is a fact
which will be long remembered as remarkable down there,
that she was never drowned, but died triumphantly in bed,
at ninety-two. I have understood that it was, to the last, her proudest boast, that she never had been on the water in her
life, except upon a bridge; and that over her tea (to which
she was extremely partial) she, to the last, expressed her indignation
at the impiety of mariners and others, who had
the presumption to go ‘meandering’ about the world. It was
in vain to represent to her that some conveniences, tea perhaps
included, resulted from this objectionable practice.
She always returned, with greater emphasis and with an instinctive
knowledge of the strength of her objection, ‘Let us
have no meandering.’
Not to meander myself, at present, I will go back to my
birth.
  </p>
  
  <section>
  
    <h3>Lake and mountains</h3>
    
    <div class="c-img-box c-img-box--aspect-ratio">
      
      <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="is-hidden" data-img-src="https://farm4.staticflickr.com/3697/13926984582_86ca8c34ef_c.jpg" width="800" height="434" alt="Lake and mountains">
      
    </div>
    
  </section>

</main>
            
          
!
            
              HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(254, 255, 255);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

IMG { max-width: 100%; }

/*Actual Style*/
MAIN { 
  max-width: 90vw;
  margin: 0 auto;
  padding: 1.5rem .1rem;
}

SECTION {
  max-width: 950px;
  margin: 0 auto 3rem;
  //border: 1px solid;
}

/*C-Aspect Ratio Box*/

.c-img-box {
  position: relative;
  margin: 0 1.5rem 1.5rem;
}

/*if we don't hide the IMG, it will display black square in IE<=11*/
.c-img-box IMG {
  opacity: 1;
  transition: opacity .3s ease;
}

IMG.is-hidden {
  opacity: 0;
}

.c-img-box--aspect-ratio {
  background-color: rgb(220, 220, 220);
  background: linear-gradient(-37deg, transparent 50%, rgb(188, 188, 188) 50.3%, transparent 50.7%), linear-gradient(37deg, transparent 50%, rgb(188, 188, 188) 50.3%, transparent 50.7%) rgb(220, 220, 220);
}

.c-img-box--aspect-ratio::before,
.c-img-box--aspect-ratio::after {
  content: "";
}

.c-img-box--aspect-ratio::before {
   float: left;
   width: 1px; height: 0;
   margin-left: -1px;
   padding-top: 75%;
}

.c-img-box--aspect-ratio::after {
  display: table;
  clear: both;
}

/*.c-aspect-ratio-box__content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(200, 200, 200, 1);
}*/


.o-text {
  font-size: 2rem;
  margin: 0 0 10rem;
}
            
          
!
            
              loadPolyfills();

;(function() {
  "use strict";
  
  /*
    DESCRIPTION: 
    Lazy loading of images using Intersection Observer API (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
    
    Each Image will be downloaded when it, at least, appears 25% in the viewport during the page scrolling.
    After all Images have been downloaded we instructs Intersection observer to not obeserve this images anymore
    (we can do this on per image way on disconnect Intersection Observer completely)
  */
   
  
  /// gets all images with data-img-src attribute on them
  const imgPlaceholders = Array.from(document.querySelectorAll("[data-img-src]")); /// Array.from for IE
  /// gets last image (for the case when we want disconnect Intersection Observer completely after the last image has been downloaded)
  const lastImg = imgPlaceholders[imgPlaceholders.length - 1];
  
  const IMG_SRC_ATTR = "data-img-src";
  const IMG_CONTAINER_PLACEHOLDER_CLASS = "c-img-box--aspect-ratio";
  const IMG_HIDDEN_CLASS = "is-hidden";
  
  
  const observerOptions = {
 // root: null,
 // rootMaring: "10rem",
    threshold: 0.25 // when visibility passes the N% mark, i.e. when observer element is visible within its parent on N% at least.
  };
  
  
  /// Initialize Observer object
  const observer = new IntersectionObserver(handleIntersection, observerOptions);

  imgPlaceholders.forEach(function(img) { 
      /// Start observing
      observer.observe(img);   
  });    

  
  /*===============================
     IntersectionObserver Handler
    ===============================*/
  function handleIntersection(entries, observerObj) {

    entries.forEach(function(entry, i) {

      if(!entry.isIntersecting) return; /// the target is no longer as visible as the given threshold      
      
      const img = entry.target; /// the real HTML Element

      loadImage(img);
      
      /// we can instruct Intersetion observer to stop observing particular image that has been already downloaded.
      observerObj.unobserve(img); /// instructs the IntersectionObserver to stop observing the specified target element
      
       /// we can check if this is the last image that should be downloaded, we can then disconnect Intersection observer completely.
       /*if(img === lastImg) {
          debugger; // disconnect observer
          observerObj.disconnect();
       }*/
      
    });
    
  };
  
  /*====================
     Utility Functions
  ======================*/
  /*
  * Load image according to it's data-img-src attribute,
  * removes class of hidden image from the image and from the parentElement
  */
  function loadImage(img) {
      const srcVal = img.getAttribute(IMG_SRC_ATTR);    
       if(srcVal) {
         img.src = srcVal; // replace fake src to the original one
         img.onload = function() { 
           this.removeAttribute(IMG_SRC_ATTR); 
           this.classList.remove(IMG_HIDDEN_CLASS);
           this.parentElement.classList.remove(IMG_CONTAINER_PLACEHOLDER_CLASS);
         };
       } 
  };
  
})();
  

/*
LINKS:

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

polyfill:
https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill

*/


/*++++++++++++++++++++++++++++++++++++++++++++++++
  Polyfills for Intersection Observer and Array.from
++++++++++++++++++++++++++++++++++++++++++++++++++*/

function loadPolyfills() {
  "use strict";

  const isIntersectionObserverSupported = "IntersectionObserver" in window;
  
  // If Intersection Observer doesn't supported we apply polyfill for support.
  if(!isIntersectionObserverSupported) {
     IntersectionObserverPolyfill();
  };
  
  /// minified version of the Intersection Observer polyfill from: https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill
  function IntersectionObserverPolyfill() {
    
    /*START*/
   !function(t,e){"use strict";function n(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||u(),this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=e.width*e.height,o=this.intersectionRect,i=o.width*o.height;this.intersectionRatio=n?i/n:this.isIntersecting?1:0}function o(t,e){var n=e||{};if("function"!=typeof t)throw Error("callback must be a function");if(n.root&&1!=n.root.nodeType)throw Error("root must be an Element");this._checkForIntersections=r(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(n.rootMargin),this.thresholds=this._initThresholds(n.threshold),this.root=n.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}function i(){return t.performance&&performance.now&&performance.now()}function r(t,e){var n=null;return function(){n||(n=setTimeout(function(){t(),n=null},e))}}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,n)}function c(t,e){var n=Math.max(t.top,e.top),o=Math.min(t.bottom,e.bottom),i=Math.max(t.left,e.left),r=Math.min(t.right,e.right),s=r-i,h=o-n;return s>=0&&h>=0&&{top:n,bottom:o,left:i,right:r,width:s,height:h}}function a(t){var e;try{e=t.getBoundingClientRect()}catch(n){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):u()}function u(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function l(t,e){for(var n=e;n;){if(11==n.nodeType&&n.host&&(n=n.host),n==t)return!0;n=n.parentNode}return!1}if(!("IntersectionObserver"in t&&"IntersectionObserverEntry"in t&&"intersectionRatio"in t.IntersectionObserverEntry.prototype)){var p=[];o.prototype.THROTTLE_TIMEOUT=100,o.prototype.POLL_INTERVAL=null,o.prototype.observe=function(t){if(!this._observationTargets.some(function(e){return e.element==t})){if(!t||1!=t.nodeType)throw Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections()}},o.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},o.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},o.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},o.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||0>t||t>1)throw Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},o.prototype._parseRootMargin=function(t){var e=t||"0px",n=e.split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return n[1]=n[1]||n[0],n[2]=n[2]||n[0],n[3]=n[3]||n[1],n},o.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this._checkForIntersections(),this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(s(t,"resize",this._checkForIntersections,!0),s(e,"scroll",this._checkForIntersections,!0),"MutationObserver"in t&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},o.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,h(t,"resize",this._checkForIntersections,!0),h(e,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},o.prototype._checkForIntersections=function(){var t=this._rootIsInDom(),e=t?this._getRootRect():u();this._observationTargets.forEach(function(o){var r=o.element,s=a(r),h=this._rootContainsTarget(r),c=o.entry,u=t&&h&&this._computeTargetAndRootIntersection(r,e),l=o.entry=new n({time:i(),target:r,boundingClientRect:s,rootBounds:e,intersectionRect:u});c?t&&h?this._hasCrossedThreshold(c,l)&&this._queuedEntries.push(l):c&&c.isIntersecting&&this._queuedEntries.push(l):this._queuedEntries.push(l)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},o.prototype._computeTargetAndRootIntersection=function(n,o){if("none"!=t.getComputedStyle(n).display){for(var i=a(n),r=i,s=n.parentNode,h=!1;!h;){var u=null;if(s==this.root||s==e.body||s==e.documentElement||1!=s.nodeType?(h=!0,u=o):"visible"!=t.getComputedStyle(s).overflow&&(u=a(s)),u&&(r=c(u,r),!r))break;s=s.parentNode}return r}},o.prototype._getRootRect=function(){var t;if(this.root)t=a(this.root);else{var n=e.documentElement,o=e.body;t={top:0,left:0,right:n.clientWidth||o.clientWidth,width:n.clientWidth||o.clientWidth,bottom:n.clientHeight||o.clientHeight,height:n.clientHeight||o.clientHeight}}return this._expandRectByRootMargin(t)},o.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100}),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},o.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i<this.thresholds.length;i++){var r=this.thresholds[i];if(r==n||r==o||n>r!=o>r)return!0}},o.prototype._rootIsInDom=function(){return!this.root||l(e,this.root)},o.prototype._rootContainsTarget=function(t){return l(this.root||e,t)},o.prototype._registerInstance=function(){p.indexOf(this)<0&&p.push(this)},o.prototype._unregisterInstance=function(){var t=p.indexOf(this);-1!=t&&p.splice(t,1)},t.IntersectionObserver=o,t.IntersectionObserverEntry=n}}(window,document); 
    /*END*/
    
  };
  
  
 /*Mini polyfill for Array.from without optional arguments (mapFunction [second argument], thisArg [third argument]) (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)*/
  if(typeof Array.from !== "function") {
    Array.from = function(arrLikeObj) {
      return Array.prototype.slice.call(arrLikeObj, 0);
    }
  };
  
  
};






















/*+++++++++++++++++++++++++++++++++++
  Polyfill for Intersection Observer
+++++++++++++++++++++++++++++++++++++*/
/*
/// don't work, because there is an error using it in IE11 (issue's been opened on GitHub)
function loadPolyfills() {
  "use strict";
  
  const isIntersectionObserverSupported = "IntersectionObserver" in window;
  
  // If Intersection Observer doesn't supported we download polyfill for support.
  if(!isIntersectionObserverSupported) { /// don't use it, because there is an error using it in IE11 (issue's been opened on GitHub)
     loadScript("https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver");
  };
 */ 
  
  /*
  * Creates <script> tag with provided URL and append it to the <head> HTML tag
  * @param {String} srcUrl - URL for the script to be downloaded.
  */
/*  function loadScript(srcUrl) {
    
    const script = document.createElement("script");
    
    script.type = "text/javascript";
    
    script.src = srcUrl;
    
    document.head.appendChild(script);
  };
  
  
};*/


/* /// OLD VERSION CODE
  function handleIntersection(entries, observerObj) {

    entries.forEach(function(entry, i) {

      if(!entry.isIntersecting) return; /// the target is no longer as visible as the given threshold
      
      const img = entry.target; /// the real HTML Element
      const srcVal = img.getAttribute(IMG_SRC_ATTR);
      
       if(srcVal) {
         img.src = srcVal; // replace fake src to the original one
         img.onload = function() { 
           this.removeAttribute(IMG_SRC_ATTR); 
           this.classList.remove(IMG_HIDDEN_CLASS);
           this.parentElement.classList.remove(IMG_CONTAINER_PLACEHOLDER_CLASS);
           /// we can instruct Intersetion observer to stop observing particular image that has been already downloaded.
           observerObj.unobserve(this); /// instructs the IntersectionObserver to stop observing the specified target element
         };
       }
      
       /// we can check if this is the last image that should be downloaded, we can then disconnect Intersection observer completely.
       //if(img === lastImg) {
       //   debugger; // disconnect observer
       //   observerObj.disconnect();
      // }
      
    });
    
  };

*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console