Tilt.js - Parallax tilt effect for jQuery
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
jQuery WebGL Ripples
Background images are often boring. Use this effect to make your static CSS background images more interactive! It's as easy as: $('body').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); You can add drops programmatically by doing $('body').ripples("drop", x, y, radius, strength) And you can change its state: $('body').ripples("pause") $('body').ripples("play") Download or fork t
A more robust equal heights library
matchHeight makes the height of all selected elements exactly equal (2014) Modern browsers This library was developed before related functionality became available in the browser. Therefore it's now strongly recommended to use more modern CSS techniques in place of this library. For some alternatives see CSS Flexbox and CSS Grid. Features match the heights for groups of elements automatically use
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
jQuery Waypoints を使ってみる | Web Design Leaves
jQuery Waypoints を使ってみる CATEGORY: jQuery | TAG: スクロール, プラグイン 2013年11月24日 スクロールイベントを制御（ページ内の特定のスクロール位置で関数を実行するなど）できる「jQuery Waypoints v2.0.3 」を使った際のメモ（使い方）。 「Infinite Scroll（ページ下部まで移動すると、次のページを自動的に読み込んで表示）」、「Sticky Elements（特定の要素をある位置に固定して表示）」などのショートカットが用意されている。 ダウンロード 以下のリンク先の「Download」をクリックしてダウンロード。 http://imakewebthings.com/jquery-waypoints/ 解凍すると「waypoints.min.js」とショートカット（waypoints-infinite.min
ページが見つかりませんでした | Stronghold Archive
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
Dragdealer.js – drag provider, the good stuff
Jan 2014: Almost 4 years from the initial Dragdealer launch, a new version is released. For more details read the blog post or check out the freshly baked GitHub repo. Drag-based JavaScript component, embracing endless UI solutions 2d dragging and tapping, mouse and touch, ~12KB. No dependency. Any browser. source code download jump to demos <div id="demo-simple-slider" class="dragdealer"> <div cl
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips - Web 業界の技術屋 | VIVID Labs.
悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜！となってから、それなりに時間が過ぎましたね。 あなたの会社では IE6 のサポート状況は如何なものでしょう？当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ？ね？ね？と言う地道な活動を続けて、それなりに効果が出ています。 実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き… 出来てないじゃん！ と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。 普通に img 要素で描画する分には問題無い 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる 普通にサイトを作っていて、png ファイルの要素の opacity
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
【jQuery】スクロールバーをオシャレにカスタマイズする「jScrollPane」の使い方 ｜ KLUTCHE
どんなにサイトをクールなデザインに仕上げても、どうしても邪魔するスクロールバー。 jQeryをプラグイン使ってCSSで自由にカスタマイズします。 デモ デモページ 必要なファイル一式 jScrollPaneというjQueryプラグインを使用します。 最低限必要なのは ・jQuery本体 ・jquery.jscrollpane.min.js ・jquery.jscrollpane.css の3つです。 HTML まず上の3つのファイルをhead内で読み込みます。 <link rel="stylesheet" href="jquery.jscrollpane.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <s
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを１ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
jQueryでマウスホイールの上下イベントを取得 ＋ 余韻をつけたイージングスクロールを実装する実験｜BLACKFLAG
最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ 自分でもいろいろと試してみたので実験内容と併せて紹介してみます。 今回のjQueryを使ってのマウスホイールのイベント処理は 「Web制作 W3G」さんの記事を参考にさせていただいてます。 【参考記事】ホイール系イベント2014年版クロスブラウザ｜Web制作 W3G jQueryだけでなくネイティブJavaScriptでの取得方法や ホイール関連の処理について詳しく紹介されています。 記事によるとjQueryを使ってのマウスホイール処理方法は 以下のようなスクリプト記述で取得可能となります。 ◆SCRIPT <scri
[JS]主要ブラウザ全てにaudio要素でMP3を再生できるようにするスクリプト -audio.js | コリス
IE6/7/8, Firefox, Operaを含む主要ブラウザ全てに、HTML5のaudio要素を使ってMP3を再生できるようにするスクリプトを紹介します。 audio.js デモページ [ad#ad-2] audio要素のサポート状況 audioはHTML5の要素で、サポートしているブラウザは限られたものとなっています。 audio要素のブラウザのサポート状況 IE9 Firefox 3.5+ Chrome Safari Opera 9.6+ また、対応している音声ファイルのフォーマットも異なり、現在音声ファイルの主流のMP3はChromeのみが対応しています（Safariも一応再生可）。 「audio.js」は、audio要素に非対応のIE6/7/8、MP3に非対応のFirefox, Safari, Operaで、audio要素を使ってMP3ファイルを再生できるようにします。 [ad
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
パララックスでのイベントの考察。scroll / throttle / debounce / touchmove / mousewheel | codechord
Posted 12月 17th, 2012 by codechord. 0 Comments Tweet Tweet [追記：2015/05] 2012年12月の投稿なので情報がかなり古いです。iOS7ではスクロールイベントが取りやすくなってます。とはいえ、スマホのパララックスは要注意。 こんにちは。Advent Calendar 2012 軽めのjQuery の17日目を担当します。 http://www.adventar.org/calendars/29 パララックスエフェクトを実装するためのイベントについて少し触れてみたいと思います。 パララックスエフェクトで考えること パララックスエフェクトのような動きを考える時、いくつかの項目を考慮する必要があるとおもうんですが、例えば イベント発火のタイミング パララックスエフェクトの実装 スマホで動作する際の妥協点。 如何に心地よくぬるぬると
簡単にソート、フィルタリングが実装できるjQueryプラグイン「MixItUp」 - Noise of Web Programming
かなりオシャレでかっこいいjQueryプラグインを見つけたのでご紹介。非常に簡単な実装で要素のソート、フィルタリングが可能。サイトもオシャレですな～。 MixItUp MixItUpではHTML要素に持たせた属性をもとに、ソート、フィルタリングすることが出来る。それも非常に簡単な実装で！ MixItUpのDemoを見ながら、さくさくっと実装してみた。コードも以下から確認できる。 Check out this Pen! 上記からの抜き出しだが、JSはたったのこれだけ！簡単ー。もちろんオプションも用意されている。 $(function(){ $('#Grid').mixitup(); }); ギャラリーサイト向けってことを押してるが、カテゴライズした要素をフィルタリング、ソートするってかなり用途が広い。SNS系でも性別や出身とかでフィルタリングってよくやるよね。 という訳で機会があったら使って
ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery で5秒後とかに addClass したいとき · Issue #61 · shikakun/tips
jQuery Label Better by Pete R. | The Pete Design
