Responsive full-screen scrolling page switching effect based on html5 and css3_html/css_WEB-ITnose

Share a full-screen responsive HTML5 and CSS3 page switching effect. This page layout effect is very useful for websites and apps that require a fixed 100% height and width. The rendering is as follows:

Online preview Source code download

HTML

The class of wrapper div is st-container, which contains radio and navigation buttons Panel st-scroll for page switching.

<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 -->

What we have to do is change the height value of the panel so that the corresponding panel is displayed on the screen when the navigation button is clicked. You can use the sibling selector to get the correct panel on button click. We need the radio button and st-scroll to be on the same layer of the DOM structure, and above the hyperlink (the hyperlink's transparency will be set to 0, making it invisible). In order to select the panels correctly, we also need to give each panel and radio button an id. For CSS code, please refer to the css file in the download file.

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