パララックス用ライブラリ skrollr.js を使ってみた｜Gimmick log
TOPJavaScript パララックス用ライブラリ skrollr.js を使ってみた パララックス用ライブラリ skrollr.js を使ってみた 公開日：2015.11.20 更新日：2017.10.18 JavaScript, パララックス 有名パララックスサイト用ライブラリskrollr.jsを使ってみました。 IE7にも対応しており、（transformプロパティは未対応）実用的です。 今回作ってみたサンプルページ skrollr.js の使い方 CSSを読み込む <link href="src/skrollr.css" rel="stylesheet" type="text/css" /> JSを読み込む（下部） <script type="text/javascript" src="dist/skrollr.min.js"></script> <!--[if lt IE 9
Granim.jsでグラデーションをアニメーション表示してWebサイトをリッチにしよう - Qiita
GitHubでトレンド入りしているJavaScriptライブラリGranim.jsの紹介記事です。 デモ画面が用意されているのでどんなのか見てみてください。 ※執筆時点（2016/09/15）のバージョンはv1.0.5です。 公開されて間もないため、かなりの頻度で更新されています。 バグフィックスや機能追加等の変更が入ると思います。 使い方 基本的にはデモ画面やAPIを見てください。 本記事ではそこを見ても分かりづらかった点を記載していきます。 ライブラリはzipをダウンロードした方が手軽です。（npmでも提供されています） https://github.com/sarcadass/granim.js/releases 上記から最新版を落としておきます。 最小構成は以下の様になります。 <canvas>タグを用意 granim.jsを読み込む new Granim({});でグラデーション
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
ウェブデザイナーが試したい、Webアニメーション無料プラグイン＆ライブラリ75個まとめ【保存版】
アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本
生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、デザイナーのサリーです。 相変わらずJSに対する苦手意識が拭えない私ですが、自分で動きまでつけられるになりたいですよね。私でも扱えそうなライブラリないかな〜と探していたら、「mo.js」というアニメーションライブラリのDEMOが素敵だったので、チュートリアルを見つつ使い方を勉強してみました。 今回は「mo.js」の紹介をしたいと思います。 mo.jsとは？ mo · js – Motion Graphics For The Web 去年リリースされた、滑らかなモーションを実現できるJSライブラリです。 モーションが感動するほど軽快なので、ぜひDEMOをご覧ください。 DEMO motion graphics for the web 公式DEMOその1、ロゴのアニメーションです。美しいです。 軽快にはずむボールが、ちゃんと楕円になっているところに注目・・・！ bubble lay
左右にループするスライドを実装してみた – Creator Note
毎日雨ですね。 私の地元よりも今住んでいるところは、たくさんの虹が見れるので雨でもハッピーになります^^。 でも暑い…暑さには弱いです。私は冬が好きなので（知らん）。 今回は左右にループするスライドを実装してみました。 永遠ループは今まで使う機会多かったのでおなじみだったんですが、 いつも右から左に流すタイプばかりで、いざ調べてみると案外みぎから左ってなくって…。 2つ同時に実装すると動かなかったり、Wordpressに対応してなかったり…結構動かなくて実は苦戦しました。笑 で、見つけたのが今回使用した『simplyScroll.js』。 実はこのJS、開発がもう終了してるんです。でも簡単に実装できるし、オプションも利くのでやってみるとさらっと実現できました。 はじめからこれにしとけばよかった…。 以下、ソースです。 See the Pen XgEmVM by sayuri (@giraf
フロントエンドに必要なとりあえずの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 よりモダン。使いたい機能だけをモジュール単位でインポートでき
anime.js | Design Drill Diary
anime.jsを選択した理由の1つは以下のサンプルが素敵だったことにあります。しかしソースを確認すると、いろいろな要素が複雑に構成されており、解読する気になれませんでした…。なので1から独自に作っていこうと思います。 →参考：Letter Effects with anime.js ●1文字づつ分ける 今回は文字を個別に操作したいので、まずは1文字ずつspanタグで囲むことにしました。以下のサンプルでボタンをタップすると文字をspanで区切ります。区切ったことが分かるように1文字づつ色を変更しました。 function spanningFunc (_target){ var elms = document.querySelectorAll(_target); elms.forEach(function (elm){ var myText = elm.textContent; elm.in
Three.jsのスプライト - ICS MEDIA
3Dでスプライトとは常に正面を向く3Dオブジェクトのことを言います。�別の言い方でビルボードとも呼びます。今まで紹介した形状の3Dオブジェクトは角度の変化をつけることでさまざまな「向き」が表現されていました。ここで紹介するスプライトはどの視点から見ても常に正面を向いています。 スプライトはポリゴン数を節約するのには効果的です。とくにパーティクル表現では煙などの小さなオブジェクトを大量に生成するため負荷が増大しがちですが、こういう表現にもスプライトは有効です。 サンプルを再生する サンプルのソースコードを確認する ▲サンプル。どの視点から見ても配置した3Dオブジェクトは常に正面を向いている Three.jsではTHREE.Spriteクラスのインスタンスを作成することで、ビルボードの表現ができます。THREE.SpriteはTHREE.Object3Dクラスのサブクラスであり、任意のマテリア
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
jQueryのプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
スクロールバーのデザインをカスタマイズする超多機能jQueryプラグイン「custom scrollbar」 | eturlt.net
ブラウザ標準のスクロールバーを、自分のデザインに変更するためのjQueryプラグイン「custom scrollbar」。 jQuery custom content scroller – malihu | web design jQuery custom scrollbar demo（デモページ） スクロールバーをカスタマイズするJSは色々あるけど、これが一番多機能そうなのでご紹介。 基本的に上記ドキュメントページを要約して翻訳しています。間違ってたらすみません。 導入方法 基本的にはJSを読み込んで指定をするだけです。 基本的な使い方 jQueryとmCustomScrollbarのjs, cssを読み込む ダウンロードはjQuery custom content scroller – malihu | web design のdownloadから <link href="jquery
jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする : 森のコーディング
11月18 jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする カテゴリ:jQueryjavascript Tweet フォームを作ってると必ず出てくるのが「必須」ってやつ。 必須項目を入力しなかったらエラーになるってやつね。 そこで便利なのが、jquery.validate.jsだ。 落としてくるにはこちら 使い方はいろいろ検索して探してもらうとして、問題はチェックボックス。 チェックボックスを複数並べて、「少なくとも1つはチェックをいれてね」っていうパターンのアンケート式のフォームを作りたいことはよくあると思う。 其の用途では、jquery.validate.jsでは直感的に、そのままでは使えないので、そのやり方を書くよ。 ①チェックボックスのnameは配列にするんだよ チェックボックスが複数並ぶ場合、nameの中身を
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
jquery.cookie.jsの使い方と簡単なサンプルを紹介します
今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。 まず、jQueryとjquery.cookieを読み込みます。ともにCDNになっているのでこちらでいいと思います。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> jquery.cookieを自分でダウンロードされる方はこちらから。
ページの一番下までスクロールしたら自動でコンテンツを読み込んでくれる「jQuery.bottom.js」 | mororeco
Facebookやtumblr、TwitterなどのSNSサービス等でよく見られる、ページの一番下までスクロールをすると、それ以前のコンテンツを自動的に表示してくれる「jQuery.Bottom.js」をご紹介します。コンテンツが多くなるとページ送りで別ページへ遷移する構造もありますが、自動読み込みにすることでメリットのある場合には、取り込んでみるのも良いかもしれません。 1.jQuery.Bottom.jsをダウンロード jQuery.Bottom.js 2.jQueryとjquery.bottom.jsを読み込む <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き｜Gimmick log
three.js - JavaScript 3D library
