0

インタラクティブに作成しているiPad専用のHTML5コミックブックがあります。コミックブックの 8 ページ (以下のリンクを参照) で、私が参照しているシーンは右下にあり、現在、その下にあるものの暗いバージョンがあり、明るいように見えるようにするため、暗く表示されるはずです。オンになっていません。

コミックへのリンク

これが私がしたいことです：

  1. クリックすると音が鳴る（パーフェクト）
  2. クリックすると、再生されるサウンドの最初に聞こえる短い電気効果音と同期して、暗い背景レイヤーの不透明度が点滅します。ライトがオンになっていることを示すために、不透明度は 0 で終了する必要があります。

現在起こっていることは次のとおりです。

  1. クリックすると音が鳴る（パーフェクト）
  2. クリックすると、暗い背景レイヤーの不透明度が 0 に設定されますが、ユーザーがクリックを離すと 1 に戻ります。

基本的に、不透明度に遅延を導入し、不透明度パラメータ間に「ちらつき」を導入して、ちらつきのある光を模倣します。

HTML 

<a href="#" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">

    <div class="ibox" id="p8s5">

        <div id="flicker"></div>    

        <button id="playButt" class="animated flash" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">                
        </button>

    </div> 

</a>

CSS

div#flicker {
opacity: 1;
-transition-property: opacity;
-webkit-transition-duration: 0s;
-webkit-transition-delay: 0s;
position: absolute;
bottom: 1px; right: 1px;
width: 245px; height: 341px;
background: url('img/p8s5.jpg') no-repeat;
}

div#flicker:active, div#flicker:focus {
  opacity:0;
}

お役に立てれば幸いです。

どうもありがとう、マット

4

1 に答える 1

2

このjsfiddleはあなたの問題を解決するかもしれません。

まず、css3でアニメーションを作成します。

.animateFlicker {
    -webkit-animation: flicker 17s;    
}

@-webkit-keyframes flicker{
    0% {opacity:1}
    3% {opacity:0}
    6% {opacity:0}
    7% {opacity:1}
    8% {opacity:0}
    9% {opacity:1}
    10% {opacity:0}
    99% {opacity:0}
    100% {opacity:1}
}

次に、jQueryでクリックイベントをリッスンしてアニメーションを実行し、時間が経過すると停止します。

$('#flicker').click(function(){
    var $this = $(this);
    $this.addClass('animateFlicker');
    setTimeout(function() 
    {
        $this.removeClass('animateFlicker');
    }, 17000);    
});​

注：私はwebkitのみを使用しているため、すべてのブラウザーで正しく機能するように変更する必要があります。

于 2012-07-04T23:03:08.777 に答える