やりたいこと とある<form>があってその中にjQueryで動的にinput hiddenタグ要素を生成&追加して送信したい。 方法 要素を生成しようと思ったときにぱっと思いつくのは、document.createElementだが、jQueryを使うと下記のように簡潔にかける。

複数の背景画像やパーツを異なる速度や方向で動かすことで生じる、視差を活かした奥行き感を演出するパララックス効果ですが、今回はマウスホイールに応じて1画面毎にページを遷移するパララックスを作成しナビゲーションと連動したカスタムを追加して1ページサイトのような形で作成してみます。 今回は各要素の挙動を直感的に設定できるjQueryプラグイン「Jarallux」をパララックスの実装に、マウスホイールによる制御を「jQuery Mouse Wheel Plugin」プラグインを使用して、マウスホイールに応じた1画面ごとのパララックス遷移を実装していきます。 まずはスクロールに応じた要素のパララックス遷移を実装し、マウスホイールの操作で1画面（スライド）分遷移する機能を実装し、ナビゲーションを設置して前後の画面へ遷移したり、任意の画面へ一気に移動するジャンプリンク機能を追加していきます。 今回作成し

「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

更新日: 2020年9月27日公開日: 2015年10月8日滑らかで美しい表現ができる！SVGアニメーションを使ってみよう Airbnb の模写（写経）で登場してくる SVG 形式の画像。Webデザイナー志望の方や単価をあげたいWebデザイナーの方にとっては、「SVG」必須ですよね。 今回は SVG 画像だからできる SVG アニメーション・・・・・・・についてご紹介させて頂きます。 参考: CSS-TRICKS SVG アニメーションは、SVG画像をベースに CSS や JavaScript で動きや装飾を加える表現手法の一つになります。 メリットとしては、軽量でスケーラブルな SVG 画像に好みのアニメーションを加えられるという点。普段 Web を見ている限りではどれがSVGアニメーションで、どれがSVGアニメでないのか区別はつきにくいですが、SEOや美しさ、滑らかさを求めるとSVGア

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者でも設置・使用が簡単なものを中心にまとめました。 ※ライセンス等は各自でご確認ください。ライセンスは、サイトまたはダウンロードしたファイル内に記述してあることが多いです。（GPLやMITやCCなど主要ライセンスの内容と意味のまとめ） もくじ レスポンシブ対応！PCでも、スマホのフリック操作でも使えるスライダー サムネイル付きでページングもできるフォトギャラリー スクロールに合わせて表示させたい パララックスさせたい 背景画像を画面サイズにあわせて表示させたい フルスクリーンでスクロールさせたい スクロールするとヘッダーを固定させたい 順番にアニメーションさせたい テキストをアニメーションさせたい

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

フルスクリーンでコンテンツを表示するWebページが増えましたね！ 私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:) 「fullPage.js」は、１つのコンテンツをフルスクリーン表示させて、スクロールすることで１ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。 わかりにくいかもしれないので、デモをご確認ください。 このfullPage.jsを使い、スクロールしてコンテンツが表示されたらJavaScriptを実行させたい！と思い、色々と調べました。 コンテンツが表示されてからアニメーションなどが動作するとカッコイイですよね！ （onLeaveというオプションを使えば可能であることがわかりました） せっかくなので、基本の使い方や他のオプションなど調べたことをまとめます。 fullPage.jsの使い方

jQueryを使用して、シングルページでナビゲーションに現在地を表示するサンプルを作成しました。 デモページはこちらになります。 ■HTML ナビゲーション部分とコンテンツ部分のHTMLの抜粋です。 ページ内リンクで各コンテンツに遷移します。 <ul id="gnav"> <li><a href="#contents01">コンテンツA</a></li> <li><a href="#contents02">コンテンツB</a></li> <li><a href="#contents03">コンテンツC</a></li> <li><a href="#contents04">コンテンツD</a></li> </ul> ～略～ <div id="contents"> <div class="inner"> <div id="contents01"> <h2>コンテンツA</h2> コンテンツAの

お待たせしました！ 「れーとーびーむの作り方」実践編！ ……これまでの前座はなんだったのか。 今回は、「ページ内リンク」を瞬間移動ではなく、するするーっとスクロールするように改造しちゃおうのコーナー。 ついでに、ページ内リンクを踏んでもURLが変わらず、「戻る履歴」にも残らないようにしてしまう。 今回紹介する方法は、このブログでも使っているのだ。多少アレンジしてるけど。 jQueryを使ったJavaScriptでできるよ。 サンプル とりあえず、以下のページ内リンクを踏んでみな。 ※スムーズスクロールは負荷が高いので、スマホとかではカクついてスムーズにならない可能性大。 ※帰りは自分でスクロールしてくれ。 とりあえずソース 終わりに とりあえずソース jQueryを使ったスクリプトだから、しかるべき場所に書くように。 $(function() { $('a[href^="#"]:not([

ブラウザいっぱいにコンテンツを表示できる、シングルページ用のjQueryプラグイン「fullPage.js」の使い方メモ。 使い方 下記からダウンロードできます。 alvarotrigo/fullPage.js · GitHub ダウンロード後、必要なファイルを読み込みます。 <link href="jquery.fullPage.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.fullPage.min.js"></script> 使用するオプションによっては、下記ファイルの読み込みも必要になります。 jQuery Easing Plugin

2017年04月10日 Web jQuery,おさらいシリーズ 2015年あたりから見た人を引き込みやすいパララックスサイトはトレンドとなり、現在でも新しい見せ方のパララックスサイトが次々と登場しています。 今回はGoogleなども使用している簡単に全画面スクロールのパララックスサイトが作れるFullPage.jsプラグインを私のおさらいも兼ねて紹介します。 パララックスってなに？視差効果のことです。 サイトの場合、ページをスクロールする際に画面の手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。 FullPage.jsって？「jquery パララックス」と検索したくらいでは上位に表示されないのですが、有名なのはGoogleをはじめとした大手企業がこのプラグインを採用しているおかげでしょう。 全画面表示でスクロールすると次の全画面表示がするっと現れます

サイトデザインを考えている時、国内海外問わずいろんなサイトを見て参考にさせていただいているのですが、最近PCサイトで多く見かけるのが画面いっぱいのサイトデザイン。 中にはスクロールするごとに、アニメーションで動きがあるものもあって、すごくかっこよくておしゃれな感じなんです。 そんなかっこよくておしゃれなサイトが簡単に作れるフルスクロールするjQueryのプラグインfullpage.jsの使い方をまとめてみました。 私のポートフォリオにも使用してみたので、こちらをベースに紹介していきますね。 ポートフォリオ fullpage.jsの導入方法 fullpage.jsのパッケージをダウンロード CSS/jQueryプラグインファイルをディレクトリにアップ 外部ファイルとしてheadタグに追記 HTMLにID/クラス名を記述 fullPage.jsを実行する fullPage.jsのオプションの設

2015.07.16 fullPage.jsはフル画面でコンテンツを表示して、少しスクロールするだけで、次のコンテンツまでスクロールさせるjQueryのプラグインです。 それの使い方メモ。 以下のURLからダウンロード出来ます。 http://alvarotrigo.com/fullPage/ 本家のドキュメントはこちら 本家ドキュメントの一部を日本語でわかりやすく説明します。 （特にたくさんあるオプションを中心に説明します。） ファイルの読み込み（Including files） 必要なファイル（JSやCSSファイル）を読み込ませます。 head部分でCSSファイルを読み込ませます。 <link rel="stylesheet" href="css/jquery.fullPage.css"> </body>直上にscriptファイルの読み込みを記述します。 <script src="ht

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。