フェードイン・フェードアウトを用いた気持ち良いページ変遷を実現する方法
ギャリーサイトで見つけた名古屋のデザイン会社さまのWebサイト。 鞍知 on 鞍知［クラッチ オン クラッチ］ デザインもクリーンで良い感じなのですが、特に良いと思ったのがページ変遷のときのアニメーション。リンクをクリックするとページがフェードアウトし、ローディング画像が表示、そしてリンク先のページがフェードインしてきます。これがとても気持ち良い。 ということで、このブログにも軽く実装してみたので、その方法をご紹介。 jQueryのanimate関数を使って実装します（てことでjQuery本体も読み込んでくださいね）。下記のコードをhead内にコピペでいけるかと思います。 // まずbodyを非表示に jQuery('head').append( '<style type="text/css">body{display:none;}</style>'); jQuery( function(
スクロールするとコンテンツがフェードインするjQueryプラグイン作った。
スクロールして対象要素が画面に出てきたときにいい感じでフェードインして表示させるjQueryプラグイン「jquery.scrollFade.js」を作りました。文章だとわかりにくいかと思いますので、下記のデモを参照ください。 サンプルコード jQuery本体、jquery.easing、jquery.scrollFade.jsの3つを読み込みます。そして、フェードさせたい要素に対してscrollFadeメソッドを実行させます。下記の例では「.scrollFade」というクラスを持つ要素を対象にしています。scrollFadeメソッドは、フェードアウト前の透明度（out）、フェードにかける時間：ミリ秒（duration）を引数として設定できます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
NicEdit - WYSIWYG Content Editor, Inline Rich Text Application
What is NicEdit? NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing. Take boring textareas like this one in your application A Full featured rich text editor in your application i
別ドメインの外部URLからidやclassなど特定の箇所を抜き出しサイトに表示する方法
同じドメイン内であればjqueryのloadやajaxでいけますが、他サイト（別ドメイン）になるとできません。 そこでjqueryのjquery.xdomainajax.jsを使って外部URLのhtmlを取得する方法のTIPSです。 ファイル全部を読むこともできるし、idやclass名で一部分や特定の箇所だけ切り取って表示することも可能。 ※一部のhttpsサイトでは取得できませんでした。（原因不明） jquery.xdomainajax.jsをダウンロード 以下よりjquery.xdomainajax.jsをダウンロードします。 jquery.fn/cross-domain-ajax at master ? padolsey/jquery.fn ? GitHub ダウンロードするのはjquery.xdomainajax.jsだけでOKです。 このファイルがないと別ドメインでのファイルを取
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
dev7studios
⚠️ Nivo Slider Nivo Slider – is not scheduled to receive new features going forward. Only security updates and critical fixes will be provided for the plugin. If you’re looking for the JavaScript library, you can find it here: https://github.com/Codeinwp/Nivo-Slider-jQuery Here’s what this means for you: You can do either of two things if you really like Nivo Slider: Download the last version This
jQueryでブラウザのスクロール値を取得してみる｜BLACKFLAG
先日ふとしたところで、ブラウザのスクロール値によって表示の切り替えを行う必要があり、 jQueryでスクロール量を測るサンプルを作ったので紹介してみます。 jQueryでブラウザのスクロールされた際の値を取るには 『.scrollTop（縦スクロール）』もしくは『.scrollLeft（横スクロール）』などがありますが、 あまり横スクロールで何か制御をするってことは少なく、縦スクロール値を取得する『.scrollTop』を使用することがほとんど。 なので、今回はページTOPからスクロールされた値『.scrollTop』を取得する際のサンプル。 実際の取得する際の記述方法は $(window).scrollTop(); $(document).scrollTop(); といった書き方でページのTOPからの距離を測れます。 『$(‘html’).scrollTop();』でもいけるっぽいですが
jQueryのスクロールイベントについて - NOTE :
2013-02-14 jQueryのスクロールイベントについて jQuery .scroll()について 要素にscrollイベントを発生させる。 基本的な型 $(function(){ $(window).scroll(function(){ //処理 }); }); 指定した位置までスクロールし、「ページトップへ」のリンクを表示 //jQuery $(function(){ //表示させたい要素を変数に代入する var topBtn = $('#page-top'); //最初は非表示 topBtn.hide(); //どこの位置から表示させるか（フェードイン、フェードアウト表示） $(window).scroll(function(){ if ($(this).scrollTop() > 150 ){ topBtn.fadeIn(); }else{ topBtn.fadeOut();
画像の読み込みを遅延ロードさせるjQueryプラグイン「Lazy Load」 | WEB SHOWZINE V3
htmlページ内の画像（img要素）を遅延ロードし、HTTPリクエストを減らして読み込み速度のパフォーマンスを向上させるのにjQueryプラグインのLazy Loadを使ってみました。 以前から有名でよく見かけるプラグインでしたが、実際はその効果（HTTPリクエストを減らす）がないっていう話（実際に解析されてる記事がありましたね）で「ふーん、そうなのか」とすっかり忘れていたプラグインです。 久しぶりにこれ系（遅延ロード）のものを探したら、なんでもその問題が解消されてるらしく、使ってみました。 理屈はこういうことだそうです。 画像を遅延ロードする定番jQueryプラグイン「Lazy Load」 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込み
jQueryで$(document).readyを複数実行した場合のthisやvarについて - maeharinの日記
はじめに jQueryを使う時は、$(document).ready(handler)やその省略法である$(handler)でdom構築ができてからコードを実行することが多い。（handlerは無名関数などの関数オブジェクト） で、たまに複数のファイルで何度も$(handler)を呼び出すことがあるのだけれど、その際$()の引数に渡しているhandler内のthisやvar宣言について混乱しがちだったので整理しておく。ちなみに検証環境はChrome ver24、jQuery1.9.1。概念はES3を基準にする。 前提 書き方色々 以下の3つは同義（真ん中は推奨されない） $(document).ready(handler) $().ready(handler) //this is not recommended $(handler) http://api.jquery.com/ready/
jqueryでリッチテキストエディタ(WYSIWYG)を作成する | grush-blog
書式をセットできるテキストボックスは昔から色々あるけど、軽さやコーディングの容易さなどから、 WYSIWYGで尚且つ「これだ」ってのが、なかなか見つからなかったんだけど、jqueryのプラグインで最近こんなの見つけた。 CLEditor みなみにWYSIWYGってのは、wikipediaみたく 「**で囲まれてたら太文字ね」「+から始まってる行だったらリストね」 ってゆうテキストボックスではなく、WordPressのテキストボックスのようにｈｔｍｌ上で、まるでデスクトップアプリのリッチテキストボックスかのように動作するテキストボックスの事を指すらしい。 （言葉的には広義だけど、htmlのテキストでいうとそういう感じ） で、このプラグインを利用したサンプルはこちら。 嫌われ者のクセにかなか完全引退してくれないIE6でも完璧に動くし、何より他のものに比べて非常に軽いので、使ってみる事にした。
Ben Alman » jQuery hashchange event
This jQuery plugin enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event. While this functionality was initially tied to the jQuery BBQ plugin, the event.special window.onhashchange functionality has now been broken out into a separate plugin for users who want just the basic event & back button support, without all the extra awesomeness that BBQ provide
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
jqueryのhoverイベントをunbindする « kawama.jp
jqueryを使っていて、hoverイベントをunbindすることがありました。 が、hoverは他のイベントと違って $('#hoge').unbind('hover'); のようにはできません。 さてどうしたものか、、、と思ってググると以下のページを見つけました。 http://d.hatena.ne.jp/tilfin/20080615/1213608859 先に答えだけ書いてしまうと、 $("#hoge").unbind("mouseenter").unbind("mouseleave"); このようにすることで目的は達成できます。 それよりもこの記事自体、マウスイベントについてかなり深く掘り下げているので勉強になりました。 こちらの公式のデモも参考になります。 http://api.jquery.com/mouseover#example-0 ツール amazon商品情報ビューワ
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Loading...
atsukitaira.com
