忍者ブログ
06 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

24 June

ファーストビューを背景フルスクリーン・スライドショーにしたい

https://create.irec.jp/jquerylog/2014/678/
http://guitar.irec.jp/

上記めちゃありがたいことです
デモサイトの設定は、説明コードの記述と多少違います。余計な設定の記述が省かれてます
デモサイトのまんまでokならデモサイト内のコードをコピペしていいとおもいます。




・imgじゃなくてbackgroundでフルスクリーンにしたい
・ブラウザサイズきっちり縦100% 横100% じゃなくて、下にはスクロール領域があるが、ファーストビュー領域にぴったり100%100%で張り付いた背景100%フルスクリーンがいい
・背景がブラウザ縮めて切れたりしない

検索してもブラウザサイズ100%100%きっちりばかりで使えない
100hwだか100whだかは簡単なのに、スマホが対応してなくてつかえねーしどうしようもねー」



背景フルスクリーンスライドショー
https://rewish.jp/blog/releases/jquery_bg_switcher



16 June

jQueryプラグイン「colorbox」でinlineが動作しない場合

inlineだとaリンクが#付きになるため、スムーススクロールとバッティングするから
スムーススクロールのプラグインを使用してる場合は、無効化の記述があります。

私はどっかから拾ったスムーススクロールのコードを使っております。
:not(.inline)を足します
<script>
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]:not(.inline)').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
    // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
  
27 December

上品なキラキラエフェクト jquery

http://9-bb.com/canvas%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6hover%E6%99%82%E3%81%AB%E3%82%AD%E3%83%A9%E3%82%AD%E3%83%A9%E3%81%97%E3%81%9F%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%B8%8E%E3%81%88%E3%82%8B/

http://codepen.io/simeydotme/pen/jgcvi/

http://hiroba.chintai.net/qa8776120.html


サンプルコードの各クラス名を変える(js内)。いらないところはコメントアウトする
各箇所色んなエフェクトがあるので、好きなのを残して使う

hoverじゃなくて常時キラキラに改変
$this.on({
"mouseover focus" : function(e) {
sparkle.over();
},
"mouseout blur" : function(e) {
sparkle.out();
}
});
これをコメントアウト
変わりに
sparkle.over();