dynamic scroll css( fix version )

dynamic-scroll-fix.css

        div.stage {
            height: 600px;
            /*background-position: 50% 50%;*/
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        
        .content {
            padding: 30px 0;
            height: 600px;
        }
        
        .spot {
            max-width: 960px;
            margin: 0 auto;
        }
        
        .textcenter {
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            margin-top: auto;
            margin-bottom: auto;
        }
        
     .spot span.title {
         line-height: 600px;
         text-align: center;
 
         font-size: 60px;
         color: #fff;
         font-weight: bold;
         text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
     }

dynamic-scroll-fix.html

 <div class="stage" style="background-image: url(pexels-photo-67752.jpeg);">
        <div class="spot">
            <h2>新渡戸稲造</h2>
        </div>
    </div>
 
    <div class="content">
        <div class="spot textcenter">
 
        </div>
    </div>
 
    <div class="stage" style="background-image: url(pexels-photo-24580.jpg);">
        <div class="spot">
            <h2>二宮尊徳</h2>
        </div>
    </div>
 
    <div class="content">
        <div class="spot textcenter">
 
        </div>
    </div>
 
    <div class="stage" style="background-image: url(pexels-photo-30267.jpg);">
        <div class="spot">
            <h2></h2>
        </div>
    </div>
 
    <div class="content">
        <div class="spot textcenter">
 
        </div>
    </div>
 
 
    <div class="stage" style="background-image: url(pexels-photo.jpg);">
        <div class="spot">
            <h2>END</h2>
        </div>
    </div>

moving sample:
http://edutainment-fun.com/script/html/css/multiscroll_fix.html

explain:
http://edutainment-fun.com/hidemaru/it/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%80%E3%82%A4%E3%83%8A%E3%83%9F%E3%83%83%E3%82%AF%E3%81%AA%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E8%A1%A8%E7%A4%BA%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6_2490.html