タグ

javascriptとwebデザインに関するTERRAZIのブックマーク (9)

  • https://twitter.com/catnose99/status/1602508250532171776

    https://twitter.com/catnose99/status/1602508250532171776
  • スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 - NxWorld

    見かけることが多いスクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトのまとめです。 中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行ったときに関数を実行するというような動きを実装できるものもあります。 紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはくるものの、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。 探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、ここでは自分も利用したことがあるものや目についたものを紹介します。 Headroom.js スクロールの方向(上

    スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 - NxWorld
  • あなたのブラウザでJavaScriptを有効にする方法とその理由

    もしあなたがWeb開発者なら、<span>どうやって<code>&lt;noscript&gt;</code>のコードをWebページに導入するかの<a href="#developer" id="devinfo">説明を参照してください</a>。</span> Google Chrome Webブラウザーのメニューから"Customize and control Google Chrome"をクリックし、"Settings"を選択して下さい。 "Settings"というセクションにある"Show advanced settings..."をクリックします。 "Privacy"内の"Content settings..."をクリックします。 ダイアログ・ウィンドウが開いたなら"JavaScript"というセクションを探し、"Allow all sites to run JavaScript

    TERRAZI
    TERRAZI 2015/01/20
    JavaScriptを殺しているユーザーに対し、有効にする方法を教えるページ。
  • [JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js

    ウェブページで日語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上:カーニング無し、下:カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上:カーニング無し、下:カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j

  • サイト速度とonload再考 | ゆっくりと…

    単にウケ狙いなら「革新的!GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」(笑)とかの煽りタイトルを付けるところですが、今回はもっと質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、HatenaTwitterPocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化

  • TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

    TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 1.サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 2.プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 3.プラグインのダウンロード githubのjQue

    TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
  • 毎秒100回の落ち穂拾い - 射撃しつつ前転 改

    前のエントリで起こったいろいろについて書いてみる。こぼれ話という訳じゃないから、落ち穂拾いというのもおかしいけど。 まずは良かったこととか技術的な補足とか。 情報化タブは次のバージョンで負荷を減らすように手を入れるとの力強いお言葉をpiroさんからいただきました。 フォーカスが外れたときにはこの毎秒100回のタイマーは外しといてもいいと思うんだけどそういう実装はできないか、とid:ofkに聞いてみた(彼はJavaScriptに超詳しい)ら、できるけど、タブで非表示状態になった場合にもフォーカスが外れる訳ではないので、あまり意味がないだろう、という答えが返ってきた。特にGoogleの場合は最初から検索フォームにフォーカスを当てていて、これを放置して別のタブに行くような人がわざわざフォーカスを外す事は考えにくいので、ほぼ意味がないだろうと。 後で考えたんだけど、フォーカス回りの挙動はなにかの規

    毎秒100回の落ち穂拾い - 射撃しつつ前転 改
  • New jQuery plugin: ‘imgPreview’ – James Padolsey

    The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time! The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links

    TERRAZI
    TERRAZI 2009/01/29
    簡単に画像のプレビューを設置できる超軽量スクリプト -imgPreview
  • JavaScript例文辞典

    ■基 [01]JavaScriptを定義する [02]外部JavaScriptファイルを読み込む [03]スタイルシートを定義する [04]NN3、NN4、NN6、IE4.x、IE5.xで動作するように記述する [05]NN4でのみ動作するように記述する [06]NN6でのみ動作するように記述する [07]IE4.x以上で動作するように記述する [08]IE5.x以上で動作するように記述する [09]IE5.5以上で動作するように記述する [10]ビヘイビアファイルを読み込む [11]IEとNN両方で動くように記述する [12]連続して関数を呼び出す [13]MacOS Xかどうか判別する [14]Safariのみ動作するように記述する [15]Safariのバージョンを返す [16]Operaのみ動作するように記述する ■構文 [01]変数に文字や数値を入れる [02]四則演算を行う

  • 1