Bootstrap 対応！マイクロインタラクションをクラス名だけで作ろう！ScrollReveal.js
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
Opentip | The free tooltip
opentip is a javascript tooltip framework yes - it’s free, open source and comes with different styles! demo styles There are great styles built right into opentip and it's easy to create your own. ajax Opentips can automatically download their contents via AJAX. It's extremely easy to configure them to do so.
プロダクト画像を360度回転させられるようにするjQueryプラグイン５つ:phpspot開発日誌
5 plugins em jQuery para imagens em 360 | Wallace Erick | Desenvolvedor Front-End プロダクト画像を360度回転させられるようにするjQueryプラグイン５つがまとまっています。 ショッピングサイトでたまにみかける、マウスドラッグで回転する製品画像。これをjQueryプラグインによって簡単に実現することが出来ますが、更に５つのjQueryプラグインから自分にあったものを選ぶ際の参考に出来ます。 回転だけでなくズームできるものもあったり、多機能であったり、IEにも対応していたりとそれぞれ特徴があります オンラインショッピングのマイナス面を解消しようと生まれたこういう機能。 実際にやるとなると画像を効率良くいかに撮るかという部分が課題であったりしますが、画像さえあれば実装は簡単にできそうですね。 関連エントリ タイ
PlatinumGames Inc. Official WebSite
2023.06.22 『The Wonderful One: After School Hero』が発売！ 3種のレーザーで敵を薙ぎ倒しながら進む爽快な横スクロールのシューティングアクション...
AnimateImage – attosoft.info
目次 概要 特徴 使い方 ダウンロード API 仕様 記述例 デモ FAQ アニメーション機能を持つほかのスクリプト 画像関連のアニメーション規格 サポートする？ 概要 AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript ライブラリ。 ※ アニメーション機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため自分で作成。 特徴 複数の画像をアニメーション GIF のように連続表示する。連番または任意のファイル名に対応。 Web ブラウザーがサポートするすべての画像形式に対応 PNG, JPEG, GIF, BMP, TIFF, WebP など 透過 PNG 画像によってアニメーション画像の背景を透過できる 256 色を超える高画質の写真やイラストをアニメーションできる アニメーション間隔を指定できる (
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ - かちびと.net
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
theshodo - Bing
FUNCTION LIMITED. Get the best experience with Internet Explorer 10. Beauty of the Web for Upgrading to Internet Explorer. JavaScript is …
NIKE FREE VOICE
NIKEアスリートたちのFREEなアクション、FREEなメッセージ。ぐにゃぐにゃ曲がるトレーニングシューズ「NIKE FREE」の魅力をアスリートたちが語る。店舗によってお取り扱いしているモデルが異なります。 詳しくはお近くのお取り扱い店舗、またはナイキお客様相談室までお問合せください。 NIKE原宿 〒150-0001 東京都渋谷区神宮前1-13-12 電話番号：03-6438-9203 ナイキストア吉祥寺 〒180-0004 東京都武蔵野市吉祥寺本町2-16-15 電話番号：0422-28-0833 ナイキストア成田エアポート 〒282-8601 千葉県成田市古込1-1成田国際空港 第2旅客ターミナルビル本館4階M4078 電話番号：0476-30-1450 ナイキストア軽井沢 〒389-0102 長野県北佐久郡軽井沢町大字軽井沢字中谷地 1178-798軽井沢プリンス
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
はてブの評判が丸分かり！ APIを使ってみよう (1/2)
Webサイトを運営していると、自分のサイトや記事の評判が気になることと思います。そんなとき、ネット上の評価を知るひとつの手段となるのが「はてなブックマーク」です。今回は、自分のWebページに、はてなブックマークのブックマーク数やコメントなどを表示する方法を紹介します。 JSONPでデータを取得できるAPI はてなブックマークは、外部からブックマークするなどの機能を実装するために、API（Application Programming Interface）を公開しています。それらAPIの1つに、「はてなブックマークエントリー情報取得API」があります。 これを使うと、個々のWebページに付けられたブックマークの情報を得られます。具体的には、以下のようなアドレスにアクセスすると、個々のWebページのブックマークの情報が、「JSON」（JavaScript Object Notation）形式の
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
bitly API (javascript) を使ってTwitterボタンを設置する方法まとめ - RinGoon POP!!
気になるニュースや時事の話題を毎朝配信！世界と日本の未来を分析します。デジモノや料理の情報、WQXGAサイズの壁紙も。 ページのタイトルとURLを使って「Twitterでつぶやく」ボタンを設置するのは、それほど難しくないが、Twitterには140文字制限があるため、長いURLだと非常に不便である。URL短縮サービスのひとつ bitly は、Twitter でも使われていて、javascriptで呼び出せるAPIも用意されている。このページでは、bitly API を使って、javascriptのみで「Twitterでつぶやく」ボタンを実現する方法を解説する。 2010/4/27追記 ： ポップアップブロックを作動させずに別ウィンドウで開く方法を追加 2010/4/30追記 ： ↑にコピペミスがあったので修正 orz 2010/7/10追記 ： API Key が他人から見えてしまっている
プレースホルダー (placeholder) の表示とCSSでの装飾方法 [ホームページ作成] All About
プレースホルダー (placeholder) の表示とCSSでの装飾方法プレースホルダーを表示する方法を解説。HTMLのplaceholder属性を使えば簡単に表示できます。textarea要素に表示するプレースホルダーは少し工夫すると改行も可能。CSSのplaceholder疑似クラスを併用すればプレースホルダーの文字を自由な色に変えられます。カーソルが入った瞬間にプレースホルダーの文字が消える仕様もCSSだけで作れます。placeholderの表示と装飾方法をご紹介。 プレースホルダー (placeholder) とは placeholder (プレースホルダー) とは、何も入力されていない状態のテキスト入力欄に最初から薄く表示されている案内文字のことです。HTMLではplaceholder属性を使うことで簡単に表示でき、CSSで色を変えることもできます。プレースホルダとして表示されて
![プレースホルダー (placeholder) の表示とCSSでの装飾方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/fc39f871ce14ffa0194b7537f119acadc2e6cc97/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F4%2F2%2F201611231423%2Ftopimg_original.png)
[JS]豊富なエフェクトで画像を変更するギャラリーのスクリプト -Nivo Slider
シンプルでvalidなマークアップで実装できる、超軽量（約5KB）の画像ギャラリーのスクリプトを紹介します。 Nivo Slider デモ このスクリプトの大きな特長ともいえる画像変更のエフェクトには下記の9種類が揃っています。 スライス（下） スライス（下左） スライス（上） スライス（上左） スライス（上下） スライス（上下左） ホールド フェード ランダム サポートしているブラウザはIE7+, Fx3+, Safari4+, Chrome4+で、主要なブラウザに対応しています。 実装にはｊQueryのプラグインのため、jquery.jsが必要です。 ライセンスはGPL（GPL -Wikipedia）で、商用でも無料で利用が可能です。
Twitter、サイトにTwitter機能を埋め込める「@anywhere」を発表
YouTubeでビデオを見ながらツイートしたり、New York Timesのコラムニストを記事のページでフォローしたりできるようになる。 米Twitterは3月15日、米Amazonや米Yahoo!などのサイト訪問者が、サイト内でTwitterを使えるようにするサービス「@anywhere」を発表した。サイト運営者はTwitter APIを使わずに、JavaScriptのコードを数行追加するだけでこの機能を使えるようになるという。 @anywhereの機能を持つサイトを訪問すると、そのサイトのTwitterアカウントの最新ツイートをその場で読めるほか、そのアカウントをフォローしたり、ツイートを投稿したりできる。これにより、サイト訪問者の滞在時間は長くなり、一方Twitterは新たなユーザーを獲得する機会を得られる。 同サービスの立ち上げ時のパートナーサイトは、Amazon、Bing、Di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.dropzone.dev/js/
Ext Japan - Sencha Touch登場 - モバイル用HTML5フレームワーク
Michael Leigeber