16355


JavaScript, html, cssでカメラのフラッシュのようなアニメーションをしたいと思っています。  
buttonを押したときに画面全体を一瞬だけ白く光らせるにはどうすればいいのでしょうか?  
jQueryなどを使えばできるようですが、学習のため、ライブラリを使わずに実現したいと考えています。

[code]

    
    <!DOCTYPE html>
    <html lang="ja">
        <head>
            <title&gtCamera; flash</title>
            <meta charset="utf-8">
        </head>
        <body>
            <div id="cameraflash">
                <button>Camera flash</button>
                <p>Camera flash</p>
            </div>
        </body>
    </html>
    
    
    
[/code]


CC BY-SA 3.0
2015-09-06T04:15:58.220
16297
2015-10-11T09:10:42.857
2015-09-07T14:23:27.187
5246
5246
question
javascript html css html5
JavaScriptでライブラリを使わずにカメラのフラッシュのようなアニメーションをする


残念ながらHTMLの機能だけで希望のアニメーションをすることができないようです。  
ただし、JavascriptとCSSも使えば、カメラのフラッシュみたいなアニメーションが簡単にできます。

以下のポストは英語なんですけど、一番上のvihanさんによる回答には使えるコードが載っています  
<https://stackoverflow.com/questions/29594023/getting-camera-like-shutter-
flash-effect-on-button-click-with-html5-and-jquery>

これらの言語に詳しくない場合、以下の入門サイトを参照すればすぐ分かると思っております。  
jQueryに関する入門サイトはこちらです：<http://ponk.jp/jquery/basic/>  
そしてCSS : <http://www.ink.or.jp/~bigblock/css/>

以上、頑張ってください


CC BY-SA 3.0
2015-09-06T18:44:44.783
16323
2015-09-06T18:44:44.783
2017-05-23T12:38:55.250
-1
12223
16297
answer


**jQueryを使わずに** ……ですよね？  
特に理由が無ければjQueryを使えば楽なので使えばいいと思いますが……  
基本は下記ですかね。

[code]

    var isLock = false;
    var target_elm = document.getElementById("flash");
    var perc = 0.1;
    var timer = null;
    function run_flash(){
      //処理中じゃないか
      if(!isLock){
        //処理ロック
        isLock=true;
        //透過度リセット
        perc=0.1;
        //0.1秒間隔(本当は三角関数使うなどして自然な上昇率にするといい)
        timer = setInterval(
          function(){
            if(1<=perc){
              //IE
              target_elm.style.filter = 'alpha(opacity=100)';
              //FF
              target_elm.style.MozOpacity = 1.0;
              //other
              target_elm.style.opacity = 1.0;
              //処理ロック解除
              isLock = false;
              //タイマー削除
              clearInterval(timer);
            }else{
              //IE
              target_elm.style.filter = 'alpha(opacity='+(100*perc)+')';
              //FF
              target_elm.style.MozOpacity = perc;
              //other
              target_elm.style.opacity = perc;
              perc+=0.1;
            }
          },
          100
        );
      }
    }
[/code]

[code]

    #flash{
      width:128px;
      height:128px;
      background-color:#a0a0a0;
    }
[/code]

[code]

    <div id="flash">私だぁ！</div>
    <button onclick="run_flash();">ピカァ！</button>
[/code]

* * *

  
一応jQuery版は下記になります。  
コード量からして楽なのは断然下記ですね。  
他のライブラリを汚してしまうなど理由があれば仕方ないですが……

[code]

    function run_flash(){
     $("#flash").css("opacity", "0.1");
     $("#flash").css("filter", "alpha(opacity=10)");
     $("#flash").fadeTo("middle", 1.0);
    }
[/code]

[code]

    #flash{
      width:128px;
      height:128px;
      background-color:#a0a0a0;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="flash">私だぁ！</div>
    <button onclick="run_flash();">ピカァ！</button>
[/code]


CC BY-SA 3.0
2015-09-07T19:12:29.517
16355
2015-09-07T19:12:29.517
7676
16297
answer


CSS Transition を活用して、最小限のスクリプトでフラッシュさせてみました。

  1. 透明で当たり判定を持たない白いカバーを作っておく
  2. 遷移時間ゼロで不透明にする
  3. これが表示されたら、すぐに 500ms の遷移時間で透明に戻す

[code]

    flashButton.addEventListener("click", function() {
      flashCover.classList.add("active");
      requestAnimationFrame(function() {
        flashCover.classList.remove("active");
      });
    });
[/code]

[code]

    html, body {
      height: 100%;
      background: gray;
    }
    
    .flash-cover {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      opacity: 0;
      pointer-events: none;
      
      transition: opacity 500ms;
    }
    
    .flash-cover.active {
      opacity: 1;
      transition: none;
    }
[/code]

[code]

    <button id="flashButton">フラッシュさせる</button>
    <div id="flashCover" class="flash-cover"></div>
[/code]


CC BY-SA 3.0
2015-09-08T06:36:43.353
16370
2015-09-08T07:16:07.353
2015-09-08T07:16:07.353
4809
4809
16297
answer


アニメーションの再生精度にこだわらないのであれば、cssだけでも、  
active擬似クラスとanimationでできますね。  

[code]

    html,body {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #333;
      color: #eee;
      font-size: 3em;
      text-align: center;
    }
    button::after {
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #fff;
      opacity: 0;
      pointer-events: none;
      z-index: 3;
    }
    button {
      font-size: 1rem;
    }
    button:active::after {
      animation:flash 0.5s 1;
    }
    @keyframes flash {
      50% {
        opacity: 1;
      }
    }
[/code]

[code]

    <button>Camera flash</button>
    <p>Camera flash</p>
[/code]


CC BY-SA 3.0
2015-10-11T09:10:42.857
17531
2015-10-11T09:10:42.857
12727
16297
answer