jQuery_jquery によって実装された 3 次元テキストグラデーション効果-jsチュートリアル-php.cn

jQuery_jquery によって実装された 3 次元テキストグラデーション効果

WBOY

リリース： 2016-05-16 18:27:15

オリジナル

1001 人が閲覧しました

2 枚の写真を見てみましょう。

効果はとても良いですよね？これらのフォントを画像と間違えませんか?これは写真ではありませんが、JS で実装されたオンラインデモです

http://demo.jb51.net/js/gradient-test/demo.htm

実装プロセスと原理を簡単に共有しましょう (Web サイトでは jquery lib が使用されています。ここでは個別に実装しません。ここで共有するのは jquery の実装方法でもあります):

HTML コード:

コードをコピーコードは次のとおりです:

コードの再利用を容易にするために、ここではどのテキストがこの特殊効果を使用するかを識別します。

CSS コード:

コードをコピーコードは次のとおりです:

 .rainbows{ 位置: 相対; 表示: ブロック; 位置: 相対; 高さ: 1px; .rainbow スパン { 位置: 絶対;表示: ブロック; 左: 0px; } .rainbows .ハイライト; 位置: 絶対; 左: 0px; }シャドウ { カラー: #000; 位置: 不透明度: 0.5; 上部: 2px; 位置: 相対;表示:ブロック ;} 
.rainbow { 
背景:透明; 
位置:相対; 
オーバーフロー:非表示; -index: 5; 

.rainbow スパン { 
位置: 絶対; 
上: 0; 


.rainbows .highlight { 
色: #fff; 
位置: 絶対; 
左: 0px; 🎜>z -index: 4; 
} 

.rainbows .shadow { 
color: #000; 
position: 絶対; 0.5; 
 フィルター: アルファ (不透明度 = 50); 
 左: 2 ピクセル; 


ここでの主な説明 ハイライトとシャドウの 2 つのクラスの意味は文字通り理解できます。これら 2 つのクラスはフォントの立体感を高めるために設定されています。1 つは白いハイライトで、もう 1 つは黒いシャドウです。 

JS 部分: 




コードをコピー


 コードは次のとおりです:
 
function initGradients(s) { $(function() { $(s).each(function() { var el = this; var from = $(el).attr('gradFromColor')|| '#ffffff', to = $(el).attr('gradToColor')||'#000000'; var fR = parseInt(from.substring(1, 3), 16), fG = parseInt(from.substring( 3, 5), 16)、fB = parseInt(from.substring(5, 7), 16)、tR = parseInt(to.substring(1, 3), 16)、tG = parseInt(to.substring(3, 5), 16), tB = parseInt(to.substring(5, 7), 16); var h = $(this).height() * 1.5; var html,cacheHTML = []; this.initHTML||this.innerHTML; this.innerHTML = ''; for (var i = 0; i < h; i ) { var c = '#' (Math.floor(fR * (h - i) / h tR * (i / h))).toString(16) (Math.floor(fG * (h - i) / h tG * (i / h))).toString(16) (Math.floor(fB * (h - i) / h tB * (i / h))).toString(16); cacheHTML.push('' html '') }cacheHTML.push('' html '','' html '') $(cacheHTML.join('')).appendTo(this) }) }) } //この部分は追加の効果をもたらす要素として使用され、ここでは jquery の任意の選択子として使用されます。 initGradients('.rainbows '); function initGradients(s) { 
$(function() { 
$(s).each(function() { 
var el = this; 
var from = $(el).attr( 'gradFromColor')||'#ffffff', to = $(el).attr('gradToColor')||'#000000'; 
var fR = parseInt(from.substring(1, 3), 16) 、
fG = parseInt(from.substring(3, 5), 16)、
fB = parseInt(from.substring(5, 7), 16)、
tR = parseInt(to.substring( 1, 3), 16), 
tG = parseInt(to.substring(3, 5), 16), 
tB = parseInt(to.substring(5, 7), 16); 🎜>var h = $(this).height() * 1.5; 
var html,cacheHTML=[]; 
this.initHTML = html = this.initHTML||this.innerHTML; innerHTML = ''; 
for (var i = 0; i var c = '#' (Math.floor(fR * (h - i) / h tR * (i / h))).toString(16) (Math.floor(fG * (h - i) / h tG * (i / h))).toString(16) (Math.floor(fB * (h - i) / h tB * (i / h))).toString(16); 
cacheHTML.push(' ' html '') 
} 
cacheHTML.push('<スパンクラス="ハイライト">' html '','<スパンクラス="シャドウ">' html '' 
$(cacheHTML.join('')).appendTo(this) 
}) 
}) 
} 
//この部分は调用了，传入要追加效果的要素
initGradients('.rainbows'); ここでは、jquery の任意の記号を指定できます。 

 

 コードは多数ありますが、白原則を理解する場合には、このコードも JS/CSS に準拠していることがわかります。その大まかな考え方は次のとおりです: 


手順は、最初に文字が存在するコンテナの高さ N を計算し、次にコンテナの内容をクリアし、N 個のスパンを追加します。各スパンの内容はすべて元のコンテナの文字です。の色は、カラーの変更に応じて計算され、その文字位置が前のスパンの文字よりも 1 ピクセル分だけずれています。 CSS では、各スパンの高さが 1 であることがわかります。 


 は、jQuery の立体文字変更効果 

 に基づいています。

jQuery_jquery によって実装された 3 次元テキスト グラデーション効果

jQuery_jquery によって実装された 3 次元テキストグラデーション効果