jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
【くるくる】カルーセルを実装できる評価が高いjQueryプラグイン5選
「なんかあのくるくる横にスライドしていく機能を付けたい！」という要望は制作案件には頻出です。 さて、カルーセルを実装するjQueryプラグインはいくつもありますが、今回はJavaScriptに特化した検索サイトJavascripting.comから評価が高いものを紹介します。 参考：【入門】jQueryの導入方法から使い方まで！わかりやすく解説します カルーセルとは カルーセルとは、遊園地の回転木馬や回転式コンベアなどの意味を持つ英語の名詞です。（cf.carousel）Webのくるくる回転するような動きをするパーツに対しても使われます。 ただ、Web技術に詳しくない人にはカルーセルと呼ぶよりもスライダーと呼んだ方が通じます。実際、カルーセル系のjQueryプラグインにはsliderと名前が付くものもたくさんあり、呼び方はどっちでもいいのかもしれません。 評価が高いカルーセルjQueryプ
インパクト抜群！フルスクリーン背景を実装するときに便利なjQeuryプラグイン9選
jQueryプラグインのよいところは、プラグインを読み込んで簡単な設定さえ行えば誰でも高品質なホームページが作れてしまうところです。 グラフを作成したり、テキストや写真にアニメーションを加えたりするものもありますが、特に面倒な作業を簡単にしてくれるプラグインのひとつが、背景に関するものです。 今回は、フルスクリーンでユニークな動きをするjQueryプラグインの中で特にオススメのものをご紹介します。 フルスクリーン背景を単に実装するだけならCSSを設定するだけでできますが、背景をスライドショーのように表示したり、スクロールに連動して動くようなデザインにしたりする場合は、jQueryプラグインの力を借りたほうがより早く綺麗なホームページを作ることができるでしょう。 今回ご紹介する9つのプラグインの中で、ぜひご自身のホームページに使えそうなものを探してみてください。 フルスクリーン背景を実装する
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
PHPからJavaScriptに変数を渡すまとめ - Qiita
【訂正版】 PHPからJavaScriptに変数を渡す方法をまとめました。 2015.06.03 基本形を修正しました（コメント欄を参照のこと） 2015.04.21 json_encode()について加筆しました。 2015.04.20 jQuery.data()を使った文字列の取得周りに誤りがあったため修正しました。 2015.04.19 tadsanさんからの指摘を受けてエスケープ周りの記述を修正しました。 基本形 <?php $array = array("hoge" => "fuga"); ?> <script> var array = <?php echo json_encode($array, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>; console.log(array); // Obj
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
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
フローティングメニューの使い方（スクロールするメニュー）｜クロノドライブ
今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。 あまり使う機会はありませんが、覚えておくといざというときに便利です。 それでは早速使い方のご紹介 必要なデータを揃える まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。 ここではファイル名を下記の通り保存しました。 jquery.js jquery-ui.js jquery.easing.js jquery.scrollfollow.js ディレクトリはこのようになりました（ jsフォルダの中にダウンロードした jsファイルがすべて入っています）。 HTMLからjsデータを読み込む フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。 {path}の部分はHTMLファイルからのパスにしてください。
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
Modals bootstrap-modal.js - More bootstrap
Examples モーダルウインドウは、合理化されていますが、柔軟で、必要最低限必要な機能を備えていて、スマートです。 Static example モーダルウインドウは、ヘッダーと本文、フッターにはアクションボタンが付いています。 × モーダルウインドウヘッダー モーダルウインドウ本文 閉じる モーダルウインドウアクションボタン <div id="sampleModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</bu
Windows XPだとページ全体に警告表示するJavaScriptを配布します
Microsoft による Windows XP のサポートはあと数十日で終了します。 サポート終了後はどのような脆弱性が見つかったとしても修正されません。 参考: 警察庁も注意喚起、サポート終了後のWindows XP利用は危険 -INTERNET Watch にも関わらず、まだまだ利用者がたくさんいるのが実態です。 さらに恐ろしいことに、ほぼWeb制作者向けの記事ばかりのこのブログも Windows XP からのアクセスが多い事がわかりました。 そこで、このブログでは Windows XP 利用者が記事を表示しようとした場合に警告（Webブラウザーの種類にかかわらず警告）するようにし、その JavaScript を配布することにしました。 Windows XP利用者はどのくらいいる？ このブログの2013年12月のアクセス解析を見ると、Windows の割合が 43.2% で、Wind
GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスホバーでclass名を加える
http://migo-media.com/yes-no/
html5-memo.com
