フロントエンドに必要なとりあえずのjsプラグイン2020 - Qiita
2020年3月時点でまだ現役なプラグイン。 非常にお世話になっております。 雑いのでもう少しちゃんと書きたい。 jQuery もそこそこ多めです。 ▼ ユーティリティー系 bowser.js http://lancedikson.github.io/bowser/docs/bowser.js.html ブラウザ判定 [日本語解説] https://co.bsnws.net/article/231 Moment.js https://momentjs.com/ jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。 [日本語解説] http://blog.asial.co.jp/1158 date-fns https://github.com/date-fns/date-fns dateライブラリ Momtent.js よりモダン。使いたい機能だけをモジュール単位でインポートでき
jQueryでページロード時にカーテンが開くような効果をつけてみる｜BLACKFLAG
Webページを開いた際（ページロード時）に何か演出を加えられたらおもしろいかな、と ふと思い立って作ってみた、ページロード時にカーテンが開くような演出を加えるスクリプト。 何かに使えそうな感じもしたので紹介してみます。 まず動作サンプルから。（画面内の「ページリロード」をクリックしてみてください。） ※サンプル画面上のページロード演出部分以外は、 先日のエントリー「jQueryで追尾型メニューリストを作ってみる」と同じものを使用しています。 ≫別ウィンドウで見る場合はこちら ページロードされると同時にカーテン要素となる＜div＞を左右に２つ生成し、 animateで幅と透明度を制御しているだけ。 HTMLソース内には特に特別な指定を加える必要はありません。 CSSでカーテン要素として生成する＜div＞に対して以下の指定を加えます。 ※今回のサンプルではカーテン要素の左側を＜div id=”
スライダーの上に、扉が開く動作（animate）を付けるjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
スライダーの上に、扉が開く動作（animate）を付けるjQuery クロスフェードのスライダー上に、扉が開く動きを付けるjQueryです。 オンマウスやクリックで開くタイプではなく、読み込めば開くタイプです。 コードはとても簡単・シンプルですので、使える部分があれば参考にしてみてください。 参照サイト-スライド：最も短いコードで実装出来るイメージスライドショー 参照サイト-アニメーション：Crafting an Animated 上記の参照サイトを参考にさせていただききました。 良記事ありがとうございます！ DEMO デモページ DEMO デモページを例に説明していきます。 また、スライダー部分についての説明は省略ぎみです。 この記事のHTML・CSS・JSをコピペすれば動くと思いますが、詳しくは参照サイトの「スライド」をご覧ください。 記述例：HTML <html> <head> ・
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
jQueryのanimateで自由にアニメーションできるようになろう
Posted: 2011.12.27 / Category: javascript / Tag: jQuery, アニメーション jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
