Javascript

記事の詳細 表示・非表示

スムーズにスクロールするjQueryプラグイン

スムーズスクロールを実装したいときに、「この機能はないのかなぁ・・。」とか探したりするのが大変だったので、自分のなかで必要な機能を切り替えて使えるスムーズスクロールをjQueryのanimateのscrollTop,scrollLeftをつかってjQueryプラグインを作ってみました!

前々から作ってはいたのですが、昔の拙いコードが残っていたので少し整理しました。

続きを読む

jQuery Plugin パラメーターの代わりにdata属性で代用できるプラグイン

プラグインを複数のページなどで違う動作をしたい場合に
わざわざjsを用意して指定し直さないければいけないのが煩わしいと思っていたので
かわりにdata-*で指定したパラメーターを使うことができるjQuery プラグインを作りました!

続きを読む

タグをランダム配置&サイズにしてなるべく重ならないように配置するjQueryプラグイン

ランダム配置を作った時に上手く行くときはきれいな形になるのだけど 失敗するとすごい重なっちゃってあんまり綺麗に見えないことがあります・・。

なので極力重ならないようにしてくれる仕組みを作ってみました。

続きを読む

Gruntでコピーライトつきの.minファイルを作る

  • kamem
  • カテゴリー : Javascript
  • タグ : Grunt

javascriptのファイルを圧縮するときにコピーライトと日付とかを手動でいれたりするのめんどくさいなぁ・・。と思っていたので

jsフォルダに入っているjsと同ファイル名.txtをコピーライトとして追加した.minファイルを作るgruntを作りました。

続きを読む

テキストを1文字づつアニメーションで表示させるjQueryプラグイン「jquery.textAnimation」

テキストに1文字づつCSSでアニメーションをつけたら面白い動きになるんじゃないかなぁと思って作ってみました!値を設定できるようにしてみたら自分で予想してないような面白い動きも作れて楽しめました。
値によってはハリーポッターとか映画でよくあるような文字の出方みたいになったり!

続きを読む

dlを使ったtableのdtとddの高さを揃えるjQuery プラグイン「jquery.dlTableSet」

dlを使ってdt ddを横並びにしてテーブルを再現するときに、dtの高さがddよりも高い場合にレイアウトが崩れてしまいます。それを解消するためのjQueryプラグインです!単純に読み込ませてタグを指定するだけなのでお手軽です。

続きを読む

スマホサイトを作るときにclick eventの代わりに使えるjQuery プラグイン「jquery.extratouch」

iPhoneやAndroid向けにサイトをを作るときにclickイベントを使うと若干イベントの発動が遅くなっちゃうんですよね・・。なぜかというと ダブルタップのズームを待つために時間をとってるらしいです。

なのでこれを解消するために使えるプラグインです。

+αの要素としてタップしてからスクロールしたときに関数を実行したりもできます。

例えば、タップ時にクラスを付与して、スクロールしたらクラスを外すなんてこともできるのでcssでいうボタンのhoverみたいな効果に使えたりします!

続きを読む

windowの幅やタグの幅によりcssを調整するjQuery プラグイン「jquery.flexibleCssSize」

スマホサイトやレスポンシブサイトを作っていると
windowsの幅に応じてcssを変更したい時がよくあります。

これを使うと指定した基準値からの割合でcssを調整することができます。

こんな時に便利なはず!

  • iPadにも対応させたいし全体を大きくしちゃう(zoomで全体を大きくする際の制御)
  • 画像を一定値から大きくしたくない場合や
    一定値以下にしたくない場合
  • フォントサイズを割合決めて大きくしたり小さくしたり

続きを読む

画像の先読み(プリロード) jQuery プラグイン「jquery.preload」

Javascriptでプリロードを実装するのってそれ用に関数が用意されているわけではないので ちょっと無理やり実装する必要があるんですね・・。

パララックス効果のサイトを作るときなど 画像をたくさん読み込む必要があるサイトを作る時には 画像を先読みしてからコンテンツを表示させるようにしておくと

画像が読み込まれていない状態のサイト閲覧を防ぐことができます。

個人的なイメージなんですけど、プリロードとかHTMLのサイトに実装されていたりすると 「おっ、どんなすごい内容のサイトなんだろう!」ってちょっとワクワクしたりしますw

ということで、プリロードを割りと簡単に実装できるjQuery プラグインを作ってみました!

続きを読む

パララックス効果を再現するjQueryプラグイン「jquery.parallax」

仕事でパララックス効果を使ったサイト作る機会があり、
使い勝手のいいプラグインないかなぁーと思って探していたのですが。
なかなか見つかりませんでした・・。

パララックスの仕組みってそれほど難しくないんだねぇーと思いながら作り始めたのですが・・。

なかなかいろいろな機能を組み込みだすとなかなか大変な感じで;
結構前に作った奴は自分だけ使えればいいやーと思い、プラグイン化していなかったのですが、最近ようやくプラグイン化しました。

もしよければ使ってみてください!

続きを読む

iPhone・Android・PCでフリックを実装できるjQueryプラグイン

スマートフォンサイトを作る際に、
フリック操作を取り入れたものを作ることがあり、

こちらのものを使わせていただいていました。

実際に使っているうちに、個人的にほしい機能などを追加したりしていたのですが、

毎回色々追加などしているうちにごちゃごちゃで分かりづらくなってきてしまったので、(piglovesyou様 すみません・・。)
自分で使いやすいように作り直してみました!

続きを読む

いろいろな動きをするニュースティッカー(News Ticker) jQueryプラグイン

ティッカーをいろいろ探していたのですが、思い通りのものがみつかりませんでした・・。

なので、いくつか動きを作ってみました!

ティッカーを使う機会はあまりないかもしれないけど、使う機会があったら使ってみよー!

続きを読む

jQueryでスムーズスクロールプラグイン

スムーズにスルスルっとスクロールするJavascriptを使うときに「どれを使おう!?」っていつも迷うので、自分にあったものをjQueryのアニメーション機能を使って作ってみました!

続きを読む

Shadowbox(3.0b)

最近、Lightboxで、Shadowboxがいいよーってことで、使ってみようかなぁ、と思ったのですが、設置するのに少し手間取ったので、手間取った部分をかいておこうかなぁ!と思います!今度設置するときに忘れないように!

続きを読む

このページの先頭へ戻る