Fade two areas next to each other

[Messa1]

I have tried to define two areas that change when scrolling. In addition I have redesigned the fade example and tries to enclose individually with an additional <section class = "container"> both areas.

Here's an example of what I want to do:

<section class="container col span_2_of_3">
<section class="panel">
<b>ONE-left</b>
</section>
</section>

<section class="container col span_1_of_3">
<section class="panel">
<b>ONE-right</b>
</section>
</section>

CSS:

.col {
     display: block;
     float: left;
     margin: 1% 0 1% 1.6%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}
.panel {
         height: 100%;
          width: 100%;
}