<div class='heroEffects'>
    <div class="bg">  
        <div class="arrow bouncy">  
            <svg height="25" width="50">
                <polygon points="0,0 25,10 50,0 25,25" fill="rgba(255,255,255,.5)" stroke-width="0" stroke="rgba(255,255,255,.3)"/>
            </svg>
        </div>  
        <div class="title centerV"> 
            <div>
                <div class="text"> 
                    <h1>Hero Effects</h1>
                    <p>Lorem Ipsum, lorem ipsum, lorem ipsum</p>
                </div>
            </div>
        </div> 
    </div> 
    <div class="shade"></div>
</div>


<!-- For scrolling -->
<div class='content'>

    <p>Bataille's analysis of predialectic objectivism holds that culture is used in the service of archaic, sexist perceptions of art. A number of constructions concerning capitalist objectivism may be found. However, the primary theme of von Ludwig's[2] model of pretextual capitalist theory is the bridge between society and class. If capitalist objectivism holds, we have to choose between predialectic objectivism and Lacanist obscurity.</p>

    <p>Bataille's analysis of predialectic objectivism holds that culture is used in the service of archaic, sexist perceptions of art. A number of constructions concerning capitalist objectivism may be found. However, the primary theme of von Ludwig's[2] model of pretextual capitalist theory is the bridge between society and class. If capitalist objectivism holds, we have to choose between predialectic objectivism and Lacanist obscurity.</p>

    <p>Bataille's analysis of predialectic objectivism holds that culture is used in the service of archaic, sexist perceptions of art. A number of constructions concerning capitalist objectivism may be found. However, the primary theme of von Ludwig's[2] model of pretextual capitalist theory is the bridge between society and class. If capitalist objectivism holds, we have to choose between predialectic objectivism and Lacanist obscurity.</p>

    <p>Bataille's analysis of predialectic objectivism holds that culture is used in the service of archaic, sexist perceptions of art. A number of constructions concerning capitalist objectivism may be found. However, the primary theme of von Ludwig's[2] model of pretextual capitalist theory is the bridge between society and class. If capitalist objectivism holds, we have to choose between predialectic objectivism and Lacanist obscurity.</p>

</div>

// Try another height here if you don't want full screen...
// $heroHeight: 80%;
// $heroHeight: 500px;

$heroHeight: 100vh;

.heroEffects {
    height: $heroHeight;
    position: relative;
    z-index: -1;
    top: 0;
    left: 0;
    .bg {
        height: $heroHeight;
        position: fixed;
        width: 100%;
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungleBG.jpg');
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        background-position: center center;
        transform: scale(1); //need this (to set the start) for some cross-browser issues
    }
    .shade {
        opacity: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 3;
        height: $heroHeight;
        position: fixed;
        width: 100%;
    }
    .title {
        width: 100%;
        .text {
            z-index: 1;
            width: 100%;
            text-align: center;
            color: White;
            padding: 4em;
            background: rgba(0, 0, 0, .6);
        }
    }
    .arrow {
        position: fixed;
        left: 50%;
        margin-left: -20px;
        bottom: 0;
        width: 40px;
        height: 40px;
        opacity: 1;
    }
}

.centerV {
    display: table;
    height: 100%;
    > div {
        display: table-cell;
        vertical-align: middle;
    }
}

h1 {
    font-size: 5em;
    margin-bottom: 0.1em;
    font: 5em/1em;
    color: #fff;
}

p {
    width: 60vw;
    margin: 0 auto;
    line-height: 1.5em;
    padding: 10px 20px 0;
    border-top: solid 1px rgba(255, 255, 255, .2);
    letter-spacing: 0.015em;
    display: block;
    color: #eee;
}

.content {
    background: #cdcdcd;
    padding: 150px 50px;
    p {
        color: #111;
        font-size: 2em;
        margin-bottom: 50px;
    }
}

.bouncy {
    animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes Weeeeeeeeeee {
    0% {
        transform: translate(0, 0px);
        animation-timing-function: cubic-bezier(.19, .28, .27, 1);
    }
    11% {
        transform: translate(0, -25px) scaleX(.8);
        animation-timing-function: cubic-bezier(.57, .01, .84, .5);
    }
    20% {
        transform: translate(0, 0px) scaleY(.8);
        animation-timing-function: cubic-bezier(.19, .28, .27, 1);
    }
    28% {
        transform: translate(0, -10px);
        animation-timing-function: cubic-bezier(.57, .01, .84, .5);
    }
    36% {
        transform: translate(0, 0px);
        animation-timing-function: cubic-bezier(.19, .28, .27, 1);
    }
    100% {
        transform: translate(0, 0px);
        animation-timing-function: cubic-bezier(.19, .28, .27, 1);
    }
}

// ------------- Layout stuff --------------------

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: 'Julius Sans One', sans-serif;
    font-size: 12px;
}
View Compiled
(function () {
    $(window).scroll(function () { 
        var Num = $(window).scrollTop() / 500;
        var Num2 = $(window).scrollTop() * .0004; // higher number for more zoom
        var Num2mod = Num2 + 1;
        var Num3 = $(window).scrollTop() * .2; // Title speed
        var Num3mod = Num3 + 1;
        return $('.shade').css('opacity', Num),
        $(".bg").css({"transform":"scale(" + Num2mod + ")"}),
        $(".text").css({"margin-top":"-" + Num3mod + "px"});
    });
}.call(this));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js