JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<div id="imageheader">
    
</div>
<div id="content">
    <div id="header">
        <div class="headline">Here goes the huge Headline</div>
    </div>
    <div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum elit at diam dapibus viverra. Suspendisse vel blandit urna. Nunc quis accumsan velit. Morbi nec libero non nisl dictum fermentum eu ac sapien. Quisque sagittis urna non orci vehicula eu blandit ipsum tincidunt. Duis et felis nisl, in cursus eros. Suspendisse id tortor elit, vel aliquet augue. Nullam vitae nisi libero. Nam sed commodo augue.

Aliquam erat volutpat. Nunc est ipsum, auctor mollis aliquet nec, eleifend sed ipsum. Maecenas viverra libero eu enim hendrerit suscipit. Duis dolor mi, ultricies sagittis faucibus non, sodales ut lectus. Fusce suscipit elit non diam cursus tristique. Maecenas consectetur risus id nunc ornare non elementum ipsum adipiscing. Nullam commodo elementum magna, a ornare erat rhoncus id. Nunc lorem odio, pharetra sed lacinia vitae, rhoncus vitae nunc. Ut non varius neque. Suspendisse vitae risus in felis dictum pharetra consequat ac dui. Etiam ornare dictum diam eu pharetra. Sed ultrices ornare dictum. Praesent mi dui, porta vel facilisis eget, vestibulum eu magna. Ut a orci quis lectus mollis blandit non non eros. Sed ultricies mollis dignissim. In massa velit, auctor eget laoreet id, tristique a arcu.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum elit at diam dapibus viverra. Suspendisse vel blandit urna. Nunc quis accumsan velit. Morbi nec libero non nisl dictum fermentum eu ac sapien. Quisque sagittis urna non orci vehicula eu blandit ipsum tincidunt. Duis et felis nisl, in cursus eros. Suspendisse id tortor elit, vel aliquet augue. Nullam vitae nisi libero. Nam sed commodo augue.

Aliquam erat volutpat. Nunc est ipsum, auctor mollis aliquet nec, eleifend sed ipsum. Maecenas viverra libero eu enim hendrerit suscipit. Duis dolor mi, ultricies...

CSS

#imageheader {
    height: 400px;
    width: 100%;
    background:#456 url('http://soworldwide.org/wp-content/themes/soww_theme/library/images/header-bg-5.jpg') no-repeat center 0;
    background-size: cover;
    color: white;
    font-size: 20px;
    text-align: center;
    position: fixed;
    z-index: 0;
}
#content {
    width: 100%;
    background-color:;
    z-index: 5;
    position: absolute;
    color: #F2F2F2;
}
#header {
    height:400px;
}
.headline {
    padding: 25px;
    font-size: 72px;
}
.text {
    padding: 25px;
    background-color: #333;
}

JavaScript

// Parallax 
(function($){
    $.fn.parallax = function(options){
        var $$ = $(this);
        offset = $$.offset();
        var defaults = {
            "start": 0,
            "stop": offset.top + $$.height(),
            "coeff": 0.95
        };
        var opts = $.extend(defaults, options);
        return this.each(function(){
            $(window).bind('scroll', function() {
                windowTop = $(window).scrollTop();
                if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                    newCoord = windowTop * opts.coeff;
                    $$.css({
                        "background-position": "0 "+ newCoord + "px"
                    });
                }
            });
        });
    };
})(jQuery);

// Call the Plugin
$('#imageheader').parallax({ "coeff":-0.3 });
$('#content').parallax({ "coeff":1.15 });



$(window).scroll(function(){
   if($(window).scrollTop()<20){
         $('.headline').stop(true,true).fadeIn("slow");
   } else {
         $('.headline').stop(true,true).fadeOut("slow");
   }
});