JSFiddle - React, Tailwind, and code Playground

by kent93

HTML

<!DOCTYPE HTML>
<html>
    <head>
    <title>public_html, index files</title>
    <link rel="stylesheet" href="resources/view/landing.css" type="text/css">
    <script>
                (function($, self){

        if(!$ || !self) {
            return;
        }

        for(var i=0; i<self.properties.length; i++) {
            var property = self.properties[i],
                camelCased = StyleFix.camelCase(property),
                PrefixCamelCased = self.prefixProperty(property, true);
            
            $.cssProps[camelCased] = PrefixCamelCased;
        }

        })(window.jQuery, window.PrefixFree);
    </script>
    
    </head>
    <body>
            
            
            <div class='behindTheGate'>
                <h1>Headline</h1>
                <p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph...

CSS

/*Meyer's CSS RESET start*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: transparent;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
/*Meyer's CSS RESET end*/

/*Custom CSS*/
div.foldGate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: yellow;
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
}

div.behindTheGate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: green;
    
}

.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten {
    position: relative;
    background-color: red;
    width: 100%;

}

.one { 
    background-color: red;
}

.two { 
    background-color: blue;
}

.three { 
    background-color: red;
}

.four { 
    background-color: blue;
}

.five { 
    background-color: red;
}

.six { 
    background-color: blue;
}

.seven { 
    background-color: red;
}

.eight { 
    background-color: blue;
}

.nine { 
    background-color: red;
}

.ten { 
    background-color: blue;
}

/*Custom CSS*/

JavaScript

$(document).ready(function($) {
    var viewport_w = window.innerWidth;
    var viewport_h = window.innerHeight;
    var foldPlate_h = viewport_h  / 10;
    $('div.foldGate').css({'height' : viewport_h});
    $('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten').css({'height' : foldPlate_h});


    $(window).scroll(function(){
        $('div.foldGate');
    });
});