- 浏览: 448353 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
据说 translateZ(0)可以触发GPU渲染,提高动画的性能。
切换的属性变化,可以有2种:
1. transform:translateX的值
2. left的值;
这里动画切换比较简单,看不出有什么优势。
二、采用translateX属性值控制容器位置:
二、采用left属性值控制容器位置:
切换的属性变化,可以有2种:
1. transform:translateX的值
2. left的值;
这里动画切换比较简单,看不出有什么优势。
二、采用translateX属性值控制容器位置:
<!DOCTYPE html> <html><head> <title>qqqqqqqq</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta content="telephone=no" name="format-detection" /> <link type="text/css" href="lib/normalize.css" rel="stylesheet"/> <style> body,#wrapper{min-height:100%;height:100%;overflow-x:hidden;/**/} #wrapper section{position:absolute;width:100%;height:100%;min-height:100%;overflow:hidden;} section{top:0;left:0;opacity:0;-webkit-transform:translate(100%,0,0);z-index:1;} section.active{-webkit-transform:translateX(0);z-index:2;opacity:1; /*transition:all 1s;*/} /*更改元素的display属性,一些浏览器会触发重新布局,导致里面滚动条回到顶部。 section.none{display:none;}*/ /*真正的内容容器*/ section .container{height:100%;overflow:auto;} section.slideLeftPre{ -webkit-animation: slideLeftPre 1s 1; } @-webkit-keyframes slideLeftPre{ 0%{-webkit-transform:translateX(0);opacity:1;z-index:2;} 99%{-webkit-transform:translateX(-99%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(-100%);opacity:0;z-index:2;} } section.slideLeftNext{ -webkit-animation: slideLeftNext 1s 1; } @-webkit-keyframes slideLeftNext{ 0%{-webkit-transform:translateX(100%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(0);opacity:1;z-index:2;} } section.slideRightPre{ -webkit-animation: slideRightPre 1s 1; } @-webkit-keyframes slideRightPre{ 0%{-webkit-transform:translateX(0);opacity:1;z-index:2;} 99%{-webkit-transform:translateX(99%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(100%);opacity:0;z-index:2;} } section.slideRightNext{ -webkit-animation: slideRightNext 1s 1; } @-webkit-keyframes slideRightNext{ 0%{-webkit-transform:translateX(-100%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(0);opacity:1;z-index:2;} } .s1{background:#ccc;} .s2{background:gold;} .s3{background:pink;} .s4{background:green;} .swipeTip{position:absolute;width:3em;line-height:2em;bottom:0;left:0;right:0;margin:auto;z-index:10;text-align:center; color:#fff; background:#000; border-radius:100%; /**/-webkit-animation: st 1s infinite; animation: st 1s infinite; } @-webkit-keyframes st{ 0%{bottom:0;} 50%{bottom:0.8em;} 100%{bottom:0em;} } @keyframes st{ 0%{bottom:0;} 50%{bottom:0.4em;} 100%{bottom:0em;} } .slideLeft,.slideRight{font-size:36px;} </style> </head> <body onload="init()"> <div id="wrapper"> <section class="s1 active"> <div class="container"> <div style="border:1px solid red;height:1000px;"> <p>只是前面的一段文字</p> <a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> s1 <a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> <section class="s2"> <div class="container"> <div style="border:1px solid blue;height:300px;">我是S2 </div> s2<a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> <section class="s3"> <div class="container"> s3<a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> <section class="s4"> <div class="container"> s4<a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> </div> <script> var pfx = ["webkit", "moz", "MS", "o", ""]; function PrefixedEvent(element, type, callback) { for (var p = 0; p < pfx.length; p++) { if (!pfx[p]) type = type.toLowerCase(); element.addEventListener(pfx[p]+type, callback, false); } } var UID = (function(){ var id = new Date().getTime(); return function(){ return id++; } })(); function init(){ var sections = document.querySelectorAll("section"); var size = sections.length; var index = 0; var lock = false; for(var i=0; i < size; i++){ PrefixedEvent(sections[i], "AnimationEnd", function(){ var cls = ""; if(/Next/.test(this.className)){ cls = " active"; lock = false; }else{ cls = " none"; } this.className = this.className.replace(/slideLeftPre|slideLeftNext|slideRightPre|slideRightNext/g,"").replace(/\s*$/,"") + cls; }); } document.body.addEventListener("touchmove",function(e){ //e.preventDefault(); },false); document.body.addEventListener("touchend",function(e){ e.preventDefault(); if(e.target.tagName.toUpperCase() === "A"){ e.preventDefault(); if(lock){ return; } lock = true; if(e.target.className === "slideLeft"){ sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " slideLeftPre"; index++; index = index % size; sections[index].className = sections[index].className.replace(/\s*none\s*/g,"") + " slideLeftNext"; }else if(e.target.className === "slideRight"){ sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " slideRightPre"; index--; index = (index+size) % size; sections[index].className = sections[index].className.replace(/\s*none\s*/g,"") + " slideRightNext"; } } },false); } </script> </body></html>
二、采用left属性值控制容器位置:
section{top:0;left:100%;opacity:0;} section.active{left:0;z-index:2;opacity:1; /*transition:all 1s;*/} section.slideLeftPre{ -webkit-animation: slideLeftPre 1s 1; } @-webkit-keyframes slideLeftPre{ 0%{left:0;opacity:1} 99%{left:-99%;opacity:1} 100%{left:-100%;opacity:0} } section.slideLeftNext{ -webkit-animation: slideLeftNext 1s 1; } @-webkit-keyframes slideLeftNext{ 0%{left:100%;opacity:1;z-index:2;} 100%{left:0;opacity:1;z-index:2;} } section.slideRightPre{ -webkit-animation: slideRightPre 1s 1; } @-webkit-keyframes slideRightPre{ 0%{left:0;opacity:1} 99%{left:99%;opacity:1} 100%{left:100%;opacity:0} } section.slideRightNext{ -webkit-animation: slideRightNext 1s 1; } @-webkit-keyframes slideRightNext{ 0%{left:-100%;opacity:1;z-index:2;} 100%{left:0;opacity:1;z-index:2;} }
发表评论
-
简单下拉框模拟
2015-06-19 16:19 725<!doctype html> < ... -
四个方向鼠标滑入的css动画
2015-05-14 18:08 2166<!DOCTYPE html> <ht ... -
icon font VS svg font
2015-05-14 15:21 1209关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
简单的css3全屏滚动
2015-04-27 16:41 1449<!DOCTYPE html> <ht ... -
纯CSS3的图片slider
2015-04-16 14:36 960<div class="container ... -
移动端的“点透”问题
2015-04-15 14:13 1658移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
如何读写伪类元素的样式?
2014-12-17 10:00 1277示例: <p class="example ... -
模拟滚动条
2014-04-10 09:37 910<!DOCTYPE html> <ht ... -
纯CSS3的loading图案
2014-03-26 10:57 1170转自:http://www.cssplay.co.uk/men ... -
纯CSS3的图片集点击放大
2014-03-26 10:15 5180<div class="slideshow ... -
css3 简单slider
2014-01-24 15:16 3463<!DOCTYPE html> <ht ... -
css3的饼图
2013-12-31 15:12 1221来自:http://atomicnoggin.ca/test/ ... -
图片倒影
2013-09-18 11:13 1051<!DOCTYPE html PUBLIC &quo ... -
动态添加style元素
2013-09-03 15:42 1087/** * @description IE6~9下,页 ... -
备份一个简单的分页条
2013-07-20 10:57 1082<div class="pageBar ... -
页面布局:分5个区域
2013-05-15 17:19 990<!DOCTYPE html PUBLIC &quo ... -
关于getBoundingClientRect 与 getClientRects
2012-08-19 14:29 3023getBoundingClientRect 可以用来获取 元 ... -
兼容IE的 position:fixed
2011-06-15 14:38 2533<!DOCTYPE html PUBLIC &q ... -
三角区域
2010-09-02 08:57 918#triangle { border: 2px ... -
关于未设置父元素宽度的block子元素显示
2010-08-23 16:57 1697如果block父元素设置了宽度,而block子元素又没有设置宽 ...
相关推荐
HTML5全屏滚动效果是一种常见的网页设计技巧,它利用HTML5的新特性以及CSS3的动画效果,为用户提供沉浸式的浏览体验。全屏滚动通常应用于网站的首页或展示型页面,以展示丰富的视觉内容,引导用户逐步了解信息。下面...
本文将深入探讨如何利用HTML5和CSS3构建一个基于全屏滚动的响应式页面切换效果。 首先,HTML5是新一代的超文本标记语言,引入了许多新的元素和API,为开发者提供了更多构建网页结构和功能的选择。例如,`<header>`...
3D全屏滚动则在此基础上增加了维度,通过立体效果和动态过渡,让页面元素在垂直方向上以三维方式变换,增强用户的沉浸感。 该前台组件可能包括以下核心知识点: 1. **HTML 结构**:构建3D全屏滚动效果的基础是合理...
通过研究这个源码,开发者不仅可以掌握微信小程序中的动画机制,还能学习到如何结合API和CSS3动画技术实现流畅的全屏滚动效果。这将对提升用户体验、设计富有动态感的小程序页面有着极大的帮助。同时,源码分析也是...
标题中的“WIN+8效果左右全屏滚动的幻灯片”指的是Windows 8操作系统中一种特有的用户界面元素,它在展示信息或者进行演示时,利用全屏显示和左右滑动的交互方式,使得内容呈现更加生动和直观。这种设计灵感来源于...
实现全屏滚动效果的关键在于JavaScript和CSS3的运用。首先,我们需要设置HTML结构,将每个滚动层(通常是一屏内容)封装在独立的容器元素内,并赋予相应的ID以便JavaScript操作。接着,通过CSS3来定义每个容器的全屏...
全屏滚动的基本原理是通过JavaScript或CSS3来控制页面内容的分层和滚动。通常,设计师会将每个屏幕或部分作为一个独立的“滚动层”,然后利用JavaScript库如jQuery或专门的全屏滚动插件(例如fullPage.js、...
此外,CSS3还提供了过渡(Transitions)、动画(Animations)和3D变换,这些特性使得全屏滚动页面切换效果得以实现,为用户带来平滑的视觉体验。 在实现全屏滚动页面切换效果时,通常会利用HTML5的`<section>`元素...
CSS3提供了媒体查询(Media Queries)功能,可以根据设备的屏幕尺寸和方向应用不同的样式。JavaScript也可以帮助检测设备特性,并据此调整行为。 在压缩包内的文件“texiao8250_1560680953”中,很可能包含了项目的...
2. **CSS3属性**:全屏视差滚动通常依赖CSS3的`transform`和`transition`属性。`transform`允许我们对元素进行平移、旋转、缩放等变换,其中`translateZ`用于创建3D视图,增加深度感。`transition`则定义元素从一种...
结合fullPage插件和CSS3动画,可以实现更具创意和互动性的全屏滚动网站。例如,在每个全屏段落切换时,添加一个淡入淡出的过渡效果,或者在用户滚动到特定段落时触发一个动态图形的动画。这不仅增强了网页的视觉冲击...
全屏滚动效果在现代网页设计中非常流行,它能够提供流畅、沉浸式的用户体验。`fullPage.js`是一款基于jQuery的插件,专为实现这样的效果而设计。在本篇文章中,我们将深入探讨如何使用jQuery UI以及`fullPage.js`来...
3. 适应性设计:考虑到不同设备的屏幕尺寸和方向,全屏滚动特效应具备良好的响应式布局,保证在各种设备上都能良好显示。 4. 可访问性:遵循无障碍设计原则,确保视觉障碍用户也能通过辅助技术如屏幕阅读器来理解和...
3. **页面元素错位**:由于全屏滚动需要改变元素的position属性,可能导致原有布局出现问题,需对CSS进行调整。 4. **兼容性问题**:虽然onepage-scroll对大部分现代浏览器有很好的支持,但对老旧浏览器的兼容性需...
HTML5全屏滚动响应式设计师个人主页模板是一种现代网页设计趋势,它结合了HTML5的新特性、CSS3的动画效果以及响应式布局,为设计师提供了一个展示作品和个人风采的平台。这种模板通常由一系列全屏的滚动页面组成,每...
响应式全屏滚动式jQuery图片画廊插件是一种在网页设计中广泛应用的工具,它能够为网站增添引人入胜的视觉效果。这种插件基于JavaScript库jQuery,它以其高效、简洁的API闻名,使得开发者能够轻松实现复杂的交互功能...
2. **数据管理**:通过JavaScript处理数据,例如动画的当前状态、滚动方向等。可以使用`Page`对象的`data`属性来存储这些数据。 3. **生命周期方法**:微信小程序的页面生命周期函数是实现动画的关键。例如,在`...
全屏滚动插件的工作原理是利用JavaScript和CSS3技术,监听用户的滚动事件,然后根据预设的动画效果平滑地过渡到下一个页面或内容区域。这种效果可以增强网站的吸引力,使内容呈现更加流畅和引人入胜。同时,插件可能...
**全屏滚动插件Fullpage.js详解** 全屏滚动效果在现代网页设计中越来越常见,它为用户提供了独特的浏览体验,使网站看起来更加时尚且富有动态感。Fullpage.js是一款强大的JavaScript插件,专用于实现这种效果。它...
4. **响应式设计**:考虑到移动设备的广泛使用,好的全屏滚动插件应具备响应式设计,能根据设备的屏幕大小和方向自动调整布局。 5. **浏览器兼容性**:兼容IE8意味着插件可能需要使用特定的技巧来处理旧版浏览器的...