jQuery
Animate On Scroll Library michalsnik.github.io 使いやすいです！ スクロールすると、コンテンツが色々なエフェクトで表示される。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Animate On Scroll Library プラグイン</title> <style> html,body { margin:0; padding:0; } body { background:url(img/main.jpg) n</meta></head></html>…
スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、１テンポ遅れたもっさりとした動きになります。そこで出てくるのが「touch」イベントです。 PCでは判りま…
vegas.jaysalvat.com img要素をスライドさせるプラグインは沢山ありますが、背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。 <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' }, { src:'img</script>…
jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…
今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント（UserAgent）とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環…
レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲー…
ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.comBootStrap CDN ve…
複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。 複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。 参考サイト chiyo-katsumasa.com <html lang="ja"> <head> <meta charset="utf-8"> <title>mix it up</title></meta></head></html>…
パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、 複数のレイヤー（層）にある要素を異なるスピードで動かすことで、 「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェク…
Cookie（クッキー）とは？ Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…
Youtubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」を使ってみます。 YouTubeの動画を使うので、自前のサーバーのレスポンスを気にする必要がありません。さらにフリーのレンタルサーバーの多くは動画のような大きなデータのアップが…
svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>
通常であれば以下の記述で良いのですが、以下の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。 #がついている全てにスムーススクロールさせる場合 $(function(){ // #で始まるアンカーをクリックした場合…
Ajaxとは「Asynchronous（エイシンクロナス） JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを…
スクロールイベント 今まで授業では、要素が読み込まれたら動くという「$function」とクリックしたら動くという「on.click」イベントの2つを主にやってきましたが、今回はそれに加えてウィンドウをスクロールしたら動く、「スクロールイベント」をやってみま…
scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセ…
<html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでのテキスト変更</title> <style> html,body { margin:0; padding:0; } img { vertical-align:bottom; } .txt { width:200px; height:50px; border:1px solid #444; border-radius:6px; text-align:center; line-height:50px; margin:50px auto 20px…</meta></head></html>
Bracketsの環境設定ファイル（brackets.json）を開き以下の文章を一番下に追加します。 "language":{ "javascript":{ "linting.prefer": ["JSHint"], "linting.usePreferredOnly":true }bsj-k.com
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
a要素にjQuery等でクリックイベントを指定する際、気を付けなければいけないのが、本来a要素が持っている動作とのバッティングです。 まずはa要素が本来持っている動作を再確認しましょう。 HTML の <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、 </a>…
HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…
jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより 容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。 ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、 JavaScriptライブ…
