JSFiddle - React, Tailwind, and code Playground

by rsta

HTML

<div class="blank-space">
    <h1>GO BEYOND COURSE EVALUATIONS TO
        ACCELERATE IMPROVEMENT AND ENGAGEMENT</h1>
    <p>
The DNA of education is rapidly changing with shrinking budgets, growing competition, technological shifts, and changes in
expectations. Now more than ever higher education institutions need to ‘do more with less’. This has created a very real challenge.
Institutions need to continuously improve education while keeping costs down, all without compromising on quality.
It
    </p>
</div>
<div class="parallax-section"></div>
<div class="blank-space">
    <p>
        It doesn’t end there though. Today’s students aren’t the same as any before due to new technologies, social media, the rise of
e-learning, and the focus on developing 21st century skills and competencies. The way students learn has changed as well as their
expectations of education and instruction. This puts the focus on finding innovative ways to attract, retain, and engage students as
well as faculty members.
Alongside this is the increasing demand for accountability. The solution: institutions are looking to assessment
and analytics for answers.
Watch the video to learn how LEM can stimulate improvement and increase faculty and student engagement.
    </p>
</div>
<div class="blue-space"></div>

CSS

.parallax-section {
    color: #fff;
    padding: 60px;
    height: 200px;
    background-position: 50% 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('http://rsta.co/dev/explorance_parallax.jpg')
}

.blue-space {
    height: 500px;
    background-color: #2360b9;
}

.blank-space {
    text-align: center;
    padding: 2em;
}

body {
    font-family: Arial;
}

h1 {
    font-weight: normal;
    padding-top: 5em;
}

JavaScript

(function ($) {
        "use strict";

        $('.parallax-section').each(function () {
            
            var $el = $(this);
            
            $(window).scroll(function () {
                updateBackground($el);
            });
            updateBackground($el);
        });

    }(jQuery));

    var speed = 0.4;

    function updateBackground($el) {

        var diff = $(window).scrollTop() - $el.offset().top;
        var yPos = -(diff * speed);

        var coords = '50% ' + yPos + 'px';

        $el.css({
            backgroundPosition: coords
        });
    }