http://ri-mode.com/rainbow/2013/12/24/swap_contents_tab_jquery2/
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
サイトの動きに魅力を与える フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」
サイトの動きに魅力を与える フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」 webサイトをより魅力的に見せるためには、デザイン性はもちろんですが、意外性のある動きなどを取り入れることで実現することも。今回はそんなサイトの動きに魅力を与える、フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」を紹介したいと思います。 Direction-Aware Hover with CSS3 and jQuery さまざまな種類のエフェクトが豊富に紹介されており、サイト自体にどこか物足りなさを感じていた方におすすめのまとめとなっています。 詳
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
JSで要素の表示の切り替えをした時にリロードしても状態を維持する - WebDelog
下記のように、Javascriptを使って要素の表示を切り替えて、 非遷移のページを作成する場合があると思います。 Demo 2011-08-07 1st - jsdo.it - share JavaScript, HTML5 and CSS これはCSSのプロパティDiplayをリンクをクリックした際に切り替えているだけですが、 ユーザにとっては画面の遷移が無いのでとても快適ですよね。 ただ、あくまでCSSを切り替えてDivを表示させているだけなので、 うっかり更新ボタンを押してしまったりすると、 初期の画面の状態に戻ってしまいます。 (上記の場合だと最初のリンクだけが表示されている状態) これによって普段と違う動作に利用者が混乱してしまうことがあるかもしれません。 今回はこれを解決します。 解決法 クリックしたときにURLにハッシュが付加されるようにaのhrefを以下のように編集します
7 Useful Parallax jQuery Plugins - Best SEO Companies
Going into 2014 I am sure the parallax scrolling effect is going to become even more of a widely used effect. When used correctly, the parallax effect is a great way to add an extra visual dimension, combined with the users scrolling it is a great way to guide the user through your site. Here are 7 useful parallax jQuery plugins that will allow you to easily implement the effect on your website.
[DEMO]jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種 | webOpixel
jQuery Mouse Over Animation Sample vertical + text vertion Sample 01 HOME ABOUT GALLERY LINK Sample 02 HOME ABOUT GALLERY LINK Sample 03 HOME ABOUT GALLERY LINK Sample 04 HOME ABOUT GALLERY LINK Sample 05 HOME ABOUT GALLERY LINK Sample 06 HOME ABOUT GALLERY LINK Sample 07 HOME ABOUT GALLERY LINK Sample 08 HOME ABOUT GALLERY LINK Sample 09 HOME ABOUT GALLERY LINK Sample 10 HOME ABOUT GALLERY LINK
スクロールバーのカスタマイズ - シンプルシンプルデザイン JavaScript
サンプル スクロールバーは、基本ブラウザが用意してるのを使えばいい、という考えでした。 そのため、スクロールバーのデザインをカスタマイズしたいと思ったとき、「いや、待てよ。スクロールバーを使うようなインラインフレームによる見せ方があるのでは？」と別案を模索して実装。 画面全体のスクロールバーであれば、別にブラウザが用意してるのでもOKな考えでした。 だが、しかしッ！ なんかこう、こじんまりとしたサイトを作ろうと思ったとき コンテンツによって情報量が異なるんだろなと想定したとき ワンソースでマルチデバイス対応して、うまく見せたいとき そんなことから、スクロールバーをカスタマイズしてデザインする選択肢を持っておいたほうがいいな、と今更ながらに思い立ちました。 ググる。 あった！あった！jQueryを使ったスクロールバーのカスタマイズ、サンプル jquery custom content scr
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開 | URIN HACK
使用方法１―全ての要素の高さを揃える 指定した複数の要素の高さを、その中の最大の高さに揃えます。 各要素の幅が同じであれば、各要素のサイズ（高さ・幅）は全て同じになり、タイル状に要素が並びます。 各要素に対してheightを指定する必要はありません。 javascriptサンプル tile-sample1というclass属性を持つ要素の高さを、その中の最大の高さで揃えるには、以下のように記述します。 1 $(function(){ 2 $(".tile-sample1").tile(); 3 }); 実行結果 使用方法２―同じ行にある要素の高さを揃える タイルの列数を指定して、同じ行に並ぶ要素の中で最大の高さに揃えます。 javascriptサンプル tile-sample2というclass属性を持つ要素が横に４つ並んでいるとき、横に並んだ要素の高さを各行毎に揃えるには、その列数（＝４）を
神戸・阪神間｜家 新築 マンション 戸建｜TC神鋼不動産株式会社
企業理念 私たちは総合生活関連企業として、 信頼性と安定性のある商品・サービスを提供し、 お客さまに夢と希望と笑顔をお届けする 「スマイルライフカンパニー」を目指します。
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
meca.js
meca.jsとは meca.jsはマークアップエンジニアのコーディングを補助するためのjavascriptです。画像のロールオーバーやIE6の透過png対応などを実装しており、それぞれの機能を簡単にon/offできるので、使わない機能は無効にしてたりできます。その他にも、ターゲットになる要素のセレクタを設定でたりするのである程度柔軟に対応できます。（→元エントリー） 使い方 jQueryとmeca.jsを読み込みます。meca.jsの一番上の方に設定を書いてあるところがありますので、そこを自分の好きな設定に書き換えて下さい。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="meca.js"></script> ページ毎に設定を変更する meca.js本
太宰府天満宮｜全国天満宮総本宮
ご祈願 御本殿にて、天神さまの御神徳をいただきます。それぞれのお願いごとが叶いますよう、天神さまと皆様の仲を神職が執り持ち、祈りを捧げます。
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
ページ内の印刷ボタンが押された時だけprint.cssを適応する « JavaScript « Snippet-Editor.com
$(document).ready(function(){ $(".printer").click(function(){ $("body").addClass("print"); window.print(); var timeout = setTimeout(function(){ $("body").removeClass("print"); }, 1000); return false; }); }); Webページを印刷するとき、画面に表示されているそのままを印刷したいと思うか、印刷用に整形された状態を欲しいと思うかは、ユーザーによってまちまちです。 上のjQueryプラグインを使うことで、ブラウザのメニューバーから「印刷」を選んだ時と、ページ上の印刷ボタンから印刷を実行した時で、別々の出力結果を得ることが出来るようになります。つまり、前者は見たままに、後者は整形されて印刷されま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebook広告 運用代行 | 株式会社グラッドキューブ
Mutations Studio
HTML5杯｜2012年 ブラウザで競う 熱い夏
Web制作 | Mitsue-Links | ミツエーリンクス | WebIntegration
