[B! JS] [4ページ] z1a2nhのブックマーク

particles.jsを使って簡単に幾何学的なアニメーションを作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

はじめまして！　8月にLIGに入社しましたフロントエンドエンジニアのゆたろです。今後ともよろしくお願いします。さてさて、今回は簡単に幾何学模様のアニメーションが作れるparticles.jsについて紹介したいと思います。 particles.jsを使ってみようまず下記よりプラグインをダウンロードしてください。ダウンロードしたzipファイルを解凍して、中からparticles.jsまたはparticles.min.jsを取り出します。 http://vincentgarreau.com/particles.js/ 次に下記のソースをコピペして、別ファイルのJSとして保存してください。（当記事ではsetting.jsとします。） particlesJS('hoge',{ "particles":{ //--シェイプの設定---------- "number":{ "value":80

z1a2nh 2015/11/02

JS

リンク

particles.js - A lightweight JavaScript library for creating particles

particles.js is a lightweight JavaScript library for creating particles.

z1a2nh 2015/11/02

JS

リンク

HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート

HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。画像: Girly Drop HTML5で作成する時の必要最小限のテンプレートナビゲーションを上部に固定配置背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレートまずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。テンプレートはIE9や8以下への最低

z1a2nh 2015/10/26

JS

リンク

[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips

jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。ページの上に戻るボタン画像のプリロード画像がロードされているかチェックリンク切れの画像を自動修復ホバーのトグル入力欄を使用できなくする aタグのクリックイベントだけを利用するアニメーションを簡単に設定するシンプルなアコーディオン異なる高さのdiv要素を揃える外部リンクを新しいタブ・ウインドウで開くテキストが無い要素は非表示にするページの上に戻るボタン

z1a2nh 2015/10/23

JS

リンク

[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト - Flow Up

ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。デモの動きスクロールすると、後から追いかけるようにふわりと定位置に収まります。 Flow Upの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="flowup.js"></script> </body> Step 2: HTML 各パネルは、p, div, articleなどで実装します。 <body>

z1a2nh 2015/10/09

JS

リンク

jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ

MiniGrid -GitHub デモページ、アニメーションのデモレスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。 cta.js -GitHub デモページパネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで変形します。

z1a2nh 2015/09/16

jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ

JS

リンク

[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備当スクリプトを外部ファイルとして記述し、初期化しておきます。スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1

z1a2nh 2015/09/10

レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height

JS

リンク

進捗率を計算してスクロールアニメーションを制御する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、おじいちゃんです。今回は進捗率を計算して、スクロールアニメーションを実装する方法について書きたいと思います。進捗率とは進捗率とは、作業がどのくらい進んでいるかをパーセンテージ（0％から100％）で表したものになります。スクロールアニメーションで進捗率を使うポイントスクロールアニメーションで進捗率を利用する場合は、スクロール開始地点（始点）からスクロール終了地点（終点）までの進捗率を、0から1で求めるように計算するとより使い勝手がよくなります。どうして進捗率を0から1で取得するの？なぜ使い勝手がよくなるかというと、理由は0から1という値にあります。 CSSのプロパティには、各々のプロパティで個別の最小値・最大値あるいは任意の値をいれることができます。例えば、透明度を扱うopacityは最小値が0で最大値が1ですが、要素の回転を扱うrotationは最小値0で最大値

z1a2nh 2015/09/04

進捗率を計算してスクロールアニメーションを制御する方法

JS

リンク

[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop

アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="path/to/Wallop.min.js"></script> </body> アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。 <head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-animation.c

z1a2nh 2015/09/01

レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop

JS

リンク

[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ

コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。

z1a2nh 2015/08/26

Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ

JS

リンク

ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld

他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。窓に水滴がついていく様子を表現できる「rainyday.js」とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。水面に滴が落ちているような感じを表現できる「Raindrops.js」コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ

z1a2nh 2015/08/21

ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10

JS

リンク

[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。デモのアニメーション minigridの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-it em」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-it em"></div> <div class="grid-it em"></div> <div class="grid-it em"></div

z1a2nh 2015/08/03

シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid

JS

リンク

[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat

デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを紹介します。スクリプトだけでなく、ページ全体やデモなども非常に面白いデザインです。 Chocolatの特徴個人ユーザーからプロのWeb制作者まで専門的な知識がなくても簡単に実装でき、APIを使うと更に高性能な機能を提供します。クロスブラウザ対応全ての主要ブラウザで動作します。テストブラウザ: IE7+, Firefox, Chrome, Opera, Safari 軽量スクリプトはたった23KB、ミニファイ版は10KBです。レスポンシブ対応デスクトップ、タブレット、スマホをサポート。デバイスごとに異なる画像を表示したり、自身のブレイクポイントを定義するこ

z1a2nh 2015/07/30

画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat

JS

リンク

[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ

最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。

z1a2nh 2015/07/23

最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ

JS

リンク

今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、サリーです。最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時

z1a2nh 2015/06/16

今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3）

JS

リンク

[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons

Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル当スタイルシートとスクリプト、jQueryとVelocityを外部ファイルとして記述します。 <head> ... <link rel = "stylesheet" href = "Path/To/Quttons.css" /> </head> <body> ... コンテンツ ... <script src = "Path/To/jQuery" type = "text/javascript"></scr

z1a2nh 2015/06/16

アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons

JS

リンク

[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js

デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.google apis.com/ajax/libs/jquery/1.11.0/j

z1a2nh 2015/05/13

ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js

JS

リンク

[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js

最近のWebページで人気があるのは、ビジュアルの連続性。パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。モーダルウインドウとサイドバーのデモコマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data

z1a2nh 2015/04/21

ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js

JS

リンク

jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。最近友人と『中学生円山』を観に行きました。女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`）さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。こいつらを知っとくと下記のようなメリットがあります。。アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる超シンプルな記述なので、今日から使えるいやーこれは便利ですね。というわけで、早速解説していきます。【こちらもおすすめ】超簡単jQ

z1a2nh 2015/04/11

超簡単jQuery！toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法

JS

リンク

[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory

デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS

z1a2nh 2015/04/09

タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory

JS

リンク

はてなブックマーク

タグ

関連タグで絞り込む (2)

JSに関するz1a2nhのブックマーク (106)

お知らせ

月間はてなブックマーク数ランキング（2024年7月）

今週のはてなブックマーク数ランキング（2024年7月第4週）

今週のはてなブックマーク数ランキング（2024年7月第3週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス