ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

webサイト制作でよく利用するjavascriptのススメ

目次

1 スムーススクロール
2 クリックされたときにclassを追加する
3 ファーストビューのフルスクリーン対応

上記が今回の目次です。
今回は3つのコードをご紹介していきます。
まずは「スムーススクロールからです」

スムーススクロール

スムーススクロールという名称にはあまり心あたりが無い方もいらっしゃるかもしれません。
サイトを見てる時、クリックしたら下に流れるように動いて、リンク先の項目に移動するようなサイトを、見たことはないでしょうか?

ページ内リンクはどのサイトでも比較的使われることの多い動きなので、参考にしていただければと思います。

// スムーススクロール
$(function(){
$(‘a[href^=#]’).click(function(){
var speed = 800; // スクロールの速さを調整
var href= $(this).attr(“href”);
var target = $(href == “#” || href == “” ? ‘html’ : href);
var position = target.offset().top;
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
});
});

 

こちらをjsファイルやhtmlファイルに記入していただくと、ページ内リンクがするーっと動くようになると思います。数字のところを変えると、動きが早くなったり遅くなったりしますので、お好みで変えてみて下さい。

クリックされたときにclassを追加する

次は何かのコンテンツがクリックされた時class名を追加する方法についてです。

これはどんな時に使うかというと、サイト内でボタンなどクリックした時に、隠れていたコンテンツが表示されるようにしたい場合などに使います。

http://mugen00.moo.jp/web/jquery/accordion-menu

上記のサイトで分かりやすく解説いただいていたのでリンクでご紹介させていただきます。

ファーストビューのフルスクリーン対応

ウェブページで最初に目を引くものはなにか?
サイトにアクセスして一番最初に見える画面(ファーストビュー)ですよね。
しかしパソコンの画面サイズはそれぞれ違いますので、もメインビジュアルがを見切れてしまったりすることもあります。

そんな問題を解決するためはこのコードを使用すれば解決します。

id=”mv”というID名を設定し、mv内にメインビジュアルの画像を背景で読み込んでおいて下さい。

$(document).ready(function () {
hsize = $(window).height();
$(“#mv”).css(“height”, hsize + “px”);
});
$(window).resize(function () {
hsize = $(window).height();
$(“#mv”).css(“height”, hsize + “px”);
});

 

その後、上記の内容を書くだけで#mv内に入っている画像等がウィンドウの画面サイズより大きかった場合でもウィンドウサイズにあわせて縦横比を維持したまま伸縮させてくれるようになります

今回は3つの便利&よく使うjavascriptのご紹介を致しました。ウェブサイトで動きをつけるには様々な方法があるので、調べたり、悩んだりする方も多いと思いますが動きを実装できた時は嬉しものだと思いますので、是非今回の内容も活用いただければと思います。