読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】lazyload使い方

jQuery

head内にlazyloadのプラグインjs読み込ませる。

以下はオプションでカスタムのイベントloadImgをつくってる。
kikaku1をクリックすると、lazyloadが始まる。(img.lazyの画像読み込みが始まる)

data-originalに本命のimgを。srcにloading中の画像を

<img src="dummy.png" class="lazy" data-original="honmei.jpg" alt="*" />
$(function(){
  $('img.lazy').lazyload({
    effect: 'fadeIn',
    event: 'loadImg'
  });


  $( '.kikaku1' ).on( 'click', function(){
    $("img.lazy").trigger("loadImg");
  });

});


【参考URL】
http://www.webdesignleaves.com/wp/jquery/1335/

http://cly7796.net/wp/javascript/plugin-jquery-lazyload/

【EC-CUBE2系】コメントアウト

<!--{* ここがコメントアウトされる *}-->

http://qiita.com/tomcky/items/d947c26786d7269f5cf3

グリッドジェネレーター

グリッド

http://gridulator.com/(こっち使うかな)

http://www.kenjisugimoto.com/gridpx/

【CSS3】 transform プロパティを使って CSS アニメーションを実行した際に要素がガタつくのを防ぐ方法

css
.element{
    -webkit-transform: translatez(0);
    // 又は
    -webkit-transform: translate3d(0,0,0);
}

【参考URl】
http://memocarilog.info/webdesign/8304

【css】EDGE,IE,FIREFOXのみに適用されるcss

css

IE

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

/* ここにIEのみ適用したいcssを */

}
@-moz-document url-prefix() {

/* ここにfirefoxのみ適用したいcssを */

}
@supports (-ms-ime-align:auto) {
  .selector { property:value; }
}


【参考URL】
edge
https://teratail.com/questions/50525

velocity.jsのqueue

velocity.js

velocityのメソッドチェーンは最初に定義したものから順番に実行されます。

1回目に定義したアニメーションの途中から、2つ目以降のアニメーションを実行させることもできます。それはqueueを使う。


【参考URL】
http://un-tech.jp/velocity-basic-option/

mp4からwebmに変換するオンラインツール「cloudconvert」

使い方は以下。というかみなくてもできるか。。。
http://webcre8.jp/use/webservice-creation-cloudconvert.html


https://cloudconvert.com/