一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
（追記／2011.12.02）ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。 jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。 サンプルはこちら <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link
近年は生成AIが人間と遜色ない受け答えをすることが可能となっており、学校が生徒のカウンセリングにAIを活用する事例も報告されています。新たな研究では、「AIの回答は人間のメンタルヘルスの専門家による回答よりも思いやりがある」と見なされていることがわかりました。 Third-party evaluators perceive AI as more compassionate than expert humans | Communications Psychology https://www.nature.com/articles/s44271-024-00182-6 People find AI more compassionate than mental health experts, study finds. What could this mean for future counsel
jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
最近発見した、JavaScriptコーディングに関するテクニックやパフォーマンス等の参考になりそうなエントリをリファレンスをまとめてみました。 Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7 | Impressive Webs IE7のgetElementByIdで起こる問題を避けるためのTIPS集。 How to add a CSS Link programmatically using JavaScript <link>タグをJavaScriptによって動的に作成してCSSを動的に設定するコード例 JavaScript CSS Selector Benchmarks CSSセレクタでDOMにアクセスする際の各フレームワークでの速度ベンチマーク比較 6 Ways To Wor
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
SelectorGadget is an open source tool that makes CSS selector generation and discovery on complicated sites a breeze. Just install the Chrome Extension or drag the bookmarklet to your bookmark bar, then go to any page and launch it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then g
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
