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

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

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

jquery callback コールバック queue 使いかた

jQuery

下記コードは、
#bg_fvがフェードイン後に#logo_indexがフェードイン。そのあとに.home #g_naviがfadeInされる。

最後にdequeueを。

$('#bg_fv').fadeIn(1000).queue(function () {
        $('#logo_index').fadeIn(500).queue(function () {
            $('.home #g_navi').fadeIn(500).dequeue();
        });
});

【参考URL】

http://tsmd.hateblo.jp/entry/2013/01/17/214018

背景画像を読み込んだら処理 imagesloaded

jQuery

まずプラグインimagesloaded読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>

そして以下。

$(function(){
  $('#bg_fv').imagesLoaded( { background: true }, function() {
	$('#bg_fv').fadeIn(1000);
  });
});


【背景画像】
https://www.imd-net.com/blog/2016/03/01-233812/

【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