JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rpominov.github.io/kefir/dist/kefir.js"></script>
<div class="clock">
    <div class="label">&darr; scroll &darr;</div>
    <div class="seconds"></div>
    <div class="minutes"></div>
    <div class="hours"></div>
</div>

<div class="content-to-scroll"></div>

CSS

.clock {
    width: 201px;
    height: 201px;
    border-radius: 100%;
    border: solid 1px #000;
    position: fixed;
    top: 0;
    left: 0;
}
.hours,
.minutes,
.seconds {
    position: absolute;
    left: 100px;
    bottom: 100px;
    width: 1px;
}
.hours {
    height: 65px;
    border: solid 2px #000;
    margin-left: -2px;
    margin-bottom: -4px;
    background: #000;
    -webkit-transform-origin: 2.5px 65px;
            transform-origin: 2.5px 65px;
}
.minutes {
    height: 80px;
    border: solid 1px #aaa;
    margin-left: -1px;
    margin-bottom: -5px;
    background: #aaa;
    -webkit-transform-origin: 1.5px 76px;
            transform-origin: 1.5px 76px;
}
.seconds {
    height: 95px;
    background: red;
    margin-bottom: -7px;
    -webkit-transform-origin: 0.5px 88px;
            transform-origin: 0.5px 88px;
}

.label {
    position: absolute;
    font-family: sans-serif;
    width: 100%;
    top: 120px;
    text-align: center;
    color: #666;
    font-size: 14px;
}


html, body {
    padding: 0;
}  
.content-to-scroll {
    height: 44000px;
}

JavaScript

// Base *scroll* Property
// (we replacing the base proberty from time-based to scroll-based)

$window = $(window);

function getScroll() {
    return $window.scrollTop();
}

var curScroll = Kefir
    .fromEvents($window, 'scroll', getScroll)
    .toProperty(getScroll);

var baseTime = (new Date(2015, 3, 25, 0, 0, 0, 0)).getTime();
    
var curTime = curScroll.map(function(scroll) {
    return baseTime + scroll * 1000;
});




// ---------------- all below is same as in previous example ----------------
// ------------------- ( http://jsfiddle.net/vyppkj0k/3/ ) --------------------

// Arrows angle Property

function timeToAngles(timestamp) {
    var date = new Date(timestamp);
    var seconds = date.getSeconds();
    var minutes =  date.getMinutes() + seconds / 60;
    var hours = date.getHours() + minutes / 60;
    return {
        seconds: 360 * seconds / 60,
        minutes: 360 * minutes / 60,
        hours: 360 * hours / 12,
    };
}

var angles = curTime.map(timeToAngles);



// Side effects

$seconds = $('.seconds');
$minutes = $('.minutes');
$hours = $('.hours');

function rotateStr(angle) {
    return 'rotate(' + angle + 'deg)';
}

angles.onValue(function(a) {
    $seconds.css('transform', rotateStr(a.seconds));
    $minutes.css('transform', rotateStr(a.minutes));
    $hours.css('transform', rotateStr(a.hours));
});