JQueryで背景画像を動かすアニメーション効果
JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。 この記事を元に少しアレンジしてサンプルを作成したので紹介します。 これから紹介するサンプルはwebOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」とアメブロで使用してあるスクロールで背景画像を別々に動かすパララックス効果のコードをプラスしてサンプルを作成してあります。 それではサンプルを紹介していきます。 雲の背景画像をループさせアニメーション 雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。 コードは下記のような感じになります htmlコード <div class="skinBody"> この中が記事などの
maximage2をIEで使用すると一部の画像が正常に読み込んでくれないバグ | 零のメモ張
一定期間更新がないため広告を表示しています
home
data-property: data-property is an attribute of the TAG where you can pass the options of the player as an Object. Any of the below parameters can also be passed as option within the initialize function. The one defined as attribute of the TAG wins. mute: true (boolean) mute the audio; showControls: true (boolean) show or hide the player controls; useOnMobile: true (boolean) Define if the player s
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
videoタグの簡単な使い方 - Qiita
var video = document.getElementById('video'); // もしくはjQueryを使いたい場合は var video = $('#video').get(0); // この変数に対して操作を行います。 video.play()
jQueryでリサイズしても画面の中央に要素を表示する | Typhooon
ウインドウの大きさが変更されるたびに発生する resize イベントを利用して。ウインドウサイズが変更されても要素が画面の中央に再配置される方法を紹介します。 書式は次のようになります。 [javascript] $(window).resize(function(){ // }); [/javascript] このイベントを使って、ウィンドウがリサイズされるたびにウインドウの幅と高さを取得するサンプルです。 [javascript] $(window).resize(function(){ var wh = $(window).height(); var ww = $(window).width(); $(“#result”).text( “width : ” + ww + ” / height : ” + wh ); }); [/javascript] ここまでできればもう簡単です。ウ
history.pushStateでページ遷移するjQueryプラグイン書いた - Webtech Walker
history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。 jquery.smarthistory.js history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません（普通に遷移する）。今だとchrome、safari、iOS、Firefox4で動くと思います。 こんな感じで使います。 $('a').smarthistory({ defaultData: $('html').html(), target: function() { return $(this).attr('href') }, before: function() { // ajax前の処理 }, change: function
一行の記述で全ての外部サイトへのリンクを別ウィンドウ（target=”_blank”）で開く方法 | D-31N.COMデザインスタジオ
外部サイトへのリンクは、新しいウィンドウ（target=”_blank”）で開くほうが離脱率等を考えると良いですね。 それ以外にコメントに入力された外部リンクからユーザーが戻ってこなくなる場合もあるでしょう。 target=”_blan”のタグは非推奨とかそうでもないとか議論が分かれますが、多少のマイナスだったとしても、外部リンクは別ウィンドウで開くメリットは色々あると思います。 ちなみにタイトルで一行の記述で～～とありますが、実際は一行でないのでご了承ください。 やりかたは下記の記述をhead内に入れるだけです。jqueryを使用しますので、jqueryを使用していないサイトは、別途jqueryを呼び出すタグを入れてください。 これで、記事中やコメント内の外部リンクが全て新しいウィンドウで開かれるようになります。 <script type="text/javascript"> $(
フェードイン・フェードアウトを用いた気持ち良いページ変遷を実現する方法
ギャリーサイトで見つけた名古屋のデザイン会社さまのWebサイト。 鞍知 on 鞍知［クラッチ オン クラッチ］ デザインもクリーンで良い感じなのですが、特に良いと思ったのがページ変遷のときのアニメーション。リンクをクリックするとページがフェードアウトし、ローディング画像が表示、そしてリンク先のページがフェードインしてきます。これがとても気持ち良い。 ということで、このブログにも軽く実装してみたので、その方法をご紹介。 jQueryのanimate関数を使って実装します（てことでjQuery本体も読み込んでくださいね）。下記のコードをhead内にコピペでいけるかと思います。 // まずbodyを非表示に jQuery('head').append( '<style type="text/css">body{display:none;}</style>'); jQuery( function(
jQuery PowerTip
PowerTip is a jQuery tooltip plugin with a smooth user experience that features a very flexible design which is easy to customize, gives you a variety of different ways to create tooltips, supports adding complex data to tooltips, and has a robust API for developers seeking greater integration with their web applications. Download v1.3.2 Zip file with examples, CSS, and script. For older versions,
Awkward Showcase – A jQuery Plugin | Awkward Group - Digital Production Agency
Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more. Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website. Download on BitBucketView Demo
IE6もOK！jQueryプラグインでぐりんぐりんする画像切り替えを作る
最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <img src="画像パス1"> </figure> <figure> <img src="画像パス2"> </figure> <figure> <img src="画像パス3"> </figure> </div> </div> あとはJavaScriptを</body>上に記述すれば完成です。 <script type="text/jav
カラムでソートできるテーブルを自作してみる - jQuery入門 - ポンクソフト
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう（たぬき暗号） アクションゲームを作ってみよう（ぬりかべ） 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで１ラインオセロゲーム ブラウザ全体をブロックしてみる Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする 発生したイベントの状態を保持・保存する6つのパターン Ajaxを利用したシンプルなイメージギャラリーを作ってみる テーブルにページ送り（ページング）を実装してみる jQuery UI Draggableを使って付箋(sticky)を作ってみる カラムでソートできるテーブルを自作してみる テーブルを使ったシンプルなドット絵エディ
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
jQueryでニュースティッカーをシンプルに実装する方法｜BLACKFLAG
Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル（ベーシック）な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 ニュースティッカーの切り替え動作については ——————————————————– ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ——————————————————– の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML <div class="ticker" rel="fade"> <ul> <li><a href="#1">【News1】このテキストはNe
jqueryでアラート画面をかっちょ良くする（第二弾） | 日記の間 | あかつきのお宿
javascriptのアラート画面をかっこよく見せるためのプラグインっていろいろありますよね。 今回はそのうちの一つである、jQuery uLightBox Pluginってやつを使って、良い感じにアラート画面を見せれるようにしたいと思います。 何で第二弾なのかっていうと、以前、まあデザインを一新する前ってことですけど、このあかつきのお宿では別のプラグインを使ってアラート画面を作っていたからですね。そのときのプラグインを紹介した記事はこれです。 乗り換えた理由は特にないです。一新するんだからアラート画面も変えてみようかっていう、まあその程度の話っす。 まずはダウンロード イワズモガナ。 上記のリンク先に行ってまずはファイルをダウンロードしてきましょう。さあ落とそう。やれ落とそう。一流の落語家が話を終わらせるときのようにスマートに落とそう。 落として来たら、その中のjquery.ulight
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
history.pushState DEMO
finefinefine.jp
マウスホバーでスムーズにjQuery.animte()をコントロールする : jQuery サンプル
Loading...
