基於html5和css3響應式全屏滾動頁面切換效果

分享一款全屏響應式的HTML5和CSS3頁面切換效果。這個頁面布局效果對於那些頁面要求固定100%高度和寬度的網站和APP來說是十分有用的。效果圖如下：

在線預覽   源碼下載

HTML

wrapper div的class為st-container，里面包含作為導航按鈕的radio和用於頁面切換的面板st-scroll。

<div class="st-container">
            
    <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
    <a href="#st-panel-1">Serendipity</a>
    
    <input type="radio" name="radio-set" id="st-control-2"/>
    <a href="#st-panel-2">Happiness</a>
    
    <input type="radio" name="radio-set" id="st-control-3"/>
    <a href="#st-panel-3">Tranquillity</a>
    
    <input type="radio" name="radio-set" id="st-control-4"/>
    <a href="#st-panel-4">Positivity</a>
    
    <input type="radio" name="radio-set" id="st-control-5"/>
    <a href="#st-panel-5">Passion</a>
    
    <div class="st-scroll">

        <section class="st-panel" id="st-panel-1">
            <div class="st-deco" data-icon="H"></div>
            <h2>Serendipity</h2>
            <p>Banksy adipisicing eiusmod banh mi sed...</p>
        </section>
        
        <section class="st-panel st-color" id="st-panel-2">
            <!-- ... -->
        </section>
        
        <!-- ... st-panel-3, st-panel-4, st-panel-5 -->

    </div><!-- // st-scroll -->
    
</div><!-- // st-container -->

我們要做的事情是改變面板的高度值，使點擊導航按鈕時相應的面板顯示在屏幕上。可以通過兄弟選擇器來在按鈕點擊時獲取正確的面板。我們需啊喲radio按鈕和st-scroll在dom結構的同一層上，並且要在超鏈接的上部（超鏈接的透明度將會被設置為0，使其不可見）。為了正確選擇面板，我們還要給每個面板和radio按鈕一個id。 CSS代碼請參考下載文件中的css文件。

via：http://www.w2bc.com/Article/26057