Scroll effect

by raskalbass

HTML

<div class="category1">
    <div class="main_text">
        <ol class="rounded-list">
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
                 <h3 style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit nisi in feugiat porttitor. </h3>

            </li>
            <li>
  ...

CSS

.category1 {
    margin: 10px;
    padding-bottom: 600px;
    padding-top: 250px;
}

.main_text {
    background: #AFCEE0;
    color: #000;
    line-height: 16px;
    font-size: 14px;
}
.rounded-list {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px'trebuchet MS', 'lucida sans';
    padding: 5px;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list ol {
    margin: 0 0 0 2em;
}
/* -------------------------------------- */
 .rounded-list h3 {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.h3_sel, .rounded-list h3:hover{
    background: #eee !important;
}
.h3_sel:before, .rounded-list h3:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.rounded-list h3:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

JavaScript

$(window).scroll(function () {
    var sc = $(window).scrollTop();
    var c = Math.floor(sc / 70);
    $("h3").removeClass("h3_sel");
    $(".rounded-list li:nth-child("+ c +") h3").addClass("h3_sel");
});