webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

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) no-repeat center ce</meta></head></html>…

jqueryでのresize設定

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲー…

高機能なフィルタリングjQueryプラグイン 「Shuffle.js」

vestride.github.io デモページ http://yachin29.com/school/shuffle/ ソース <html lang="ja"> <head> <meta charset="utf-8"> <title>フィルタリング</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/shuffle-styles.css"> </link></link></meta></head></html>

ドロワーメニュー

スマホサイトでは3本線のハンバーガーメニューを押したら、横からメニューが出て来る。という動きをよく見かけます。 そういうメニューを「ドロワーメニュー」と言ったりします。jonsuh.com もちろん便利なプラグインはありますが、このようなシンプルな動き…

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

jQueryでクリックする度にテキストを切り替える

flgを使ったスイッチの作成 ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。 ボタンを押すたびにON・OFFを切り替えるスイッチ的な物は以前であれば「Toggle」を使って簡単に出来ましたが、jQuery1.9以降で廃止されたの…

シングルページの作成

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。 今回の制作のポイント トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え ナビゲーションはある程度スクロールしたら固定 SNSの埋め込み google…

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」

img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。http://vegas.jaysalvat.com/ <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' </script>…

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは? jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。 animateメソッドは値で指定出来る物(margin、color、widthなど)に対し有効です。 $('#box').animate({ 'left': '500px', 'top': '300px' });…

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

クリックイベントの際にa要素の動きに制限を掛ける

a要素にjQuery等でクリックイベントを指定する際、気を付けなければいけないのが、本来a要素が持っている動作とのバッティングです。 まずはa要素が本来持っている動作を再確認しましょう。 HTML の <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、</a>…

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

jQueryプラグインを使ってみる

<html lang="ja"> <head> <meta charset="utf-8"> <title>Bxsliderの導入</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> <script src="js/jquery-2.2.4.min.js"></script> </link></link></link></meta></head></html>

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…