jquery 插件 lettering.js

Posted 2020-10-31 无名码农

lettering.js（去github下载）是一个功能强大的jquery插件

作用：对字母、单词、或者段落进行分割

思想：把单词分成一个一个的字母，然后对字母进行效果处理

使用：1.首先加载jquery和lettering.js

2.对要分的div h1运行函数littering(\'\').参数可以是words，line，默认为空，即为字母分割

3.注意div中必须有h1或者span这样的tag把字母包含才可以运用，不能直接用div来包含要分割的文字（不然会有很多莫名其妙的空span出现）

如下图所示，先分割每个字符，然后用sass循环赋予不同颜色和不同延迟的animation，在hover的时候添加动画，完美！

@mixin text3d($color: #ffd300, $dx: 1, $dy: -1,$steps:10, $darken:.1) {  
  color:$color;  
  $color:darken($color,30%);   
  $output: \'\';  
  $x:0px;  
  $y:0px;  
  @for $n from 1 to $steps{  
    $output: $output + \'#{$x} #{$y} 0 #{$color},\';  
    $x:$x+$dx;  
    $y:$y+$dy;  
    $color:darken($color, $darken * ($n+10));  
  }  
  $output: $output+\'#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);\';  
    
  text-shadow:unquote($output);  
} 

@for $i from 1 through 10 {  
  .effect:hover .char#{$i} {   
    animation: rainbow 2s linear infinite;  
    animation-delay: 0.1s * $i;  
  }  
}  

$base2:#7E00FF; 
@keyframes rainbow {  
  @for $i from 0 through 10 {  
    #{$i* 10%}  {@include text3d(adjust-hue($base2, $i *36deg), 1, 1, 3,.1); }  
  }  
}