パララックス用ライブラリ 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
PHP でファイルをインクルードするときは絶対パスを使おう | バシャログ。
『ロマンシング サ・ガ』三部作のリマスター版サウンドトラック発売を受けてゲーム熱が再燃している kagata です。 さて今回は PHP のこまかい話です。インクルードするファイルを相対パスで指定していると、思わぬ挙動をみせたり、異なる環境での使いまわしに難が出ることがあります。どんな環境でも意図したとおりのファイルをインクルードできる記述を考えてみましょう。 相対パスでインクルードした場合の挙動（Webの場合） まず、相対パスでインクルードすると何が問題になるのか見てみましょう。 例えば、次のようなファイル構成の Web アプリケーションがあったとします。 /index.php /module.php /include/ /include/inc.php /include/module.php で、それぞれのファイルの中身を次のようにします。このとき、index.php にアクセスすると
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({});でグラデーション
【jQuery】水面に滴る雨を再現した［Raindrops.js］でウェブページに癒しと冷涼感を。
夏ですね！ 例年以上の猛暑が続いている今日この頃。皆様いかがお過ごしでしょうか。 さて。今日は、こんな暑い夏に相応しい「冷涼感」を演出してくれるjQueryプラグインを紹介します。 ［Raindrops.js］と名付けられたこのプラグインは、ボックス要素を水面に見立て、降り注ぐ雨の様子を演出します。 まずは実際に使ってみたサンプルをご覧ください。 ［jQuery Raindrops.js］実装サンプル 導入方法は比較的簡単です。 ［Raindrops.js］の使い方まずは配布サイトより、プラグインのファイル「raindrops.js」を入手してきましょう。 ［Raindrops.js］配布サイト：http://daniellaharel.com/raindrops/ 基本的なことですが［Raindrops.js］はjQueryプラグインなので単体では動きません。 別途「jquery.js」
ちょっとした仕掛けや面白い表現を実装できる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
スクロールバーのデザインをカスタマイズする超多機能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.layerBoard.js | FEVDES BLOG
「セール情報」や「重要なお知らせ」を、 モーダル（フロート）で目立たせたいという要望があったので、 ページのアクセス時にモーダル（フロート）を表示するjQueryプラグインを制作しました。 「jquery.layerBoard.js」は商用利用・改変・再配布可能です。 デモ トップページのアクセス時にモーダルを表示させるプラグイン。 ダウンロード：layerboard.zip【111KB】 デモをみる 次にアクセスしても指定した時間までひらきません。 デフォルトでは1分で、再びひらくようになっています。 再びひらくまでの時間は分単位で指定できます。 必要なファイル 必要なのは jQuery jquery.cookie.js jquery.layerBoard.js jQueryとjquery.cookie.jsはサイトからダウンロードしてください。 jquery.layerBoard.js
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
商用利用可能、ダウンロードしておきたい筆記体フリーフォント素材45個まとめ 2013年版
筆記体フォントは、当サイトでも人気の高い素材のひとつです。特に新しく公開されている新作素材を中心に集めてみました。 海外デザインブログTextuts.comで、デザイン性に優れた筆記体フリーフォント素材45個をまとめたエントリー「45 Best Free Script Fonts 2013」が公開されていたので、今回はご紹介します。アルファベット順で羅列していますので、お気に入りの筆記体デザインを探してみてはいかがでしょう。 今回のフリーフォント最大の魅力は、個人利用に限らず、商用利用にも対応しているという点です。デザイン制作に活用したくなる、高品質フォント素材を中心に、これまでにまとめた筆記体エントリーと、あまりかぶらないようにチョイスしています。 詳細は以下から。 デザイン力をアップする、人気筆記体フリーフォント素材まとめ 2013年版 Alako-Bold ※ 個人、商用利用可能 A
日付処理が楽になる！Moment.jsの使い方 - Qiita
Moment.jsとは JavaScriptで日付の処理は面倒ですが、いろいろと便利にしてくれるのが、Moment.jsです。 備考 Moment.jsは、ver 2.8.3で確認 2014年10月24日に実施したので、それを元に以下計算されてます 基本的な使い方 JSを読み込む <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> // momentオブジェクトをセット var m = moment(); //現在の時刻が入る var output = m.format('YYYY年MM月DD日 HH:mm:ss dddd'); console.log(output); // => 2014年10月24日 11:44:00 Friday var m = mom
audio.js
audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css. Installation Put audio.js, player-graphics.gif & audiojs.swf in the same folder. Include the audio.js f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高機能jQueryスライダー「Slider Pro」の使い方 | BRIGHTONLINE｜ブライトオンライン