html5全屏滚动实例完美实现全屏滚动带动画_h5整屏滚动效果案例,html整屏滚动资源-CSDN文库

共21个文件

html：11个

jpg：4个

js：3个

html5

css3

动画实例

需积分: 50 89 浏览量 2016-01-18 11:01:03 上传评论 4 收藏 1.54MB ZIP 举报

HTML5全屏滚动效果是一种常见的网页设计技巧，它利用HTML5的新特性以及CSS3的动画效果，为用户提供沉浸式的浏览体验。全屏滚动通常应用于网站的首页或展示型页面，以展示丰富的视觉内容，引导用户逐步了解信息。下面将详细阐述实现全屏滚动动画的关键知识点。 1. **HTML5新特性** HTML5引入了新的语义化标签，如`<section>`、`<article>`、`<header>`和`<footer>`等，这些标签在构建全屏滚动页面时非常有用。例如，每个全屏滚动的“屏幕”可以封装在`<section>`标签内，每个部分代表一个独立的内容单元。 2. **CSS3定位与层叠上下文** 全屏滚动通常基于固定定位（`position: fixed`）来实现，这样可以让每个滚动屏始终保持在视口的可见范围内。通过调整`top`、`right`、`bottom`和`left`属性，可以精确控制元素的位置。同时，理解CSS的层叠上下文（z-index）也很重要，以确保正确显示各个滚动屏。 3. **CSS3过渡效果（Transitions）** CSS3的过渡效果是实现动画的关键。通过设置`transition`属性，可以在属性值改变时平滑地过渡到新状态。例如，可以定义`transition: all 0.5s ease;`来使元素在0.5秒内平滑地完成所有属性的变化，`ease`是缓动函数，使变化过程更加自然。 4. **CSS3动画（Animations）** 更复杂的动画效果可以通过CSS3的`@keyframes`规则创建。定义动画的关键帧，然后通过`animation`属性应用到元素上。这允许更精细的控制，比如设置动画的持续时间、延迟、次数和方向。 5. **JavaScript/jQuery控制** 虽然纯CSS3可以实现基本的滚动效果，但要实现更高级的功能，如自动播放、触摸事件支持和导航箭头控制，通常需要JavaScript或jQuery的协助。例如，可以监听滚动事件，根据滚动位置切换当前显示的全屏滚动屏。 6. **响应式设计** 现代网页设计必须考虑不同设备和屏幕尺寸的适配。使用媒体查询（`media queries`）进行响应式布局，确保全屏滚动在手机、平板和桌面电脑等不同设备上都能正常工作。 7. **性能优化** 全屏滚动动画可能会影响页面性能，特别是当涉及到大量图像或其他资源时。使用CSS3硬件加速、懒加载图片和优化JavaScript代码等方式可以提高页面加载速度和流畅度。 8. **AOS（Animate on Scroll Library）** 如果不希望手动编写JavaScript代码，可以使用像AOS（Animate on Scroll）这样的库。AOS允许你在页面滚动时触发各种CSS动画，简化了全屏滚动动画的实现。 9. **SEO和可访问性** 在实现全屏滚动时，要确保SEO友好，如添加适当的元信息和标题，同时考虑辅助技术用户的需求，如提供键盘导航和屏幕阅读器支持。 10. **测试与调试** 全面的测试至关重要，包括跨浏览器测试和在不同设备上的测试，以确保全屏滚动效果在各种环境下都能正常工作。通过掌握以上知识点，并结合实践，你就可以创建出具有全屏滚动动画的精美网页，无论是横屏还是竖屏，都能带给用户惊艳的视觉体验。

资源推荐

资源详情

资源评论

收起资源包目录

全屏滚动 full...zip （21个子文件）

全屏滚动 full..

css

jquery.fullPage.css 4KB

index5.html 2KB

index4.html 1KB

images

2.jpg 398KB

1.jpg 314KB

3.jpg 431KB

4.jpg 365KB

index12.html 1KB

index.html 4KB

jquery.fullPage.min.js 21KB

jquery-1.8.3.min.js 91KB

jquery.fullPage.js 57KB

.DS_Store 6KB

index2.html 1KB

index6.html 2KB

index7.html 1KB

index8.html 7KB

index3.html 980B

index13.html 2KB

index11.html 1KB

说明下载.url 353B

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>fullPage.js — iPhone 5C演示_dowebok</title> <link rel="stylesheet" href="http://www.dowebok.com/demo/2014/77/css/jquery.fullPage.css"> <style> body{color:#333;font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif} h1{font-size:5em;font-family:arial,helvetica;margin:0;padding:0} h2{font-size:2em;margin:0 0 18px 0;font-family:arial,helvetica} img{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out} .section{text-align:center;overflow:hidden} .wrap{width:1180px;height:100%;margin-left:auto;margin-right:auto;position:relative} .box{text-align:left;color:#808080;font-size:1.2em;line-height:1.6em} #section0{padding:60px 0} #section0 img{height:100%;margin:40px 0 0 0} #section1 img{position:absolute;left:40px;top:100px} #section1 .box{position:absolute;top:50%;left:50%;margin-top:-192px;margin-left:89px;width:395px;z-index:1} #section1 .imgsContainer{display:block;position:absolute;z-index:1;top:42%;left:58%;margin-top:-325px;margin-left:-747px;width:800px;height:696px} #section1 img{height:100%} @media all and (min-width:620px) and (max-width:800px){#section1 .imgsContainer{margin-top:-278px;margin-left:-685px;width:647px;height:563px} }@media all and (max-width:620px){#section1 .imgsContainer{margin-top:-208px;margin-left:-516px;width:534px;height:464px} }#iphone2{z-index:10} #iphone2.active{-webkit-transform:translate3d(-134px,0px,0px);-moz-transform:translate3d(-134px,0px,0px);-ms-transform:translate3d(-134px,0px,0px);transform:translate3d(-134px,0px,0px)} #iphone3{z-index:12} #iphone3.active{-webkit-transform:translate3d(213px,0px,0px);-moz-transform:translate3d(213px,0px,0px);-ms-transform:translate3d(213px,0px,0px);transform:translate3d(213px,0px,0px)} #iphone4{z-index:11;left:140px} #iphone4.active{-webkit-transform:translate3d(548px,0px,0px);-moz-transform:translate3d(548px,0px,0px);-ms-transform:translate3d(548px,0px,0px);transform:translate3d(548px,0px,0px)} #section2 img{position:absolute} #section2 .imgsContainer,#staticImg .imgsContainer,#section3 .imgsContainer{position:absolute;z-index:1;left:50%;display:block;margin-top:-288px;margin-left:-636px;width:0;height:0;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 1.2s ease-in-out;-o-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out} #section2.moveUp .imgsContainer{top:50%} #section2.moveDown .imgsContainer,#staticImg .imgsContainer{top:90%} #section2.active .imgsContainer{top:50%} #section2 .box{top:22%;left:42%;position:absolute;width:582px} #iphone-yellow{top:-35px;left:-222px} #iphone-red{top:-194px;left:106px} #iphone-blue{top:320px;left:448px} #iphone-green{left:106px;position:absolute} #staticImg{display:block;position:absolute;z-index:1;top:200%;left:0;width:100%;min-width:980px;height:100%;-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out} #staticImg.moveDown{top:300%} #staticImg.moveDown .imgsContainer{top:50%} #staticImg.moveDown img{top:155px} #staticImg.active .imgsContainer{top:50%} #staticImg.active img{top:487px} #section3 .imgsContainer{top:50%} #section3 img{top:155px;left:455px;position:absolute} #section3 .box{text-align:center;margin:10% 0 0 0} #infoMenu.whiteLinks li:nth-child(1) a,#infoMenu.whiteLinks li:nth-child(2) a,#infoMenu.whiteLinks li:nth-child(3) a{color:#fff} #infoMenu{font-family:arial,helvetica} .fullPage-tooltip{color:#AAA} #fullPage-nav span,.fullPage-slidesNav span{border-color:#AAA} #fullPage-nav li .active span,.fullPage-slidesNav .active span{background:#AAA} </style> <script src="js/jquery-1.8.3.min.js"></script> <script src="http://cdn.staticfile.org/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="http://www.dowebok.com/demo/2014/77/js/jquery.fullPage.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.fn.fullpage({ 'verticalCentered': false, 'anchors': ['page1', 'page2', 'page3', 'page4'], 'css3': true, 'slidesColor': ['#F0F2F4', '#fff', '#fff', '#fff'], 'navigation': true, 'navigationPosition': 'right', 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'], 'afterLoad': function(anchorLink, index){ if(index == 2){ $('#iphone3, #iphone2, #iphone4').addClass('active'); } $('#infoMenu').toggleClass('whiteLinks', index ==4); }, 'onLeave': function(index, direction){ if (index == 3 && direction == 'down'){ $('.section').eq(index -1).removeClass('moveDown').addClass('moveUp'); } else if(index == 3 && direction == 'up'){ $('.section').eq(index -1).removeClass('moveUp').addClass('moveDown'); } $('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up')); $('#staticImg').toggleClass('moveDown', index == 3 && direction == 'down'); }, afterRender: function(){ $('#infoMenu').appendTo('body'); $('#githubLink, .twitter-share-button').appendTo('body'); } }); }); </script> </head> <body> <div id="staticImg"> <div class="imgsContainer"> <img src="http://idowebok.u.qiniudn.com/77/iphone-green.png" alt="iphone" id="iphone-green" /> </div> </div> <div class="section " id="section0"> <h1>fullPage.js — iPhone 5C演示</h1> <img src="http://idowebok.u.qiniudn.com/77/iphone1.jpg" alt="iphone" /> </div> <div class="section" id="section1"> <div class="wrap"> <div class="imgsContainer"> <img src="http://idowebok.u.qiniudn.com/77/iphone2.png" alt="iphone" id="iphone2" /> <img src="http://idowebok.u.qiniudn.com/77/iphone3.png" alt="iphone" id="iphone3" /> <img src="http://idowebok.u.qiniudn.com/77/iphone4.png" alt="iphone" id="iphone4" /> </div> <div class="box"> <h2>A powerful plugin</h2> <strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of. </div> </div> </div> <div class="section moveDown" id="section2"> <div class="wrap"> <div class="imgsContainer"> <img src="http://idowebok.u.qiniudn.com/77/iphone-yellow.png" alt="iphone" id="iphone-yellow" /> <img src="http://idowebok.u.qiniudn.com/77/iphone-red.png" alt="iphone" id="iphone-red" /> <img src="http://idowebok.u.qiniudn.com/77/iphone-blue.png" alt="iphone" id="iphone-blue" /> </div> <div class="box"> <h2>Amazing stuff</h2> Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable. </div> </div> </div> <div class="section moveDown" id="section3"> <div class="wrap"> <div class="box"> <h2>Just a demo</h2> This is, of course, just a demo. I didn't want to spend much time on it. Don't expect it to work perfectly in all kind of screens. It has been designed to work on 1180px width or over on modern browsers with CSS3. </div> </div> <div class="imgsContainer"> <img src="http://idowebok.u.qiniudn.com/77/iphone-two.png" alt="iphone" id="iphone-two" /> </div> </div> <a href="http://www.dowebok.com/" style="display: none;">dowebok</a> <a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a> </body> </html>

评论收藏

内容反馈