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

              
                <div class="fake-scrolling-box">
  <div></div> 
</div>

<svg class='hole-top' height='78' width='302'>
  <path d='M151,10.5 C226.596187,10.5 290.125456,24.5123071 300.119534,43.2648391 L300.244862,43.5 L300.119534,43.7351609 C290.125456,62.4876929 226.596187,76.5 151,76.5 C75.4038128,76.5 11.8745439,62.4876929 1.88046584,43.7351609 L1.7551379,43.5 L1.88046584,43.2648391 C11.8745439,24.5123071 75.4038128,10.5 151,10.5 Z' fill='#323230'></path>
  <path class='hole-top-a' d='M0.5,38.5 C0.5,17.3313043 67.8252171,0.5 151,0.5 C234.174783,0.5 301.5,17.3313043 301.5,38.5 C301.5,40.2676026 301.035288,42.0168729 300.119534,43.7351609 L299.678287,44.563102 L299.237039,43.7351609 C289.498377,25.4618814 226.197729,11.5 151,11.5 C75.8022715,11.5 12.5016234,25.4618814 2.76296085,43.7351609 L2.32171334,44.563102 L1.88046584,43.7351609 C0.964711923,42.0168729 0.5,40.2676026 0.5,38.5 Z'></path>
</svg>

<svg id='root'>
  <defs>
    <g id='bat'>
      <path d='M36.7633814,15.4271457 C34.6988794,15.4561685 33.3167113,15.6638093 32.6168771,16.0500682 C31.9170429,16.4363271 30.4569574,17.7974089 28.2366207,20.1333134 C27.1122622,17.5543182 25.5899381,16.0607355 23.6696483,15.6525653 C21.109262,15.1083384 17.8449852,17.0887869 13.876818,21.5939108 C13.596506,18.1914637 12.0161326,16.1841125 9.13569797,15.5718572 C6.25526332,14.9596019 3.51498469,16.0485702 0.914862089,18.838762 C4.94263364,9.33200996 10.3949439,4.13949087 17.2717927,3.26120476 C24.1486416,2.38291865 30.3555917,3.86938987 35.892643,7.72061842 L36.7633814,15.4271457 Z' id='wl'></path>
      <path d='M47.8222814,8.25062235 C52.7505934,3.94958351 59.0893206,2.45548636 66.838463,3.76833093 C74.5876054,5.08117549 79.8527236,10.2117488 82.6338176,19.160051 C80.0932994,16.9486147 77.4408721,16.0505374 74.6765359,16.4658191 C71.9121997,16.8811008 70.1901152,18.6879226 69.5102824,21.8862846 C67.173714,18.7153397 64.7252366,16.8577538 62.1648503,16.3135269 C59.6044639,15.7693 57.1502419,17.0862147 54.8021843,20.2642711 C53.5897469,18.4438915 52.5135036,17.2122695 51.5734543,16.5694049 C50.6334051,15.9265404 49.2271794,15.4604946 47.3547773,15.1712677 L47.8222814,8.25062235 Z' id='wr'></path>
      <path d='M35.8800747,0.697930542 L39.1088047,4.39279674 L44.4915764,5.03551046 L48.3917604,0.85022272 L47.8222814,8.25062235 L47.3547773,15.1712677 L45.7529807,20.3465225 C44.7049844,22.1294829 43.3808655,22.8508923 41.780624,22.5107504 C40.1803826,22.1706086 39.0021643,21.4187409 38.2459693,20.2551472 L36.7633814,15.4271457 L35.892643,7.72061842 L35.8800747,0.697930542 Z M43.8499247,10.4148503 C44.3801981,10.5275634 44.9013811,10.1893488 45.0140194,9.65942683 C45.1266578,9.12950486 44.7880978,8.60854621 44.2578244,8.49583313 C43.727551,8.38312004 43.2063681,8.72133467 43.0937297,9.25125664 C42.9810913,9.78117861 43.3196513,10.3021373 43.8499247,10.4148503 Z M39.9073703,10.0782643 C40.4376436,10.1909773 40.9588266,9.85276272 41.071465,9.32284075 C41.1841034,8.79291878 40.8455433,8.27196013 40.31527,8.15924705 C39.7849966,8.04653396 39.2638136,8.38474859 39.1511752,8.91467056 C39.0385368,9.44459253 39.3770969,9.96555117 39.9073703,10.0782643 Z'></path>
    </g>
  </defs>
</svg>

<svg class='hole-bottom' height='89' width='485'>
  <path d='M94.2801939,1.11022302e-16 C94.1824188,0.166314133 94.0890108,0.332983304 94,0.5 C103.777844,18.8467973 166.61675,33 242.678287,33 C318.739823,33 381.57873,18.8467973 391.356573,0.5 C391.267563,0.332983304 391.174155,0.166314133 391.076379,2.44249065e-15 L485,0 L485,89 L0,89 L0,0 L94.2801939,0 Z' stroke='none'></path>
</svg>

<section class='area'>— scroll —</section>

<div class='credits'>
  <span>
    by&nbsp;
    <a href='https://twitter.com/pixelia_me' rel='noopener noreferrer' target='_blank' title='Noel Delgado'>
    <svg height='12' viewBox='0 0 57 30'>
      <path d='M28.1312,9.5341 C29.7966,9.5341 32.1025,10.627 34.248,12.368 C49.3297,11.5836 53.8793,-0.4796 55.5773,0.6783 C57.8326,3.2476 50.8638,16.3535 39.4,19.088 C39.8655,20.2628 40.1364,21.4786 40.1364,22.6983 C40.1364,25.9478 38.837,26.7409 36.7281,28.8974 L36.704,28.824 C36.4799,29.0276 36.208,29.2318 35.8945,29.4 C35.8945,29.4 36.1346,27.0065 34.9341,26.7672 C34.9341,26.7672 34.3739,27.4054 33.0133,27.2459 C32.8532,25.8896 32.293,25.4109 32.1329,25.3311 C31.4126,25.4109 30.9324,26.5278 30.132,26.5278 C29.8,26.1969 29.5184,25.5615 29.312,24.972 C29.0201,25.4221 28.6036,26.1128 28.2512,26.2885 C27.8796,26.2885 27.1476,25.2858 26.836,24.832 C26.6262,25.4581 26.3285,26.1707 25.9702,26.5278 C25.1699,26.5278 24.6896,25.4109 23.9694,25.3311 C23.8093,25.4109 23.249,25.8896 23.089,27.2459 C21.7284,27.4054 21.1681,26.7672 21.1681,26.7672 C19.9676,27.0065 20.2077,29.4 20.2077,29.4 C19.6122,29.0804 19.1739,28.6307 18.908,28.304 L18.8667,28.3947 C17.1544,26.3262 16.1259,25.5896 16.1259,22.6983 C16.1259,21.4938 16.3637,20.2895 16.784,19.128 C5.2094,16.4922 -1.8448,3.2615 0.4227,0.6783 C2.119,-0.4785 6.6627,11.5578 21.708,12.364 C23.8143,10.6244 26.1724,9.5341 28.1312,9.5341 Z M28.8514,20.3048 C28.8514,20.3048 30.4121,21.7409 32.213,21.7409 C34.0137,21.7409 35.3343,19.3474 35.3343,19.3474 L28.8514,20.3048 Z M20.6879,19.3474 C20.6879,19.3474 22.2486,21.7409 24.0494,21.7409 C25.8502,21.7409 27.1707,20.3048 27.1707,20.3048 L20.6879,19.3474 Z' fill-rule='evenodd' stroke='none'></path>
    </svg>
    </a>
  </span>
</div>
              
            
!

CSS

              
                :root {
  font-size: 13px;
  font-family: monospace;
  --fg-color: #323230;
  --bg-color: #FDFDF2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--fg-color);
  background-color: var(--bg-color);
}

a {
  color: inherit;
}

svg {
  display: block;
  fill: currentColor;
  stroke-width: 1;
  stroke: var(--fg-color);
}

svg#root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - 25% + 39px);
}

#bat {
  stroke: none;
  fill: #000;
}

svg.hole-top {
  position: fixed;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hole-top-a {
  fill: var(--bg-color);
}

svg.hole-bottom {
  position: fixed;
  top: 75%;
  left: 50%;
  transform: translate(-50%, 5px);
  fill: var(--bg-color);
}

.area {
  font-size: 0.9rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

.fake-scrolling-box {
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  z-index: 1;
  -webkit-overflow-scrolling: touch;  
}

.fake-scrolling-box > div {
  height: 500vh;
}

.hide {
  display: none;
}

.credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.75rem;
}

.credits > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 1em;
}
              
            
!

JS

              
                /**
 * Noel Delgado | @pixelia_me
 */

const { log } = console;
const { cos, sin, ceil, floor, random, PI } = Math;

log('🕳');

const internals = {
  totalItems: 20,
  PIH: PI / 180,
  items: [],
  lastScrollY: 0,
  getRandomIntInclusive: (min, max) => {
    min = ceil(min);
    max = floor(max);
    return floor(random() * (max - min + 1)) + min;
  },
  convertRange: (value, r1, r2) => (value - r1[0]) * (r2[1] - r2[0]) / (r1[1] - r1[0]) + r2[0]
};

internals.fakeScrollingBox = document.querySelector('.fake-scrolling-box');
internals.area = {};
internals.area.el = document.querySelector('.area');
internals.svgRoot = document.getElementById('root');
internals.wingLeft = document.getElementById('wl');
internals.wingRight = document.getElementById('wr');

// -------

TweenMax.set(internals.wingLeft, { transformOrigin: 'right center'});
TweenMax.set(internals.wingRight, { transformOrigin: 'left center'});

TweenMax.to(internals.wingLeft, 0.1, {
  scaleX: 0.6,
  rotation: 40,
  repeat: -1,
  yoyo: true
});

TweenMax.to(internals.wingRight, 0.1, {
  scaleX: 0.6,
  rotation: -40,
  repeat: -1,
  yoyo: true
});

// -------

class Bat {

  constructor(svgRoot) {

    svgRoot.insertAdjacentHTML('beforeend', '<use xlink:href="#bat"></use>');

    this.el = svgRoot.children[svgRoot.children.length-1];

    TweenMax.set(this.el, {
      transformOrigin: 'center',
      rotation: internals.getRandomIntInclusive(-15, 15)
    });

    this._init();
  }

  _init() {

    const width = this.el.getBBox().width;

    this.el.dataset.hw = width / 2;
    this.el.dataset.top = internals.getRandomIntInclusive(0, internals.area.y3);
    this.el.dataset.offset = internals.getRandomIntInclusive(0, internals.area.h);
  }

  update(x, y) {

    TweenMax.set(this.el, { x, y });
  }
}

// -------

function updateDimensions() {

  internals.h = document.body.clientHeight;
  internals.area.w = internals.area.el.offsetWidth;
  internals.area.h = internals.area.el.offsetHeight;
  internals.area.y3 = internals.area.h / 3;
  internals.area.cy34 = (internals.area.h / 2) + (internals.area.h / 2) / 3;
}

function initialize() {

  internals.items = [];

  for (let i = 0; i < internals.totalItems; i++) {
    internals.items.push(new Bat(internals.svgRoot));
  }

  internals.itemsLen = internals.items.length;
}

function scrollHandler() {

  //internals.lastScrollY = window.scrollY;
  internals.lastScrollY = internals.fakeScrollingBox.scrollTop;
  requestTick();
}

function requestTick() {

  requestAnimationFrame(update);
}

function update() {

  let item, val = 0, deg = 0, x = 0, y = 0;

  for (let i = 0; i < internals.itemsLen; i++) {
    item = internals.items[i];
    val = internals.convertRange(
      internals.lastScrollY - ~~item.el.dataset.offset,
      [0, internals.area.y3], [0, 90]
    );
    deg = (val - 90) * internals.PIH;
    x = (internals.area.w / 2) * cos(deg) - ~~item.el.dataset.hw;
    y = internals.area.cy34 * sin(deg) + internals.area.cy34 + ~~item.el.dataset.top;

    if (i % 2) x = -((x + (~~item.el.dataset.hw * 2)) - internals.area.w);

    item.update(x, y);
  }
}

function onResizeHandler() {

  updateDimensions();
  update();
}

// -------

updateDimensions();
initialize();
update();

//window.addEventListener('scroll', scrollHandler);
internals.fakeScrollingBox.addEventListener('scroll', scrollHandler);
window.addEventListener('resize', onResizeHandler);
              
            
!
999px

Console