jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。 投稿日2015年10月28日 更新日2015年10月28日 HTML HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。 今回はこのheader部分を固定します。 HTML <header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた jpgやpngはビットマップなため拡大すると画像が荒れてしまいますが、SVGはベクターデータなため拡大しても荒れることはなく単純な図形のような画像なら容量も抑えられるといった特徴があり注目されています。 この記事ではJavaScriptからSVGを描画できるRaphael.jsというライブラリをご紹介します。 投稿日2012年07月06日 更新日2012年07月06日 ライブラリのダウンロード 下記公式サイトからダウンロードしてください。 Raphael_JavaScript Library 解凍したフォルダの中にある「raphael-min.js」を読み込みます。 簡単な図形を描いてみる 最初に簡単な丸を描いてみます。 SVGを描画するための「div」を用意します。 html <div id="svg"></div> cs
jQueryでマウスオーバーすると全体的にピカーンってなるやつ
jQueryでマウスオーバーすると全体的にピカーンってなるやつ マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。 投稿日2011年10月11日 更新日2011年10月12日 準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像を用意します。 ここでは「bg.jpg」という名前で1000×1000の画像を使用します。 bodyのbackgroundを指定する方法 一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。 jQueryでimageとpositionの設定をしますので、cssでその他の設定をして
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
CSS+jQueryで左右別々の背景にする
CSS+jQueryで左右別々の背景にする センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。 そこでcss+jQueryでなんとかしてみます。 投稿日2012年01月12日 更新日2012年01月13日 中心で分かれた背景 とりあえず中に配置するコンテンツは考えないで左右で別々の背景画像を設定してみます。 デザインによっては左右でdivを配置する必要があるかもしれませんが、今回は全体を囲うdivと半分だけのdivを配置してみます。 html <div id="wrap"> <div id="left-bg"></div> </div> css html, body, #wrap, #left-bg { height: 100%; } #wrap { background: url(bg
jQueryで背景画像をアニメーションで無限ループさせる
画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない！ html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin
自作のjQueryスクリプトをプラグイン化しよう
Posted: 2011.06.13 / Category: javascript / Tag: jQuery, Plugin 自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。 外部ファイル化 たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。 jQuery script $(function() { $('#hide-btn').click(function(){ $('#view').fadeOut(1000); }); }); まずは外部ファイル化しましょう。 jQueryプラグインは「jquery.プラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
