<div>要素 (要素全体、コンテンツ、およびすべて) を下に向かってフェードアウトさせたい。非常に制限されたスペースに収まらなければならない (そして、予測できないサイズの要素を含む可能性がある) ニュース投稿を切り詰めるためです。
私が見つけたものはすべて、背景色に透明度のグラデーションを使用するためのものです。ニュース投稿の後ろが背景画像であることを除いて、これは問題ないので、コンテンツの下部の上に色のグラデーションを配置することはできません.
コンテンツの上に画像のグラデーションを配置しますが、ユーザーがスクロールすると背景がコンテンツの背後に移動します。
だから、これが存在すると想像してください：
opacity: -webkit-linear-gradient( ... );
要素の実際の不透明度を段階的に変化させることだけが機能します。出来ますか？
ブラウザーの世界では、マスクを使用したこの機能に向けた改善が行われていますが、私が見る限り、ブラウザー間で (良い意味で) 完全に標準化されたものはまだありません。したがって、実装するものは何でも乱雑になります。最近の機能強化の詳細については、次の投稿をご覧ください。
https://css-tricks.com/clipping-masking-css/
Chrome はサポートと速度の点で勝っているようで、Safari はそれほど遅れていません。残念ながら、Firefox は、SVG に依存するものを除いて、リンク先のページの多くをサポートしていません。幸いなことに、フェードを示し、Chrome、Safari、および Firefox (少なくとも最新バージョン) で動作するように見えるのは SVG の例です。
したがって、現時点で最善の方法は、グラデーションが適用された四角形に基づいて SVG マスクを実装し、 を使用して割り当てることmask: url(#maskid);です。ただし、これらのソリューションは SVG と寸法のサイズ設定の問題で混乱する傾向があり、viewBox「メディア」要素に適用しないと非常に奇妙になる可能性があるため、今のところ完全な例を示すことは控えます。
現在これを実現する唯一の方法は、絶対位置を使用して、フェードしたい要素の「上」の背景色にグラデーション フェードを重ねることです。したがって、上記の他の回答のグラデーションを使用しますが、これをテキストの上のフローティング要素に適用します。
これは、無地の背景色がある場合に最適な効果が得られますが、背景の位置が固定されている限り、背景画像でも実行できます。
CSS
.container {
position: relative;
overflow: hidden;
height: 50px; /* some fixed height that you need you content to fix to */
}
.fadeout {
position: absolute;
width: 100%;
height: 1em;
/* you can use a premade png fade out or a dynamic gradient here*/
background: ...;
}
マークアップ
<div class="container">
<p>
This is my long text that goes on for paragraphs and paragraphs,
far longer than the container....
</p>
<div class="fadeout"></div>
</div>
この質問に関するカーソン・マイヤーズのさらなるコメントを見つけた後、私は次のことがうまくいくと推測しています。背景を修正する必要があると上で述べたとき、つまり、背景を修正する必要があったということですbackground-attachment。したがって、バックグラウンドがこのように実装されている場合は、次の「ハック」を使用して機能させることができます。コンテンツの上に絶対レイヤーをフローティングすると、使いやすさの問題が発生する可能性があることに注意してください..そして、多くの透過レイヤーがあると、古いブラウザーの速度が低下する可能性があります。
jsfiddle
以下のコードは、コンテンツをスクロールするように設定された外側のレイヤー(外側のページまたは本文を表す)と、高さが制限され、残りのコンテンツをフェードアウトする内側の「ニュース」領域を含む例です。どちらの用途でもbackground: url('...')、同じ背景画像パスを入力する必要があります。背景画像は、私がテストした最新のすべてのブラウザの両方の場所で「固定」されているため、背景は同じ位置に計算されます。そのため、上のフローティング レイヤーには、下のレイヤーと同じグラフィックが表示されます。
結果のマークアップは少し最悪かさばるので、これを変換して、不透明度をサポートするブラウザの JavaScript で生成することができます。また、フェードアウトの任意の「高さ」を使用することもできます。現在のバージョンでは、20px のフェードのみがサポートされています。
CSS
.outer {
background: url('...') repeat fixed;
height: 200px;
overflow: auto;
}
.news {
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
.news .fadeout {
position: absolute;
bottom: 0;
width: 100%;
}
.news .fadeout .fadeline {
height: 2px;
background: url('...') repeat fixed;
}
/* a good idea to add vendor prefixed versions of opacity here */
.news .fadeout .o09 { opacity: 0.9; }
.news .fadeout .o08 { opacity: 0.8; }
.news .fadeout .o07 { opacity: 0.7; }
.news .fadeout .o06 { opacity: 0.6; }
.news .fadeout .o05 { opacity: 0.5; }
.news .fadeout .o04 { opacity: 0.4; }
.news .fadeout .o03 { opacity: 0.3; }
.news .fadeout .o02 { opacity: 0.2; }
.news .fadeout .o01 { opacity: 0.1; }
マークアップ
<div class="outer">
<div class="news">
<h4>News</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
suscipit dui ac lacus convallis dapibus. In cursus arcu at
arcu mollis vestibulum. Morbi ac quam sed nisl vulputate
aliquam in ac velit. Curabitur ac feugiat justo. Fusce
imperdiet, arcu non dignissim vulputate, leo odio ultricies
mauris, in consectetur risus odio malesuada sapien.
Nam sagittis convallis dictum. Duis eget lectus
</p>
<div class="fadeout">
<div class="fadeline o01"></div>
<div class="fadeline o02"></div>
<div class="fadeline o03"></div>
<div class="fadeline o04"></div>
<div class="fadeline o05"></div>
<div class="fadeline o06"></div>
<div class="fadeline o07"></div>
<div class="fadeline o08"></div>
<div class="fadeline o09"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
</div>
</div>
<div class="news">
<h4>News</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
suscipit dui ac lacus convallis dapibus. In cursus arcu at
arcu mollis vestibulum. Morbi ac quam sed nisl vulputate
aliquam in ac velit. Curabitur ac feugiat justo. Fusce
imperdiet, arcu non dignissim vulputate, leo odio ultricies
mauris, in consectetur risus odio malesuada sapien.
Nam sagittis convallis dictum. Duis eget lectus
</p>
<div class="fadeout">
<div class="fadeline o01"></div>
<div class="fadeline o02"></div>
<div class="fadeline o03"></div>
<div class="fadeline o04"></div>
<div class="fadeline o05"></div>
<div class="fadeline o06"></div>
<div class="fadeline o07"></div>
<div class="fadeline o08"></div>
<div class="fadeline o09"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
</div>
</div>
<div class="news">
<h4>News</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
suscipit dui ac lacus convallis dapibus. In cursus arcu at
arcu mollis vestibulum. Morbi ac quam sed nisl vulputate
aliquam in ac velit. Curabitur ac feugiat justo. Fusce
imperdiet, arcu non dignissim vulputate, leo odio ultricies
mauris, in consectetur risus odio malesuada sapien.
Nam sagittis convallis dictum. Duis eget lectus
</p>
<div class="fadeout">
<div class="fadeline o01"></div>
<div class="fadeline o02"></div>
<div class="fadeline o03"></div>
<div class="fadeline o04"></div>
<div class="fadeline o05"></div>
<div class="fadeline o06"></div>
<div class="fadeline o07"></div>
<div class="fadeline o08"></div>
<div class="fadeline o09"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
</div>
</div>
</div>
この便利なツールを試してみてください。アルファ色が生成されます。基本的には rgba 値を使用しようとしていますが、もちろん、これは新しいブラウザーでのみサポートされることに注意する必要があります...
http://www.colorzilla.com/gradient-editor/
これは、黒から 100% のアルファ グラディエントに対して思いついたものです。background: url(IMAGE_URL) linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);
これにJavaScriptを使用しても問題ない場合は、canvas要素を使用して実行できます
アイデアは、テキストを含む要素とcanvas要素が重なり合っているということです。要素にテキストを保持します (テキストでは不可能なテキスト選択を可能にするためcanvas) が、完全に透明にしrgba(0,0,0,0)ます (IE8 以前でテキストを表示するために、それはRGBaサポートがないためです)。 canvasIE8 以前ではサポートされていません)。
次に、要素内のテキストを読み取り、同じフォント プロパティを使用してキャンバスに書き込みます。これにより、キャンバスに書き込む各文字が、テキストを含む要素内の対応する文字の上に表示されます。
このcanvas要素は複数行のテキストをサポートしていないため、テキストを単語に分割し、テスト行に単語を追加し続けて測定する必要があります。テスト行の幅が行の最大許容幅よりも大きい場合 (要素の計算された幅をテキストで読み取ることにより、その最大許容幅を取得します)、それをキャンバスに書き込みます。最後の単語が追加されたら、テスト行をその最後の単語になるようにリセットし、次の行を書き込む y 座標を 1 行の高さで増やします (これは、テキストを含む要素の計算されたスタイルからも得られます)。書く行ごとに、適切なステップでテキストの不透明度も減らします (このステップは、1 行あたりの平均文字数に反比例します)。
この場合簡単にできないことは、テキストを正当化することです。それは可能ですが、もう少し複雑になります。つまり、各ステップの幅を計算し、行ごとではなく単語ごとにテキストを記述する必要があります。
また、ウィンドウのサイズを変更するときにテキスト コンテナの幅が変わる場合は、キャンバスをクリアして、サイズを変更するたびにテキストを再描画する必要があることに注意してください。
OK、コード:
HTML :
<article>
<h1>Interacting Spiral Galaxies NGC 2207/ IC 2163</h1>
<em class='timestamp'>February 4, 2004 09:00 AM</em>
<section class='article-content' id='art-cntnt'>
<canvas id='c' class='c'></canvas>In the direction of the <!--and so on-->
</section>
</article>
CSS :
html {
background: url(moving.jpg) 0 0;
background-size: 200%;
font: 100%/1.3 Verdana, sans-serif;
animation: ani 4s infinite linear;
}
article {
width: 50em; /* tweak this ;) */
padding: .5em;
margin: 0 auto;
}
.article-content {
position: relative;
color: rgba(0,0,0,0);
/* add slash at the end to check they superimpose *
color: rgba(255,0,0,.5);/**/
}
.c {
position: absolute;
z-index: -1;
top: 0; left: 0;
}
@keyframes ani { to { background-position: 100% 0; } }
JavaScript:
var wrapText = function(ctxt, s, x, y, maxWidth, lineHeight) {
var words = s.split(' '), line = '',
testLine, metrics, testWidth, alpha = 1,
step = .8*maxWidth/ctxt.measureText(s).width;
for(var n = 0; n < words.length; n++) {
testLine = line + words[n] + ' ';
metrics = ctxt.measureText(testLine);
testWidth = metrics.width;
if(testWidth > maxWidth) {
ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
alpha -= step;
ctxt.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else line = testLine;
}
ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
alpha -= step;
ctxt.fillText(line, x, y);
return y + lineHeight;
}
window.onload = function() {
var c = document.getElementById('c'),
ac = document.getElementById('art-cntnt'),
/* use currentStyle for IE9 */
styles = window.getComputedStyle(ac),
ctxt = c.getContext('2d'),
w = parseInt(styles.width.split('px')[0], 10),
h = parseInt(styles.height.split('px')[0], 10),
maxWidth = w,
lineHeight = parseInt(styles.lineHeight.split('px')[0], 10),
x = 0,
y = parseInt(styles.fontSize.split('px')[0], 10),
text = ac.innerHTML.split('</canvas>')[1];
c.width = w;
c.height = h;
ctxt.font = '1em Verdana, sans-serif';
wrapText(ctxt, text, x, y, maxWidth, lineHeight);
};
コンテナの高さを指定しなくても可能です。
この動作デモを確認し、コンテンツの追加/削除を試みてください#contents
HTML
<div id="container">
<div id="contents">
Some contents goes here
</div>
<div id="gradient">
</div>
</div>
CSS
#container {
position:relative;
}
#contents {
background:red;
}
#gradient {
position:absolute;
z-index:2;
right:0; bottom:0; left:0;
height:200px; /* adjust it to your needs */
background: url(data:image/svg+xml;base64,alotofcodehere);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}
これは、不透明度をサポートするほぼすべてのブラウザー (IE9 を含む) で機能します。IE8 の "rgba" フォールバック (未テスト) を次に示します。
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
独自のグラデーションを生成するには、Colorzillaにアクセスしてください。
最初のストップ (0%) は不透明度 0 ( rgba(255,255,255,0);) である必要があり、次に約 70% である必要があります - いくつかのテストを行って、何が良いかを見つけてください - 不透明度 1 の別のストップを追加します ( rgba(255,255,255,1);)。
明らかに機能させるには、ページ/コンテナの背景を知っている必要があります...
</p>
これはあなたが探しているものですか？
私のjsfiddleを見てください。
あなたの説明が不十分なため、あなたが何を望んでいるのかわかりません。問題が何であるかの jsfiddle を作成できますか?