Parallax header

by lovromar

HTML

<section class="head">
    <div class="background"></div>
    <div class="inner"></div>
</section>

<section>
<H1>QUID EST IGITUR, INQUIT, QUOD REQUIRAS?</H1>

<P>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. NON POTES ERGO ISTA TUERI, TORQUATE, MIHI CREDE, SI TE IPSE ET TUAS COGITATIONES ET STUDIA PERSPEXERIS; EX EA QUAE SINT APTA, EA BONESTA, EA PULCHRA, EA LAUDABILIA, ILLA AUTEM SUPERIORA NATURALE NOMINANTUR, QUAE CONIUNCTA CUM HONESTIS VITAM BEATAM PERFICIUNT ET ABSOLVUNT. ITA REDARGUITUR IPSE A SESE, CONVINCUNTURQUE SCRIPTA EIUS PROBITATE IPSIUS AC MORIBUS. ET QUIS A STOICIS ET QUEM AD MODUM DICERETUR, TAMEN EGO QUOQUE EXPONAM, UT PERSPICIAMUS, SI POTUERIMUS, QUIDNAM A ZENONE NOVI SIT ALLATUM. <A HREF='HTTP://LORIPSUM.NET/' TARGET='_BLANK'>QUARE ATTENDE, QUAESO.</A> DUO REGES: CONSTRUCTIO INTERRETE. </P>

<P>HAEC MIRABILIA VIDERI INTELLEGO, SED CUM CERTE SUPERIORA FIRMA AC VERA SINT, HIS AUTEM EA CONSENTANEA ET CONSEQUENTIA, NE DE HORUM QUIDEM EST VERITATE DUBITANDUM. ATQUE UT RELIQUI FURES EARUM RERUM, QUAS CEPERUNT, SIGNA COMMUTANT, SIC ILLI, UT SENTENTIIS NOSTRIS PRO SUIS UTERENTUR, NOMINA TAMQUAM RERUM NOTAS MUTAVERUNT. NUM IGITUR DUBIUM EST, QUIN, SI IN RE IPSA NIHIL PECCATUR A SUPERIORIBUS, VERBIS ILLI COMMODIUS UTANTUR? NAM HUNC IPSUM SIVE FINEM SIVE EXTREMUM SIVE ULTIMUM DEFINIEBAS ID ESSE, QUO OMNIA, QUAE RECTE FIERENT, REFERRENTUR NEQUE ID IPSUM USQUAM REFERRETUR. QUAE ETSI MIHI NULLO MODO PROBANTUR, TAMEN DEMOCRITUM LAUDATUM A CETERIS AB HOC, QUI EUM UNUM SECUTUS ESSET, NOLLEM VITUPERATUM. QUOD MIHI QUIDEM VISUS EST, CUM SCIRET, VELLE TAMEN CONFITENTEM AUDIRE TORQUATUM. <A HREF='HTTP://LORIPSUM.NET/' TARGET='_BLANK'>EADEM FORTITUDINIS RATIO REPERIETUR.</A> <MARK>REGULI REICIENDAM;</MARK> ITA, QUEM AD MODUM IN SENATU SEMPER EST ALIQUIS, QUI INTERPRETEM POSTULET, SIC, ISTI NOBIS CUM INTERPRETE AUDIENDI SUNT. CUIUS QUIDEM, QUONIAM STOICUS FUIT, SENTENTIA CONDEMNATA MIHI VIDETUR ESSE INANITAS ISTA VERBORUM. IS ENIM, QUI OCCULTUS ET TECTUS...

CSS

* {
    margin: 0;
    padding: 0;
}

section.head {
    width: 100%;
    height: 250px;
    overflow: hidden;
    display: block;
    z-index: 0;
}
section.head .background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;

    background-color: black;
}
section.head .inner {
    position: relative;
    top: 50%;
    left: 50%;
    background-color: green;
}

JavaScript

// Viewport Height for head section
function viewport_height() {
    var height = $(window).height();
    var viewportHeight = (50 * height) / 100;
    var viewportHeightInner = (50 * height) / 150;
    var viewportHeightInnerMargin = (50 * height) / 300;
    viewportHeight = parseInt(viewportHeight) + 'px';
    viewportHeightInnerMargin = parseInt('-' + viewportHeightInnerMargin) + 'px';
    $(".head").css('height',viewportHeight);
    $(".head .background").css('height',viewportHeight);
    $(".head .inner").css('height',viewportHeightInner);
    $(".head .inner").css('width',viewportHeightInner);
    $(".head .inner").css('margin-top',viewportHeightInnerMargin);
    $(".head .inner").css('margin-left',viewportHeightInnerMargin);
}

// Resize head section on scale
$(document).ready(function() {
    viewport_height();
    $(window).bind('resize', viewport_height);
});

// Logo Parallax scroll
$(window).scroll(function(e){
    if ($(window).width() > 800) {
        $('.head .inner').css({
            'margin-top' : +($(this).scrollTop()/2)+"px",
        });
    }
});