【jQuery】ページがスクロールされたらやってほしい処理を書く方法

どうも
ご無沙汰してますsu-sanです。

webページ制作でスクロールされた時にやってほしいことを書きたい時ありますよね!

スクロールされたらメニューバーを表示させたりボタンを表示させたり。。。

それができるのが下記のコードです!!

以下の関数の中に行いたい処理を書くとスクロール時に実行されます!

$(window).scroll(function(){
    〜行いたい処理〜
});

今回はwindowのscrollでイベントを追加してみたいと思います。

ここでクラスを指定して色を変えたり何かを表示させたりなどできます!
上の例ではスクロール時にhogeクラスにhogehogeクラスを追加していますー

$(window)には他にも色々な便利な関数があるので、ぜひ使ってみてくださいー!

以上、「ページがスクロールされたらやってほしい処理を書く方法」でした!

これは使える!無料【 Chrome拡張機能】

こんにちは!bibiです。
今回はweb関係者にオススメ!
使って便利!なGoogle Chromeの拡張機能を紹介します!

 

Altチェッカー【Popup Image Alt Attribute】

「あれ、あの画像のaltって何書いたっけ・・・?」
「大量にコピペでhtmlタグを量産したけど、alt変えたっけ・・?」
そんなあなたに朗報!この拡張機能をインストールすれば、
なんとhoverするだけでaltが表示されます!
いちいち検証やソース見に行ったり検索したりせずに楽々便利♪
Popup Image Alt Attribute

 

キャッシュクリア【Clear Cache】

「再読み込みするだけじゃ、変更が表示されない・・・」
皆様、経験ありますよね!?
「設定からキャッシュクリアを・・・あれ、履歴からだっけ・・・?」
あるある!こういうので意外と時間かかっちゃったりしますよね!
この機能は、1クリックでキャッシュをクリアしてくれる優れものです!

なお、オプションからReloadにチェックを入れると、1クリックで
再読み込みとキャッシュクリアを同時に行うことができます!
納期の差し迫った時期に1秒でも節約したい、そんなあなたにオススメです!

Clear Cache

 

fontチェッカー【What Font】

気になるあのサイトのあのフォントが、1クリックで簡単に確認できます!

What Font

 

タグエラーチェッカー【HTMLエラーチェッカー】

表示ページを自動で検証してくれて、抜けタグなどタグエラーがあれば教えてくれます!我が社は大丈夫なようですね、(´▽`) ホッ

HTMLエラーチェッカー

 

クロームユーザーならひとつ1分程度で瞬速追加可能です。
どの機能も、あるとちょこっと便利になったり、作業時間を節約できる優れモノです!
是非是非、日々の社畜workライフに利用してみてください♪

【jQuery】htmlページで複数の画像のスライド実装!【slick】

こんにちは!
今日はタイトル通り、複数ある画像をスライドさせて行く実装方法だよ!!^o^
今回はslickっていうプラグインを使うよ!

早速slickをダウンロードしよう!右上にある「get it now」のボタンからダウンロードできるよ!
http://kenwheeler.github.io/slick/

次にダウンロードしたフォルダを任意の場所に設置しよう!

やることはたったの3つ!!!
1、以下のコードを記述!
置いた場所によってパスを変えてね!

2、次にスライドさせる要素の作成!

3、最後に上の要素を動かす処理を記述!

たったこれだけでスライドさせることができるよ!
スライドさせるプラグインは他にもあるけど、slickが一番導入しやすかった!

slickには最後の要素を動かす処理内に色々記述することでもっといろんな事ができるみたいだから興味あったら調べてみてね!

ではまたー!^o^ノ

指定したセレクタの箇所までスーッと自動でスクロールするナビゲーションの実装方法

指定したセレクタの箇所までスーッと自動でスクロールするナビゲーションの実装方法

こんにちわ。Webデザイナーのotarieです。

今回は1枚の縦長のサイトなどでナビゲーションのメニューをクリックした際にスーッと気持ちよく指定したセレクタの箇所まで移動してくれる動きの方法をご紹介したいと思います。

まずはメニューを作ります。

こんな感じ。

HTMLの<body>…</body>内にnavのコードを入れます。

この記述の際、大事なのは<!–nav–>直下の<li>の中に入れたメニューそれぞれに名前をつけて行きます。

<a href=”#story“>STORY</a></li> → ※「」を頭につけてね!

 

次に要素内にも指定して行きます。

ここで気をつけたいのが、要素に「id=”story”」という形で指定して行きますが、この指定された部分を先頭にして、その位置まで行ってくれます。なので、変な場所(要素の途中)で指定すると中途半端な部分に行っちゃうので、綺麗に要素をまとめて指定する事をオススメします。私は要素ごとに<section>で囲んでいます。

<section id=”story” class=”story”>

<section>内の「id=””」に指定します。「#」は入れず、大文字、小文字も<nav>で指定したものと同じにしてください。

 

次にjsファイルを作成します。

下記URLアドレスから「http://code.jquery.com/jquery-1.7.1.min.js」の上で右クリック「リンク先を別名で保存」を選択し、目当てのファイルをゲットします。

URL:https://blog.jquery.com/2011/11/21/jquery-1-7-1-released/

ゲットしたら、HTMLファイルの<head>…</head>内に下記コードを貼り付けます。

 

最後に<script>のコードを<head>…</head>内に指定します。

これで完了です!

せっかくのカッコいいサイト。メニューがバッと変わってしまうよりも、スーッと動きのあるスクロールで変わる方が気持ちいいですよね( ´ ▽ ` )

いかがでしたか?

また次回をお楽しみに〜

クリッカブルマップ(イメージマップ)の作成方法!

クリッカブルマップ(イメージマップ)の作成方法!

こんにちは。Webデザイナーのotarieです (。-_-。)
今回はクリッカブルマップ(イメージマップ)を使う機会があったので、クリッカブルマップ(イメージマップ)の作成方法について学んだことを書きます。

画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたい。画像内の複数の部分に違うリンク先を指定したい。と思ったアレ。クリックする場所によってリンク先が違う指定をしている絵や画像をクリッカブルマップ(イメージマップ)と言います。

このクリッカブルマップ。初めましての時はとても難しく考えていたのですが、3つの要素を指定するだけで簡単にできたのでご紹介します。
その3つが「img要素」、「map要素」、「area要素」です。
1つづつ見ていきます。
 
 
STEP1「img要素」

img要素は、通常の指定と同様で
<img src=”img/xxxxx.png”>
これに、クリッカブルマップの属性を追加します。

usemap属性:クリッカブルマップの名前を、頭に「#」を入れ指定してあげます。
・src属性:画像ファイルを指定してあげます。
・alt属性:代替テキストを指定してあげます。
 
 
STEP2「map要素」

先ほどのimg要素に指定したクリッカブルマップの名前を使ってmap名を指定してあげます。

 
 
STEP3「area要素」

area要素は少しだけ複雑になります。先ほど指定したmap要素の中に入れていきます。
画像のどの部分にリンクさせるかを形と座標と共に指定してあげます。
指定の詳しい内容は下で説明します。

■「shape=””」 領域の形

 rect:四角形
 circle:円形
 poly:多角形
 default:画像全体

■「coords=””」 領域の座標

 座標(x,yなど)
 rect:左上と右下の角の座標(x,y,x,y)
 circle:中心点の座標と半径(x,y,半径)
 poly:全ての角の座標(x,y,x,y,x,y,x,y,…)
 default:coords属性は指定できない

■「href=””」 リンク先の指定

 URL:リンク先のURL

■「alt=””」 代替テキスト

 テキスト:マップが表示できない場合のリンクテキスト

この3つの指定をしてあげるだけでできるんです!簡単ですよね!
では全部を指定したサンプルコードを書きます。

 
 
STEP4「座標指定」の方法

では、座標はどうやって指定するのか?ここです。ここが面倒です!(´-`).。oO
Photoshopで座標を調べてもいいのですが、ここで私は便利なものを紹介します。
その名も・・・・! 

HTML Imagemap Generator!!!!

この便利なジェネレーターに座標を指定したい画像をポイっ!
そして指定したい形を選んで、絵の上でドラックして形を合わせて。。。。。
指定していくと、右側に自動的にコードが書かれ、座標も入れ込んでくれる本当に便利なジェネレーターで、強く、強くオススメします!!
あとはこのソースコードをコピペすれば簡単に指定できますよ^^

いかがでしたか?
また次回をお楽しみに〜