动态CSS样式和动画Jquery插件

分享于 

21分钟阅读

Web开发

  繁體 雙語

下载

你可以从下载源代码。

介绍

CSS脚本对于设计和动画 html DOM ojbect非常酷。 你可以对多个元素应用相同的样式,从而创建出色的网页。 但是,在不创建另一个CSS类的情况下将这些样式应用到多个对象没有办法应用对象特定的值。


/*creating class for some objects*/


.style1{


 width : 100%;


}



/*creating another class for another object to change one property*/


style2{


 width : 50%;


}




LESS 和 SASS (。css预处理器) 试图通过创建 varibles。继承和其他预处理代码优化来解决一些问题,但是 final 结果是添加到网页中的静态类型的css脚本。

问题

它们无法创建元素特定值 inside css ( 直到现在),因为它只是( 选定元素受类 inside的属性影响)的一种方式。 但是不能为每个元素生成值 specefic。

解决方法

如果我们想创建元素特定值。 我们的方法是:

  • 创建多个css类。
  • 使用预处理器
  • 将 inline 样式应用于元素属性样式。
  • 使用java脚本更改样式属性。
  • 使用jquery将样式应用到目标元素。

但是。

创建多个css类的变量很少,但是有 10,20个以上的。"。"。 元素,你将接收具有相同函数的类:(:。

inline 样式仅适用于与其他对象不同的一个对象。 而且你已经失去了选择器的能力。

javascript本身将很难处理选择器和为每个浏览器编写前缀。

jquery是benificial工具,它可以影响元素布局,也可以影响元素布局和样式,因此它是最常用的。 css属性,并消除前缀的头痛。

动态css插件

在进行代码之前,必须注意,jquery可以为选定的elements.but 生成css值,并且需要管理。

下载并安装

  • 在ide中创建新项目或者新文件
  • 添加 index.html
  • 下载 jquery
  • 在 index.html 中包含脚本
  • 下载插件
  • 包含在 index.html 中
  • 添加新的空 <脚本>
  • 添加一些html元素和css样式。

    这个 index.html 文件可能是下载包中的index.html

从动态css开始

使用jquery将css属性应用到元素


$('#container').children().filter('div').css(


 { 


 transform : 'translate(0%,0%) scale(.5,.5)',


​ transition : 'all. 5s. 1s linear'


 });



这是一个简单的查询 whitch,将一些 static 值应用到所有选定的元素。

为了使这个属性动态化,我们将替换以下

---->。dcss/*dynamic css function*/

------------------------------------------------------------
转换:'的<延迟> s 线性"'

用 <延迟> 动态值替换". 1"值以替换插件。

------------------------------------------------------------
dcss接受 2个参数,因此我们将添加另一个参数,它定义 <延迟> 变量的值

%7B
延迟:. 1
%7D

代码:


//example1


 $('#container').children().filter('div').dcss(


 {


 transform : 'translate(0%,0%) scale(.5,.5)',


 transition : 'all. 5s <delay>s linear'


 },


 {


 delay :. 1


 });




实时预览插件

现在插件将读取延迟的值,并将它的应用到提供的css属性中的所有 <延迟>。 因此,值延迟是 inside dcss函数的一。

直到现在它只是样式和值的分离,但如果我们用返回动态值的函数替换". 1"值,代码如下:


//example2


$('#container').children().filter('div').dcss(


 { 


 transform : 'translate(0%,0%) scale(.5,.5)',


 transition : 'all 1s <delay>s linear' 


 },


 {


 delay : function(i,el,c){ return i *. 1;}


 });


}; 



实时预览插件

现在对于 array 中的每个对象,插件都将调用"延迟"函数,并将每个 <延迟> 变量替换为。


调用函数的参数( i,el,c )

元素的jquery array 中目标元素的索引。
el = 元素本身。
c = 所选 array的长度。

这些 3个参数被传递给函数进行计算并返回特定于"el"元素的值。

在本示例中,返回( *. 1 )

这意味着每个元素将比以前的元素延迟. 1.

添加多个变量


//example 3


$('#container').children().filter('div').dcss(


 { 


 transform : 'translate(<transX>%,<transY>%) scale(.5,.5)',


 transition : 'all 1s <delay>s linear' 


 },


 { 


 delay : function(i,el,c){ return i *. 1;},


 transX : function(){ return 50 - Math.random()*100;},


 transY : function(){ return 50 - Math.random()*100;}


 });



实时预览插件


transX函数从 -50 --> 50和transY中返回一个值,并应用到"转换"属性。

需要注意的是,每个元素一次计算所有变量。 所以我们分离了transX和 transY。

变量多次出现


//example 4 


$('#container').children().filter('div').dcss(


 { 


 width : '<len>px',


 height : '<len>px' 


 },


 { 


 len : function(i,el,c){return 30 + Math.random() * 100;}


 });



}; 



实时预览插件

这里我们用len函数调整了所有元素的大小。
正如我们在'len'之前解释的一样,一次只能计算宽度= 高度,所有结果都是随机大小。

调用关键帧

Modifing关键帧是动态css的一个限制,我们尝试修复它。 它不能修改css样式欺骗中的值,但是我们可以使用它们。

css关键帧


//example 5


@-webkit-keyframes test{



 0%{


 background : red;


 }


 50%{


 background:green;


 }


 100%{


 background : blue;


 }


 };



Javascript


$('#container').children().filter('div').dcss(


{


 animation : 'test <dur>s 0s ease-in-out alternate infinite'


},


{


 dur : function(i,el,c){return 1 + Math.random() * 5;},


});




这将使用相同的关键帧为每个元素生成不同的持续时间。

实时预览插件


字符串值


//example 6


$('#container').children().filter('div').dcss(


 { 


 height : '400px',


 transition : 'all 1s 0s ease<in><out>'


 },


 { 


 in : function(i,el,c){return (i % 2 == 0)? '-in':''; },


 out : function(i,el,c){return (i % 2 == 1)? '-out':''; }


 });



}; 



实时预览插件

如果"i"是这样,我们将推动"-in"其他推送"-out":

  • 即使是元素也有"轻松"函数。
  • 奇数元素将具有"out"函数。

网格函数

所有以前的插图都是动态css插件的基本用法。 网格功能将代码的可用性推到一个新的。

网格 mathimaticaly 将 1d array 转换为 2d array。

"栅格"函数根据所提供的中心点的距离返回当前元素的新索引。

"gridRowCol"返回所提供索引的当前行和列。

函数

dcss.grid(index,count,cols, centerX, centerY,invert) ;

索引= 当前元素的索引。
计数= 网格单元格数
cols = 网格列的计数
centerX,centerY = 中心点的值从 0到 1.
反转= 反转最后一个元素,反之亦然。

用法

假设我们拥有 5个 div> 元素网格,并且希望从左下角到右上角创建转换动画。


//example 7


$('#container').children().filter('div').dcss(


 //css properties to be processed and applied to object


 {


 pointerEvents:'none',


 borderRadius:'100px',


 transform : 'translate(0%,0%) scale(.5,.5)',


 opacity : '0',


 transition : 'all 1s <time>s ease-in'


 },


 {


 //values to be applied to property values


 time : function(i,el,c){ 


 var ii = dcss.grid(i,c,5,0,1);


 return ii *. 1;


 } 


 }


);



实时预览插件

ii = 虚拟网格中当前元素的新生成的索引。

dcss.grid(i,c,5,0,1,false )

i = 当前元素的true 索引。
c = 25/* 计数网格 cells*/

0,1 = 网格(。设置为底部,左)的中心点;

网格中每个项目的*. 1 ==> 增加了每秒. 1秒的延迟

这里有一些东西:

如果从顶部开始计算,那么网格单元 2,3和 3,2将具有相同的距离,因此网格索引是相同的。
这将创建一个平滑的动画。

代码 上面 将隐藏带有转换. and的网格元素,下面的代码将再次显示不同的参数。


//example 7


$('#container').children().filter('div').dcss(


 //css properties to be processed and applied to object


 {


 pointerEvents:'all',


 borderRadius:'20px',


 transform : 'translate(0%,0%) scale(1,1)',


 opacity : '1',


 transition : 'all. 5s <time>s ease-out',


 display:'block'


 },


 {


 //values to be applied to property values


 time : function(i,el,c){ 


 return dcss.grid(i,c,5,.5,1) *. 1;


 } 


 });



实时预览插件

纯垂直或者水平动画

中心影响垂直和水平方向上两个方向的单元格。

若要在一个 direction 中禁用动画渐变,只需传递空值而不是 0.0 -1.0值。

dcss.grid(i,c,5,0,null) ;

同一列中的所有元素都具有相同的索引,因此具有相同的延迟。


//example 8


$('#container').children().filter('div').dcss(


 //css properties to be processed and applied to object


 {


 pointerEvents:'none',


 borderRadius:'100px',


 transform : 'translate(0%,0%) scale(.5,.5)',


 opacity : '0',


 transition : 'all 1s <time>s ease-in'


 },


 {


 //values to be applied to property values


 time : function(i,el,c){ 


 var ii = dcss.grid(i,c,5,0,null);


 return ii *. 1;


 } 


 }


);



实时预览插件

反转参数

如果网格选择中心点附近的元素,那么如果设置中心为 0.5,0,则第一元素将成为中心元素,它将始终在其他元素之前开始动画。 将"反转"参数设置为 true 将首先选择farest元素,然后将靠近中心元素的元素设置为最后选择元素。

正常动画:


 //example 9 


function showNormal(){



$('#container').children().filter('div').dcss(


 //css properties to be processed and applied to object


 {


 pointerEvents:'all',


 borderRadius:'20px',


 transform : 'translate(0%,0%) scale(1,1)',


 opacity : '1',


 transition : 'all 1s <time>s ease-out',


 display:'block'


 },


 {


 //values to be applied to property values


 time : function(i,el,c){ 


 return dcss.grid(i,c,5,.5,.5,false) *. 1;


 } 


 });


}



实时预览插件

启用"反转"后


//example 9


function showInvert(){



$('#container').children().filter('div').dcss(


 //css properties to be processed and applied to object


 {


 pointerEvents:'all',


 borderRadius:'20px',


 transform : 'translate(0%,0%) scale(1,1)',


 opacity : '1',


 transition : 'all 1s <time>s ease-out',


 display:'block'


 },


 {


 //values to be applied to property values


 time : function(i,el,c){ 


 return dcss.grid(i,c,5,.5,.5,true) *. 1;


 } 


 });


}



实时预览插件

播放 3d:

我们将为容器创建一个dcss调用,并为该网格创建另一个调用。


//example 10


//animating container element


 $('#container').dcss({


 transform : 'perspective( 600px ) rotateY(<ang>deg)',


 transition : 'all 2s 0s ease-in-out',


 transformStyle: 'preserve-3d'


 },


 {


 ang : function(){


 var rnd = Math.random() * 360;


 //if (rnd> 90) rnd +=180 ;


 return -180 + rnd;


 },


 });



//animating grid elements


$('#container').children().filter('div').dcss(


 //css properties to be processed and applied to object


 {


 pointerEvents:'none',


 transform : 'translate3d(0px,0px,<z>px) scale(1,1)',


 opacity : '0',


 transition : 'all <time>s <delay>s ease-in-out'


 },


 {


 //values to be applied to property values


 z : function(i){


 return -200 + Math.random() * 400;


 },



 delay : function(i){ 


 return Math.random() *. 5;


 },


 time : function(i){ 


 return. 5 + Math.random() *. 5;


 } 


 }


);



实时预览插件


其他dcss函数

其他函数返回自定义用法的值。

dcss.gridRowCol(index,cols) ;

火警的警铃在哪里?

of = 当前元素的true 索引。
cols = 网格中的列数。

带有. row 和. col 属性的返回对象,提供网格位置。

Ex

将 background 位置设置为每个元素以获取图像的fragement效果。


//example 11


//setup background image


$('#container').children().filter('div').dcss(


 //css properties to be processed and applied to object


 {


 background: 'url(../images/1.jpg)',


 backgroundPosition: '<l>% <t>%',


 backgroundSize: '500% 500%'


 },


 {


 l : function(i,el,c){


 var rc = dcss.gridRowCol(i,5);


 return rc.col/(5-1) * 100;


 },


 t : function(i,el,c){


 var rc = dcss.gridRowCol(i,5);


 return rc.row/(5-1) * 100;


 }



 });



正常图像:

在每个网格单元中动态应用动画

实时预览插件

dcss.ease(s2,s3,r) ;

基本 Slack 函数接受 2控制浮点值和比率值。

Points of Interest

优点
  • 轻松自定义css属性
  • 应用每个元素样式值。
  • 按需计算值
  • 灵活,因为你仍然可以使用关键帧规则和类。
  • 在页面中只添加几行代码
  • 无性能负载。
缺点
  • 使用jquery选择器,使你丢失了对新添加元素的自动选择。
  • 仍然无法更改关键帧值。
请记住

这个插件不是用来代替 css,更少或者 sass。 插件的目的是解决一些css限制。

behind 场景

专家可能很容易猜到插件是如何工作的。 这个想法很简单。 插件所做的仅仅是用var替换 <var>。

在阅读插件代码之前,请阅读如何在这里创建一个基本的jquery插件

函数只有 1个文件被分成 2部分

  • jquery插件
  • dcss对象包含 helper 函数。
Jquery函数

if(jQuery){


 (function ( $ ) {


 // replace all occurrence of 'token' inside 'text' by 'value'.


 var replaceAll=function(text,token,value){


 var index=-1;


 string = text;


 while((index = string.indexOf(token,index+1))> -1){


 string = string.replace(token, value);


 };


 return string;


 }


 //register our 'dcss' function as jquery plugin.


 $.fn.dcss = function(props,values) {


 //holder for modified property values


 var p; 


 //hold property value till modifing all args


 var v; 


 //count of elements


 var c = this.length;


 this.each(function(index){


 //create new object to hold specific values for the current selected element


 p = {};


 //compute values


 var vals = {};


 for (var vkey in values) { 


 //get current value object {value : 1,added : 1}.


 v = values[vkey];


 //process the value according to its type


 if ( typeof(v) === 'number'){


 vals[vkey] = v;


 }else if ( typeof(v) === 'function'){


 vals[vkey] = v(index,this,c);


 }else if ( typeof(v) === 'string'){


 vals[vkey] = v;


 }


 }


 //loop throw properties to change values inside them


 for (var pkey in props) {


 //set pre-processed value to holder 'p' object.


 p[pkey] = props[pkey]; 


 //loop throw all actual value to change them in p object.


 for (var vkey in values) { 


 //replace all occurence of keys in the property value.


 p[pkey] = replaceAll(p[pkey],'<'+ vkey + '>', vals[vkey] );


 }


 }


 //apply the css.


 $(this).css(p);


 });


 //return jquery object again to allow Chaining.


 return this;


 };


 }( jQuery ));


}



dcss对象

dcss = {


 grid : function (index,count,cols, centerX, centerY,invert){


 var row = Math.floor( index/cols); 


 var col = (index - (row * cols));


 var rows = Math.ceil(count/cols); 


 if(centerX!= null){


 col = col - (cols-1) * centerX;


 }else


 {


 cols = 0;


 col = 0;


 }


 if(centerY!= null){


 row = row - (rows-1) * centerY;


 }else{


 row = 0;


 rows = 0;


 }


 if(row <0) row = -row;


 if(col <0) col = -col;


 var res = row+col;


 if(invert ===true){


 res = (cols+rows-2) -res;


 }


 return res ; 


 },


 gridRowCol: function(index,cols){


 var row = Math.floor( index/cols); 


 var col = (index - (row * cols));


 return {row:row,col:col};


 },


 ease : function ( c1,c2, r) {


 var s2,s3;


 s2 = c1;


 s3 = c2;


 var s1;


 s1 = 0 + (s2 - 0) * r;


 s2 = s2 + (s3 - s2) * r;


 s3 = s3 + (1 - s3) * r;


 s1 = s1 + (s2 - s1) * r;


 s2 = s2 + (s3 - s2) * r;


 return s1 + (s2 - s1) * r;


 }


};



意见反馈

请随意留下关于这篇文章的任何反馈;很乐意看到你的评论并投票。 如果你有任何问题,请在这里询问我。