浙江 杭州

html5和css3响应式全屏滚动页面切换效果

系统分类: 网页特效 - html5 - html5模板 2015-05-12

人气95296

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       这是一款使用html5和纯css3制作的响应式全屏滚动页面切换效果。该页面切换效果中页面底部有一排导航按钮,点击按钮时页面以上下平滑滚动的方式进行切换,整个页面始终保持100%的屏幕高度和宽度。

这是一款全屏响应式的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文件。

查看演示
下载资源:68
下载资源
错误提交:

格式:zip 大小:140.59KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1116.html 非特殊说明,本文版权归原作者所有,转载请注明出处
html5和css3响应式全屏滚动页面切换效果

我当前G币余额:0 已下载次数:68

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有15 评论)

1 2