The most basic usage: Add <script src="tilt.jquery.js"></script> right before the closing </body> tag Mark your elements with <span data-tilt></span> Creating a parallax effect Add transform-style: preserve-3d to your tilt element. Add a transform: translateZ(20px) to your inner elements that have to pop out. Glare effect: Setting this option will enable a glare effect. You can tweak the glare val

Home › プログラミング › 【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単 フォームのエラーチェックでいちいち読み込みが走るのはサーバ側もユーザーさんもストレスかかりますよね？ クライアント側でリアルタイムにエラーを表示させることでフォームのコンバージョン率も上がるみたいですし、ユーザーさんのイライラも軽減できる。 これは導入しておいて損はないですね。 フォームエラーチェックのjQueryプラグインをいくつか調べましたが、その中でもポップアップでエラーを表示してくれる「jQuery Validation Engine」が気に入りましたので、その使い方を紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？

Bubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。 ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。

ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d

Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item

かなり初歩的な使い方な気がしますが、初めてこの書き方をしたので備忘録代わりにまとめました。 スライドさせる要素の数によって、bxSliderの動きを変える必要がありました。 今回したのはinfiniteLoopのオンオフですが、他のオプションを付加することも出来ます。 挙動的には 共通設定となる（infiniteLoopを設定していない状態）bxSliderを定義 要素の数によって挙動の出し分け bxSliderをリロードする という順番になります。 実際のJSコードはこちらです。 // 共通の初期設定の配列 var defaultOpt = { speed: 900, minSlides: 3, maxSlides: 3, moveSlides: 1, slideWidth: 270, slideMargin: 15, pager: false, auto: true, pause: 4

textCut.js まずは、仕様やオプションを考える 何文字以上を超えたら「…」にする。とういのはよく見かけるかと思います。 一番お手軽にやるとしたらCSSの「text-overflow: ellipsis;」と「white-space: nowrap;」を使うったやり方です。はみ出した文字を「…」にすることができますが、 一行の場合にしか対応できません。 今回のプラグインでは、厳密に何文字というよりも、指定した高さを超えた時に末尾を「…」に変換するように作ってみたいと思います。 高さを条件とするので、複数行の場合でも対応することができます。 オプション cutHei 制御する高さ afterText 末尾に追加する文字 data-textCut-link 要素にdata属性でリンク先を指定 blank リンクを別タブで開く true:false textCut.js /**文字カットプ

スマホやタブレットで画像ギャラリーを作る場合、スワイプでスライドさせるものが一般的だと思います。 jQueryのプラグインでもスワイプを想定した画像ギャラリーは多数ありますが、今回は『TouchSlider』をご紹介します。 特徴としては、シンプルかつレスポンシブデザインでの使用にも対応出来るだけの十分なオプションを備えているというところでしょうか。 ↑スワイプしてみてください。 設置の仕方 まずは、TouchSlider — JavaScript slide contentからjquery.touchslider.min.jsをダウンロードして、サーバーにアップロードしてください。ここでは、[ /js ]にアップロードしたものとしています。 head内 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min

閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。

こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし