Skip to content

Instantly share code, notes, and snippets.

@olitreadwell

olitreadwell/index.html

Created June 29, 2025 21:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save olitreadwell/a20ba32dfd890b09597be4e27eac5e37 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save olitreadwell/a20ba32dfd890b09597be4e27eac5e37 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. olitreadwell created this gist Jun 29, 2025.
    25 changes: 25 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <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>
    18 changes: 18 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    // 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)');
    });
    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    7 changes: 7 additions & 0 deletions stairs-text-wip.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Stairs text - #wip
    ------------------


    A [Pen](https://codepen.io/DedaloD/pen/NWwXNZp) by [Den](https://codepen.io/DedaloD) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/NWwXNZp).
    83 changes: 83 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    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;
    }