タグ

jqueryとdesignに関するkuwaのブックマーク (10)

  • Youtubeの動画を背景に

    Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

    Youtubeの動画を背景に
  • jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験|BLACKFLAG

    半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON/OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

    jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験|BLACKFLAG
    kuwa
    kuwa 2014/08/08
    レスポンシブ、サムネイル対応のコンテンツスライダー
  • [JS]超軽量で設置も簡単!Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount

    デモページ:カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコンを使用する場合は、もう一つ外部ファイル(socialcount-icons.css)を加えます。 続いて、スクリプトをページの下の</body>の上に。 ... <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../src/socialcount.js"></script> </bod

  • iView Slider

    画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ

    kuwa
    kuwa 2012/07/25
    コンテンツスラーダー系いろいろあるけど、これは良さげ。サムネイルも、細かい機能も揃ってる。
  • fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepy

    縦長になるような入力フォームにいいかな と思ってメモ。fieldsetでグループ化された 要素単位でスライド化してくれます。下部 までスクロールする必要が無くなるのと、 どこが誤入力か分かりやすい、場所を取ら ないなどのメリットがあります。 特に、入力項目が長いフォームは離脱率を高くする可能性も否めませんので、入力プロセスを補助するのはユーザビリティに大きく貢献出来るかと思います。IE6でも7でも動作するようです。 日語に直してみました。これは1例で、3つに分けなければならないわけではありません。 入力をミスすると、次のfieldset要素に進めない(スライドできない)という仕組み。 fieldsetごとにバリデーションチェックを行うのでユーザーもストレスが無いような有るような。 うん、ストレス無いです。(キリッ ファイルとか<script type="text/javascript"

    fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepy
  • www.jolfizetok.hu

    Olyan elit cégcsoportot hoztunk létre 2007-ben, akik önként vállalták, hogy egymásnak határidőre kifizetik számláikat. Így léptünk fel az akkor nagy méreteket öltő körbetartozások (lánctartozások) ellen. Kezdeményezésünkhöz rövid időn belül magánszemélyek és pártoló tagok is csatlakoztak. Több szolgáltatásunk közül mobiItelefon fIotta szolgáltatásunk a legnépszerűbb, mert alacsony árú előfizetői c

    www.jolfizetok.hu
    kuwa
    kuwa 2010/08/09
    多重スクロール!ポップなデザインで上手いこと使ったら面白そう。
  • jQuery color plugin xcolor

    The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. OverviewThis plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors. Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background.

  • [JS]クロスブラウザ対応、モーダルボックスの軽量スクリプト -SimpleModal

    モーダルボックスのスクリプトはこれが決定版かもと思わせる「SimpleModal」をEric Martinから紹介します。 SimpleModal demo SimpleModalはモーダルボックスのフレームワークとして機能することを目指したもので、フレキシブルにモーダルボックスを作成することができます。 対応しているブラウザは、IE6/7/8, Fx2/3, Op9/10, Safari3/4, Chrome1/2とのことです。 デモではさまざまなモーダルボックスを試すことができます。

  • Pretty checkboxes with jQuery | Aaron Weyenberg

    I'm Aaron and I make stuff that goes on the internets. We can be Twitter buds, and my feed is here. Stuff I've posted about lately Twitter film branding Facebook IE beer summit visualization cinematography Popular Tags IE howto jQuery Facebook cinematography beer summit visualization Helvetica marketing freebie Tropicana Wordpress packaging design branding film Twitter Learn how you can send me to

    kuwa
    kuwa 2009/08/27
    チェックボックスの表現方法
  • [JS]超軽量で、シンプルなツールチップを実装するスクリプト -vTip

    リンクをはじめ、画像やdiv要素にもツールチップを実装する超軽量(1.1KB)のスクリプトをVertigo Projectから紹介します。 vTip demo vTipの設置は簡単で、JSとCSSを外部ファイルで指定し、ツールチップを表示する要素に「class="vtip"」を記述します。 ツールチップに表示するテキストは、title属性に記述します。 ツールチップの表示位置は、スクリプト内の「this.xOffset」と「this.yOffset」で変更することもできます。 vTipはjQueryのプラグインのため、実装にはjquery.jsが必要です。

  • 1