Based on html5 and css3 responsive full-screen scrolling page switching, html5css3

Based on html5 and css3 responsive full-screen scrolling page switching, html5css3

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

Download Online Preview source code

HTML

The class of wrapper div is st-container, which contains the radio used as the navigation button and the st-scroll panel used 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>            
We need to change the Panel height so that the corresponding panel is displayed on the screen when you click the navigation button. You can use the sibling selector to obtain the correct panel when you click the button. We need to place the radio button and st-scroll on the same layer of the dom structure and on the top of the hyperlink (the transparency of the hyperlink will be set to 0 to make it invisible ). To select the Panel correctly, we also need to provide an id for each panel and the radio button. For CSS code, see the css file in the downloaded file.
Via: http://www.w2bc.com/Article/26057