タグ

jQueryとdataに関するyifeのブックマーク (3)

  • 文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね!僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね?如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話! とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状… とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで

    文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…

    前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da

  • jQueryとAjaxで作るスムーズページング (1/3)

    Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」(Paging)と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON(JavaScript Object Notation)、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン

    jQueryとAjaxで作るスムーズページング (1/3)
  • 1