画像の操作：
Nodeの背景のみを擬似的に透過
指定Nodeの背景にlinear-gradientを利用した半透明なimage要素を被せて、擬似的な透明度表現をする。
Node
Nodeを指定 id値を文字列で指定してもよい
String
透明度をパーセントで指定
●必須引数 ●オプション引数(省略可能)
記述例
$imgBgAlpha($id('aNode'), '50%')
$imgBgAlpha('aNode', '70%')
注意点
background要素には透過プロパティは無いため、実際に透過させている訳ではなく、linear-gradientで生成した半透明なimage要素を最前面に被せて擬似的に透過しているような表現をしているだけなので理解して使用すること。
linear-gradientの生成の際に設定される色は、親Nodeを遡って設定されているbackground-colorを取得している。
動作サンプル
対象Nodeの背景のみを、指定した透明度に設定するサンプル。
コンテンツの文字列
HTML :
<div id="sample1">
コンテンツの文字列
</div>
Sass :
#sample1 {
background:
url(cmn_bg_text.svg) no-repeat left 120px bottom 40px,
url(cmn_bg_circle.svg) no-repeat right 110px top 30px,
url(cmn_bg_2b.png) center center;
background-size:
160px auto,
180px auto,
80px auto;
}
Javascript :
$imgBgAlpha($id('sample1'),'70%');
$imgBgAlpha('sample1','40%');
$imgBgAlpha('sample1','8%');
$imgBgAlpha($id('sample1'),'100%');
この関数を応用して、指定Nodeの背景のみを透明にするアニメーション。
コンテンツの文字列
コンテンツの本文コンテンツの本文コンテンツの本文コンテンツの本文コンテンツの本文コンテンツの本文コンテンツの本文コンテンツの本文コンテンツの本文。
HTML :
<div id="sample2">
<div id="sample2body">
<h6>コンテンツの文字列</h6>
<p>コンテンツの本文コンテンツの本文コンテンツの本文‥‥‥コンテンツの本文。</p>
</div>
</div>
Sass :
#sample2 {
background: #c6dbde;
#sample2body {
backgrund:
linear-gradient(to top, rgba(229,238,241,0.95), rgba(229,238,241,0)),
url(cmn_pht_5.png) no-repeat center bottom;
background-size:
cover,
cover;
}
}
Javascript :
var sample2_alpha=100;
function sample2out() { //フェイドアウト 100% → 0%
if(sample2_alpha>0) {
sample2_alpha=$numFitRange(sample2_alpha-8);
$imgBgAlpha($id('sample2body'),sample2_alpha+'%');
setTimeout(sample2out,40);
}
}
function sample2in() { //フェイドイン 0% → 100%
if(sample2_alpha<100) {
sample2_alpha=$numFitRange(sample2_alpha+15);
$imgBgAlpha($id('sample2body'),sample2_alpha+'%');
setTimeout(sample2in,40);
}
}
function sample2half() { //50%へフェイド → 50%
if(sample2_alpha>50) {
sample2_alpha=$numFitRange(sample2_alpha-8,50,100);
$imgBgAlpha($id('sample2body'),sample2_alpha+'%');
setTimeout(sample2half,40);
} else if(sample2_alpha<50) {
sample2_alpha=$numFitRange(sample2_alpha+8,0,50);
$imgBgAlpha($id('sample2body'),sample2_alpha+'%');
setTimeout(sample2half,40);
}
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。