Stairs text - #wip

index.html

<div class="house">
  <div class="support">
    <div class="staircase">
      <div class="stairs">
        <div class="stair">
          <span class="panel">hello</span>
          <span class="panel bye">bye</span>
          <span class="panel">holla</span>
        </div>
        <div class="stair">
          <span class="panel bye">bye</span>
          <span class="panel">holla</span>
          <span class="panel">hello</span>
        </div>
        <div class="stair">
          <span class="panel">holla</span>
          <span class="panel">hello</span>
          <span class="panel bye">bye</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="scroll">scroll down</div>

script.js

// Map value from one range of numbers to another
function map(value, in_min, in_max, out_min, out_max) {
  return Math.floor((value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min);
}

var $w = $( window );
var $h = $( '.house' );
var $p = $( '.panel' );
var ph = $p.height(); // Panel height

$h.css('height', $w.height() * 2);

$w.scroll(function() {
  $p.each(function() {
    var tow = $w.scrollTop(); // Top Of Window
    $(this).css('transform', 'translatey(' + map(tow, 0, $w.height(), 0, (ph * -2)) + 'px)');
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

stairs-text-wip.markdown

Stairs text - #wip

A Pen by Den on CodePen.

License.

style.css

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

.support {
  position: fixed;
  top: 50px;
}

.staircase {
  width: 600px;
  padding-top: 1em;
  padding-right: 1em;
  padding-left: 0.5em;
  padding-bottom: 1em;
  font-size: 140px;
}

.stairs {
  display: inline-block;
  margin: 0;
  position: relative
}

.stairs > .panel,
.stairs > .stair {
  padding: 0 .1em
}

.stairs > .panel,
.stairs > .stair {
  overflow: hidden;
  font-size: 1em;
  margin: -1px 0;
  white-space: nowrap;
  height: .8em
}

.stairs > .panel,
.stairs > .stair {
  line-height: .8em;
  height: .8em
}

.panel {
  display: block;
  position: relative;
}

.stairs > .stair:nth-of-type(odd) {
  transform: skew(60deg, -30deg) scaley(.6666666667);
}

.stairs > .stair:nth-of-type(even) {
  transform: skew(0deg, -30deg) scaley(1.3333333333);
}

.stair:nth-of-type(2) {
  position: relative;
  left: .46em;
}

.stair:nth-of-type(3) {
  position: relative;
  left: .92em;
}

.panel.bye {
  transform: translatex(-4px);
}


/* Scroll */
.scroll {
  position: fixed;
  bottom: 20px;
  right: 20px;
}