IEでbackground-attachment: fixedがガタつく問題を解決

0

    パララックス的な表現につかう、背景画像の固定cssが

    IEだと最新版でもガタガタする不具合がある。 ググって解決方法を探したので、覚書。

    if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident¥/7¥./) || navigator.userAgent.match(/Edge¥/12¥./)) { $('body').on("mousewheel", function () { event.preventDefault(); var wd = event.wheelDelta; var csp = window.pageYOffset; window.scrollTo(0, csp - wd); }); }

     

    引用元:http://cloud-collector.link/2016/05/08/ie-fixed-scroll-bug/

     


    スプライト機能でキャラクターアニメーション

    0

      createjsにはスプライト機能があって、簡単にキャラクターアニメーションができる。

      このとき使用するスプライトシートは、animate(FLASH)を使って作成できる。

       

      //スプライトシートの定義

        var chara = {
              images: ["chara.png"],
              frames: {width:100, height:100,imageIndex:0,regX:50,regY:50},
              animations: {
                  stand:0, //固定フレーム
                 walk:[1,2], //ループフレーム
                  jump:[1,7,"walk"] //一回再生フレーム。最終パラメータは終了後のラベル

                shoot: {  //詳細なパラメータはオブジェクトで設定可能

                    frames: [0, 3, 4, 5],

                    next: "walk",

                    speed: 0.5

                }

              }
          };

         

      //スプライトシートとスプライトを紐付け

      var spriteSheet=new createjs.SpriteSheet(chara);
      var sprite=new createjs.Sprite(spriteSheet);
      stage.addChild(sprite)

       

      //スプライトの切り替え

      sprite.gotoAndPlay( "jump");

      sprite.gotoAndStop( "stand");


      フォントサイズをリキッドさせるjQueryプラグイン

      0

        使用頻度が増えてきたので、毎回書くのが面倒になり、ライブラリ化。

        もとのフォントサイズとウインドウサイズの比率をベースに

        ウインドウの可変にあわせてサイズをリキッドさせる。

        レスポンシブで、デバイステキストを使いたいけど、デザイン崩したくない時などに。

         

         

        http://jsdo.it/design_peke/4H5G


        IEでも有効な、ラジオボタン・チェックボックスのデザイン変更(ラベルクリック対応)

        0

          ひとまずコピペのみ。


          input[type=radio]{
              display: none;
              margin: 0;

          }
          input[type=radio] + label {
              background-image: url(radio_off.png);
              background-repeat: no-repeat;
              background-position: left center;
              padding: 0;
              padding-left: 30px;
              display: inline-block;
              margin-right: 12px;
              font-size: 14px;
              line-height: 30px;
              cursor: pointer;
          }

          input[type=radio]:checked + label {
              background-image: url(radio_on.png);
          }
           


          AudioContext覚書き

          0

            html5のaudioは問題が多いのでAudioContextを使いたいが

            そこまで高機能じゃなくていいので、自分が使いやすい程度に整理。

            IEでの代替処理に対応させた。

             


            【特長】
            ・ボリューム設定可能
            ・ループあり(BGM等)、なし(SE等)両対応
            ・読み込み後コールバック対応
            ・IEの場合、代替処理

            【サンプル】


                var snd1=new WebSound("http://jsrun.it/assets/K/B/5/T/KB5Tv.mp3",1,false,function(){
                    alert("snd1 ready!")
                });
                 var snd2=new WebSound("http://jsrun.it/assets/K/B/5/T/KB5Tv.mp3",0.5,true,function(){
                    alert("snd2 ready!")
                });

                function playSound(str){
                      eval(str).playSound();
                }
                

             function stopSound(str){
                      eval(str).stopSound();
                }

             

            【コード】

            http://jsdo.it/design_peke/02PA/edit

             

             

             


            << | 2/21PAGES | >>

            selected entries

            categories

            archives

            recent comment

            recommend

            profile

            BOOKS

            links

            search this site.

            others