We’re getting things ready Loading your experience… This won’t take long.
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
フォントサイズを変える「大・中・小」ボタンを画像も使って実装する方法
フォントサイズを変える「大・中・小」ボタンを実装する方法 今回も以前にエントリーした内容の変更版。知人に「フォントサイズを変えるボタンを画像にして、アクティブなボタンを保持したい」という要望があったので、もらったソースを元に作ってみた フォントサイズを変える「大・中・小」ボタン実装 CSSや文字だけで実装する場合は、以前の『フォントサイズを変える「大・中・小」ボタンを実装する方』を参照ください。 今回はこの機能に、画像の_onと_offを入れ替えるロールオーバーのスクリプトと、そのアクティブ状態を保持しているものを作成してみます。 ※ロールオーバー部分は知人にもらったコードを改変して利用。出典不明。主な仕様も、前と同じまま。 今回作成したデモ fontsize change - jsdo.it - share JavaScript, HTML5 and CSS 画像の場合の仕様ポイント 今
【Labs】CSSだけでドロップダウンメニュー
こんにちは（・∀・） CSSだけで作ってみましたシリーズです。今回はドロップダウンメニューをご紹介します。通常のドロップダウンメニューとtransitionプロパティで動きのあるドロップダウンメニューの横バージョンと縦バージョンの4タイプです。 transitionプロパティはdisplayでの制御をサポートしていないため、子孫メニューの制御はoverflowで行っております。displayでの制御も可能ですが、その場合動きはなくなり、表示している矢印も表示されなくなります。 1. 横並びドロップダウンメニュー 横並びで表示するドロップダウンメニューのサンプルです。 ① 通常のドロップダウンメニュー HTML <ul class="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Strategy</a> <ul> <li><a hr
[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js
写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。 実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。 Sticker.js Sticker.js -GitHub Sticker.jsのデモ Sticker.jsの使い方 Sticker.jsのデモ デモはChrome, Safari, Firefox, Opera, IE10+でご覧ください。 上記のアニメーションは左からのぺらっですが、上下左右の全ての方向からぺらっができます。右のベタ塗りはめくるとシャドウが半透明で適用されます。 Sticker.jsのフッタ 最初のデモは写真画像なのでカーソルはアローですが、フッタのはリンクなのでポインターになっています。 Sticker.jsの使い方 Step 1: 外部ファイル 当ス
The Famous Slide Out Sidebar Navigation Javascript Solutions
We have seen different kinds of navigation solutions for responsive layouts. The most common solution would be transforming main navigation menu into drop down menu. However, with the popularity of Apps on mobile platform, they are bringing one of the emerging nav UI pattern into web, they called it Sidebar Navigation. Sidebar navigation can be seen on facebook, Path and Gmail iOS and Android apps
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
WordPressのログイン画面をスーパーカスタマイズ！ | Firegoby
BookPressで、WordPressのログイン画面をカスタマイズする必要があったので、CSSとJavaScriptをつかって頑張ってみました。 あいにく wp-login.php は若干コツが必要です。 wp_enqueue_style() が期待通りに動かない… wp-login.php で、CSSやJavaScript を使用するには、login_enqueue_scripts というフックを使用します。 ただし、このフックで wp_enqueue_style() を使用しても、<link /> タグがフッターに出てしまいます。 これは以下のチケットでも報告されてるんですが、なぜか修正されてないようですね。 #17916 (Enqueued styles are only printed on login_footer in wp-login.php) – WordPress Tr
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
Basic jQuery Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qu
今さら聞けない! ビギナーのためのJavaScript講座(1) タブ切り替えで、JavaScriptの基本を学ぶ(1) クリックイベントを書いてみよう
デザイナーと名が付く職種にはさまざまなものがありますが、この数年で劇的に市場のニーズが高まったのが「Webデザイナー」でしょう。 ネットワークの通信速度が一昔前に比べて格段に速くなり、スマートフォンが驚く速さで普及したことで、ユーザーがWebに接する時間は大幅に伸びました。その結果、魅力的なWebページを"創る"人材への需要がとみに高まっています。 魅力的なWebページを作るうえで最も必要とされるのは、ユーザにとって使いやすく、情報が得やすいデザインを考えられるスキルです。現在のWebデザイナーの中には、DTPなどの世界で経験を積んだ後に、HTML/CSSという慣れないコーディング技術をどうにか学んで転身した方が多く、紙媒体で伝える手法と、ブラウザで伝える手法の違いを思い知らされた方は少なくないのではないはずです。 そのような方々に対して、次なる障壁として立ちはだかるのがJavaScrip
【連載】今さら聞けない! ビギナーのためのJavaScript講座
デザイナーと名が付く職種にはさまざまなものがありますが、この数年で劇的に市場のニーズが高まったのが「Webデザイナー」でしょう。そのWebデザイナーに対して大きな障壁として立ちはだかるのがJavaScript。HTML/CSSのようなマークアップ言語とは異なり、プログラミング言語であるJavaScriptに関しては、どうしても敬遠してしまう方も多いはずです。
JavaScriptのスライダーにブラー効果をつけてみる実験 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 先日リニューアルのご報告をした Matsukaze.で使用している ブラー効果をつけたスライダーで、実験的に採用した手法を記録しておきます。 基本的な仕組み ぼかし画像の透明度について 簡単なデモ まとめ 基本的な仕組み まずスライダーに使用する絵を連結して一枚の画像にしたものを作成。 そして、その画像を横にブレさせた画像を別途用意します。 ぼかし画像は、例えばFireworksなら「移動（ぼかし）」を水平方向にかけ、 さらにその上に反対方向の「移動（ぼかし）」をかけたものを透明度50%ぐらいで重ねています。 ぼかしの強さはコンテンツの内容・大きさとご相談で、いい按排を探ります。 HTML上ではその2つの画像を、ぼかし画像を上にして重ね合わせて配置し、 スライダーが動く時にぼかし画像の透明度を変更してスピード感を出します。 基本
jQueryで下からニョキッと動かす方法
軽めのjQuery Advent Calendar 2012の６日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。 先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか？と質問をされました。 jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
//set Full Screenwithout StatusBar var ua = navigator.userAgent.toLowerCase(); $.browser.android = /android/.test(ua); $.browser.iphone = /iphone/.test(ua); var portraitHeight,landscapeHeight; window.onload = function(){ ! $("html,body").height("1000px"); ! if($.browser.iphone){ ! ! $("body").css("position","relative"); ! } ! setTimeout(function(){ ! ! scrollTo(1,0); ! ! setTimeout(function(){ ! !
スマホアプリ開発の最前線で使われている、UIデザインメソッド20(3) デベロッパーに聞く、今日から使えるJavaScript 高速化術(前編)
アプリ制作の技術者から学ぶ当連載や、中村洋基氏をはじめとするクリエイターが登壇する11月17日（土）開催のセミナー、中国・上海のWeb制作会社訪問ツアーなどの豪華賞品が当たるアプリアワードを行う「TapApp(タップ＊アップ)プロジェクト」と連動した連載第3回は、実際にソーシャルゲームのコーディングを行っているサイバーエージェント(以下、CA)のデベロッパーに、すぐに使えるJavaScript高速化のテクニックについて聞いた。 高速化がもとめられるスマホ用Webアプリ開発の現場 スマートフォン用ゲームというと、ネイティブアプリケーションの形で提供されるものをまず思い浮かべるかもしれないが、最近ではソーシャルゲームを中心に、ブラウザ上で動作するWebアプリケーションとして提供されるタイトルが続々と登場している。ユーザーがアプリをダウンロードする手間がなく、iPhone、Androidなど複数
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
jQuery / CSS3 TIPS｜BLACKFLAG
BLACKFLAGで紹介しているjQueryとCSS3を使って実装するスライドショーやカルーセル等、Webサイト上でのUI系スクリプトのTIPSをまとめたページになります。 ※一覧は随時更新します。 Comments (6) html/css/jquery などのtipsが多彩のサイト | webサイト作成に関する自分メモ | 2013.02.25 19:11 […] jQuery/CSS3 TIPS jQuery/CSS3 TIPS […] きのぴ | 2015.12.04 14:01 はじめまして、 パララックスデザインのソースについて探しておりました。 勉強も兼ねてですが、簡単なLPサイトで使用させていただこうと考えております。 こういったサイトがあるとすごく助かり、また勉強にもなります。 ブックマークさせていただき、ちょくちょく拝見させていただければと思います。 ありがとうございま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal - かちびと.net
SSSSLIDE
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ