雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造
雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造します。 Versionは1.7.4です。（だと思います＾＾；） デモサイト http://loktar00.github.io/JQuery-Snowfall/ 通常の設置$('#section').snowfall({ image :"images/flake.png", minSize:10, maxSize:32 }); snowfall.jquery.js 140行目 flakeMarkup.src = options.image; この部分を flakeMarkup.src = options.image[random(0,options.image.length-1)]; に変更 改造後if(options.image){ fakeMarkup = document.createEl
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
第18回 東京アートビートAPIを使ってさまざまなイベント情報を取得してみよう! - MdN Design Interactive
ゼロからのWebサービス制作も自由自在 WEB API PROGRAMMING! 第18回 東京アートビートAPIを使って、 さまざまなイベント情報を取得してみよう! 東京アートビートAPI 今回は、東京アートビートAPIを使って、東京で開催されているイベント情報を取得してみよう。東京アートビートAPIを使うと、東京アートビートが公開している東京で開催されているアート・デザイン展の開催情報を簡単に取得することができる。 制作・文＝中澤直也（サノウ株式会社） INDEX >>> STEP 1 東京アートビートとは >>> STEP 2 東京アートビートAPIの使い方 >>> STEP 3 イベントリストを取得してみよう >>> STEP 4 位置情報からイベント情報を取得してみよう >>> STEP 5 東京アートビートAPIの応用例 Profile 中澤直也●1977年生まれ、長野県出身。
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
団塊爺ちゃんの備忘録
AjaxでJSON形式のデータを扱う JSON形式のデータは、XML形式よりタグが無い分サイズも小さく、又、XML形式で必要なDOM操作も無く、 単純な処理で読み込みや書き出しができます。 javascriptはもとより、さまざまな言語間でのデータの受け渡しに使えるので便利です。 JSONのデータ形式や参照方法を勉強してみます。 JSONのデータ形式 JSONで使えるデータ型は数値・文字列・真偽値・配列・オブジェクト（連想配列）などです。 カンマで区切られたデータの集合を、配列は大カッコ[]で、オブジェクトは中カッコ｛｝で囲みます。 キーは必ず文字列になります。つまりダブルクォーテーションで囲む必要があります。 配列 ["田中", "佐藤", "鈴木"] オブジェクト {"name":"田中", "age":25, "sex":"男"} 両方の組み合わせ [{"name":"田中", "a
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
画像をランダムに表示する方法！JavaScriptで切り替え [ホームページ作成] All About
画像をランダムに表示する方法！JavaScriptで切り替え 複数の画像リストの中から、JavaScriptでランダムに1つが選ばれて表示される仕組みを作ってみましょう。お気に入りの写真の中から1枚だけを毎回ランダムに選んで大きく表示させたい場合などに活用できます。 アクセスするたびに1枚がランダムに選ばれるだけなので、スライドショーで画像を順番に表示する場合とは異なり、大きなスクリプトを読み込んだり書いたりする必要はありません。リアルタイムに切り替わっていくわけではないので、ブラウザ上の表示はうるさくなりません。乱数を使って表示対象を選ぶだけの短いJavaScriptソースで作れます。ぜひ試してみて下さい。 【本記事の目次】 JavaScriptを使ってランダムに表示画像を切り替えるサンプル JavaScriptで画像を毎回ランダムに切り替える手順 乱数を使ってランダムに表示画像を選ぶJ
![画像をランダムに表示する方法！JavaScriptで切り替え [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/f57382356f854710ee01520ff37833855d726b46/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F0%2F5%2Ftopimg_original.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
