軽めのjQuery Advent Calendar 2012の６日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。 先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか？と質問をされました。 jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。
jQueryで下からニョキッと動かす方法
軽めのjQuery Advent Calendar 2012の６日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。 先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか？と質問をされました。 jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。
webworkersclip.com - webworkersclip リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
![[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/90e0d5fd2040a360e7449fe29a2efc39e3dd577c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F11%2FjQueryicon.png)
【jQuery】要素を全画面表示してからスクロール｜合同会社チームサンタ
jQueryはもうweb制作にはなくてはならないものになりましたね。 web上にも情報がたくさん載っているので、グーグル先生に聞けば大抵のことはすぐに分かります。 そのなかで個人的に結構使うんだけど、あまり紹介している記事とかないよなと思ったものをご紹介出来ればと思います。 チームサンタの三浦です。 フルスクリーンからのスクロール デモページ ちょっと上手く動きの説明が出来ないのでまずはデモページで確認して下さい。 背景画像などを画面サイズいっぱいに広げてから、セクションを切り替えてスクロールさせたい！もちろんリサイズしても大丈夫！ ってこと結構あると思うのですけど、意外に情報が少ないと感じたので、紹介出来ればと思い、今回の記事を書かせてもらいます。 HTML <body> <section id="s01"> <h1>全画面表示させたいセクション</h1> </section> <sec
さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、デザイナーのはやちです✌(´ʘ‿ʘ｀)✌ 梅雨明けの暑さでバテ気味です…この暑さ嫌ですな c⌒っ´ʘ‿ʘ｀)っ はやちは静かに暮らしたい c⌒っ ◞‸◟ )っ そんなこと言ってもこの暑さは和らぎません(◞‸◟) 今回はjQueryで簡単にコンテンツをオーバーレイ表示させる方法をご紹介していきます(◞‸◟) オーバーレイとは ライトボックスのように要素の上に要素を重ねて表示させる方法です 上に重ねる方の要素を半透明にさせて下の要素がうっすら見えるような表現に多く使われます( ˘ω˘)☝ HTML </pre> <div id="overlay"> <p id="text">ｲｪｰｰｲみてるぅ✌(´ʘ‿ʘ｀)✌</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> ID名overlayはオーバーレイされ
ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方｜Gimmick log
TOPjQuery ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方 ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方 公開日：2015.11.20 更新日：2016.11.10 jQuery, モーダルウィンドウ animatedModal.js は様々なアニメーション付きでモーダルウィンドウを表示するjQueryプラグインです。 PCはもちろん、スマホやタブレットなどの表示領域が狭いデバイスでも、全画面表示だから有効的に使えそうです。 対応ブラウザはIE10↑、その他モダンブラウザ。 デモページ 必要なファイルを読み込む 以下からanimatedModal.js用のファイルをダウンロードして読み込みます。 animatedModal.js配布元 必要なファイルはani
jQueryのスライドメニューmmenuの使い方｜Gimmick log
<link rel="stylesheet" href="jquery.mmenu.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="jquery.mmenu.min.js"></script> htmlの記述 メニューとして表示させたい部分を任意のidを付与して囲います。ここでは id=”menu” の部分です。 htmlの記述のポイントは、メニューを表示させるためのボタンと、メニューが同じ親要素（ここでは#wrap）で囲われているかです。 また、その親要素の外に要素があると、メニューを表示した時に下の方に見切れたりする場合があるので、フッターなども含めて囲う要素がありそうです。 <div id="wrap"> <hea
【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) | UNORTHODOX WORKBOOK | Blog
UNORTHODOX WORKBOOK BLOG TOP›Web Design›【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) 最近はモーダルっぽい感じでメニューをページ全体に表示するパターンが増えてる気がするし、もう随分色々な方法やプラグインがあって、かなり今さらなネタですけど、クリックでサイドからスライドして現れるメニューの新たな知見を得たので書き残しておきたいと思います。 「新たな知見」といっても、誰でも考えつくようなことで、そんなに大したことではなく、「あぁ、なるほど」とちょっと思った程度のことですが。。。 クリックでサイドから現れるメニューとは 何て言う名前なのか良く分からないので、デモを。デモページ右上の三つの四角いボタンをクリックすると、にょきっと横からスライドして現れるやつがそうです。 jQueryを利用していますが
YouTube動画をヘッダーの背景に設定する方法
Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
bxsliderで2枚目以降の画像もブラウザ幅いっぱいに表示してみる。 | らうんじ
もともとbxsliderにはカルーセル表示をすることができるオプションがあるんですがコンテンツの幅を固定、またはmax-widthを指定してある場合、少し工夫をしてあげないとうまくいきませんでした。それからnext/prevのアイコンをクリックするとスライドショーが停止して動かなくなるという現象が起きていたので動くように変更しました。 以下サンプルページ http://gallery-lounge.com/demo/bxslider/ bxslider head bxsliderを自分のサーバーへアップロードし以下記述。easingを適用するならダウンロードしたファイル内にあるeasingファイルもアップロードしてください。 ※ファイルパスはご自身の環境に合わせて記述。 <script src="../js/jquery.bxslider.js"></script> <script src
jquery.bxslider.jsの使い方やオプションなどのまとめ
スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」の使い方をメモ。 下記からダウンロードできます。 jQuery Content Slider | Responsive jQuery Slider | bxSlider ダウンロード後、必要なファイルを読み込みます。 <link rel="stylesheet" href="jquery.bxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.bxslider.min.js"></script> 使用するオプションによっては、下記ファイルの読み込みも必要になります。 jQuery本体とjquery.bxsl
さまざまな動きをするjQueryスライダーを作ってみた
前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出来たので残しておこうと思います。 スライドのパターン よく使う配布されているスライダーを見ると画像の動き方が何種類かありますよね。なので、今回は6種類作ってみました。 サンプルページ サンプルページは以下から。全種類並べています。また、ダウンロードも出来ます。 サンプルページ ダウンロード 設置方法 HTML 設置したい箇所に以下のように記述します。 <div id="slide01"> <ul> <li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li> <li><a href="#"><img src="img/img02.gif" width="700" height="
画像を画面いっぱいに広げてフェードエフェクトで切り替えるスライドを実装するjQueryプラグイン・slideshowify.js - かちびと.net
地味に良さそうだったので備忘録。画面 いっぱいに画像を広げてフェードエフェ クトでスライドショーを実装できるjQuery プラグイン・slideshowify.jsです。この 手のプラグインは沢山あるので選択肢 の一つとして・・ なんとなくよく見かけた画像のフルスクリーン表示を実装します。この見せ方は良い写真や画像なら飲食店やアパレル系などでは訴求力もあるし、よく見かけるのも当然といえば当然かもしれません。 キャプチャ見ても全然ピンと来ないと思いますのでSampleご覧下さい。 Sample 基本的には直接貼られた画像をスライド化します。※画像はmark sebastian氏より(CC-BY) 指定されたセレクタ外のコンテンツはpositionプロパティによって画像上に配置されている形となります。スライドしている画像はdisplay:none;を使用していますので各々の画像にリンクは貼れま
リストをひとつずつ遅延表示させるjQuery
同じような要素を並べて表示する箇所などで少しばかりリッチ感を出したいな～ってときに、各要素を遅延表示させたりすることで単純な一覧表示よりも動きがあっていいかもしれません。 jQueryを使ってリストを簡単に時間差で表示させてみたいと思います。 1.リストを遅延表示させる HTMLを記述 <ul class="list-simple list"> <li><a href="#">list01</a></li> <li><a href="#">list02</a></li> <li><a href="#">list03</a></li> <li><a href="#">list04</a></li> <li><a href="#">list05</a></li> </ul>
外部ページでもスムーススクロールするプラグイン | Creator Index
外部ページでもスムーススクロールするプラグイン 2015.03.26 jQuery プラグイン はじめに 2015.5.10 サンプルページに外部サイトへのリンクを追加しました。 2015.5.6 スクリプトを一部修正しました。 前回の記事でつくったスムーススクロールのスクリプトをマイナーチェンジし、外部ページでもスムーススクロールするようにしてみました。 外部ページでもスクロール…、とはつまり、アンカーリンク付きの別ページを開いた時、遷移先のページでもスムーススクロールする、ということです。 サンプル 今回は、プラグイン化もしてみました。 まだ、改良の余地はたくさんあると思いますが、もし良かったら使ってください。 smoothScrollEx.js（右クリック→リンク先を保存） INDEX 使い方 仕組み jQuery Easing Pluginを使う 使い方 jQueryを読み込み、そ
WordPressでjQueryプラグインを自由に使う注意 - WeBridge｜WeBridge
WordPressには最初からjQueryが組み込まれていますが、通常の使用方法とは多少変わってくるところがありますので注意点を備忘録としまとめます。 ※WordPress組み込みのjQueryを仕様せず、任意のディレクトリに純正のjQueryをアップロードして使用する場合は、通常通りで問題ないとおもいます。 まず、ヘッダーにjQueryを読み込む際の記述方法 <?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('easySlider1.5.js', '/wp-content/themes/テーマ名/js/easySlider1.5.js'); ?> 上段はWordPress組み込みjQuery.jsを読み込む記述。下段は、使用したいjQueryプラグインのjsファイルを読み込む記述です。 上記の記述を <?php w
スムーススクロールを実装する方法(ページ内をゆっくり移動)
JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
ページリンク付きのアンカーリンクに対応したjQueryのスムーススクロール | スターフィールド株式会社
ページ内のアンカーリンク(#link01のようにページ内のIDの場所を指定して移動させるリンク)のとき、 ページ内での移動であることがユーザーにわかりやすくなるため、 スムーススクロールを使う機会はとても多いと思います。 ただ、Wordpressなどでメニューを管理する場合で、 リンクにアンカーリンクをつけたい場合、 ページ外からのリンクも行う必要があるために、 以下のように、ページのリンク(URL)+アンカーリンクという形でリンク先を指定しなくてはならなくなることがあると思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://web-design-cafe.com/archives/481
