jquery - CSSによる印刷効果

Question

CSS3（そしておそらくjQuery）でこの効果を達成することはまったく可能ですか？私は通常の「slideDown」効果を試しましたが、これにさえ近くありません。何か案は？

Answer 1

あなたはCSSトランジションでそれを行うことができます。

コンセプトは、height:0and overflow:hidden（paper-holderと名付けましょう））を含む要素を持ち、その中には絶対に配置された要素を下部（withbottom:0）（paper）に配置することです。

このように、ペーパーホルダー要素の高さを0から紙の高さに移行すると、紙が滑り出しているように見えます。

http://jsfiddle.net/9FfKZ/1/でのデモ

---

アップデート

印刷手順をより明確にするための改善は、私の最初のデモが持っていた線形の代わりにsteps（ドキュメント）タイミング関数を使用することです

http://jsfiddle.net/9FfKZ/4/でのデモ

Answer 2

私の考えでは、これは 3 つの異なる要素を持つことです。とりあえず紙は忘れてください。プリンタースロットだけを考えてください。私はそれを2つの別々の画像にします。上半身と下半身です。2 つの画像は、用紙を給紙する場所で一致する必要があります。2 つの画像を絶対に配置して、通常どおり結合されているように見せます。

ここでのコツはz-index、上半分の z-index を下半分よりも高くして、基本的に z 軸上で "ユーザーに近づける" ことです。上z-index:9999;半分を a に、下半分を a にするz-index:9995;

ここで、紙を表す div を作成します。その div に z-index を指定します。上部と下部のグラフィックの間のどこかにあるので、z-index:9997;. 上部のグラフィックスの完全に後ろに配置し、終点までゆっくりと下にアニメーション化します。

実際のデモ: http://jsfiddle.net/XzVA9/2/

---

HTML

<img id="top" src="http://s1.postimage.org/txsnx2v9r/imgtop.png" />
<div id="paper">Receipt</div>
<img id="bottom" src="http://s1.postimage.org/3o7lea9cf/imgbot.png" />

---

CSS

#top{
    position:absolute;
    top:0;
    left:0;
    z-index:9999;
}
#bottom{
    position:absolute;
    top:284px;
    left:0;
    z-index:9995;
}
#paper{
    position:absolute;
    top:204px;
    left:250px;
    z-index:9997;
    width:300px;
    height:50px;
    line-height:50px;
    padding:15px 0;
    background:#fff;
    border:1px solid #999;
    text-align:center;
    font-weight:bold;
    font-size:22pt;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black; 
}

---

JS

$('#paper').animate({'top':'284px'}, 3000);​

---

Answer 3

javascript で setInterval を使用して、x ミリ秒ごとに位置を設定し、ジッター効果を作成します。これを機能させるための適切な CSS があることを確認してください。右側の要素に絶対/相対を配置する

var offset_y = 0,
    slide_interval = setInterval(function() {
        $('#element').css({
            left    : 0,
            top     : offset_y
        });

        offset_y += 2;

        if(offset_y > 1000) // Desired Value Here
            clearInterval(slide_interval);
    });