読者です 読者をやめる 読者になる 読者になる

ページトップへ移動するアニメーション

スクロールすると表示されるトップへ戻るボタン テキスト著者の解説 ページトップへ移動するアニメーション 《script.js》 $(function() { var topBtn = $( '#page-top' ); //ボタンを非表示 topBtn.hide(); //スクロールが100に達したらボタン表示 $( windo…

フィルタリング

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="style.css"> <script src="jquery-2.2.4.min.js"></script> <script src="jquery.mixitup.min.js"></link></meta></head></html>

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

メガドロップダウン

メガドロップダウン 手順 HTMLの文章構造を構築 CSSを記述 hover時の設定を記述 メガドロップダウンメニュー WORKS PRODUCT RECRUIT BLOG CONTACT WORKS DESIGN・HTML/CSS・SYSTEM 制作について紹介します。 DESIGN >コンセプトワーク >受賞リスト >実績…

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

animate( )メソッドを使ったアニメーション

animate( )メソッド $( セレクタ )に対してアニメーションを設定します $( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック ); property CSSプロパティ名(値を数値で指定できるものに限る) value アニメー…

アコーディオンメニューとは

アコーディオンメニュー 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく はじめはコンテンツが見えない(クリックすると内容が見えることを明示するために、一つ目は開けておく) ユーザー自身が積極的に探…

イベント

イベントとは ユーザーとWebサイトとの間でやり取りを行う処理を「イベント」と呼びます ユーザーイベント(キーボードやマウスを操作することで実行されます) ブラウザイベント(おもにWebブラウザに関連するイベント) イベントの設定 イベントを設定する…

関数とメソッド HTML・CSSの操作

jQueryの関数 jQueryは、関数オブジェクトです 「function」と表示され、jQueryがfunctionオブジェクトであることを示しています jQuery = window . jQuery = function( ){ }; jQueryメソッド jQuery関数が、jQuery関数オブジェクトがもつ関数オブジェクトで…

セレクタ

セレクタとは 名前・属性・状態などによりドキュメント内の要素を選択する機能(要素がオブジェクトとして返ってきます) $( '要素' ) jQueryでは、jQueryオブジェクトつまりインスタンスをを生成してからメソッドやプロパティを実行する jQueryオブジェクト…

はじめてのjQuery

jQueryとは JavaScriptのライブラリ https://jquery.com/ jQueryでできること HTMLドキュメントの横断操作 イベントハンドリング アニメーション Ajax(通信処理) 以上のことを簡単に使うことができるAPI(Application Programming Interface) 1系と2系 …