【授業メモ】jQuery animateとスムーススクロール
独自のアニメーションを設定できるanimate
height,top,opacityのように、数値で指定できるものは全てアニメーションに設定できる。
※colorのように、数値以外で指定するものはアニメーションにはできない。
動きに設定できるのはlinear swingで設定する。
$(function(){
$('一枚目画像').on('click',function(){
$('画像が入っている要素:not(:animated)').animate({
'動かしたい方向':'動かしたい距離（次の画像が出てくるために必要な距離）'},'秒数','動き');
});
$('二枚目画像').on('click',function(){
$('画像が入っている要素:not(:animated)').animate({
'動かしたい方法':'一枚目が戻ってくる距離'},'秒数','動き');
});
});
★記述例
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーションを設定するanimate</title>
<style>
html,body,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
img {
vertical-align: bottom;
border: none;
}
img {
width: 400px;
height:267px;
}
p {
width: 800px;
height: 267px;
margin: 0;/*pをぴったりにくっつけたいのでmargin0*/
}
div {
width: 400px;
height: 267px;
overflow: hidden;
}
/*二枚の画像を横に並べてdivに入れるが、動かして表示したいので二枚目を隠す
そのためにdivの幅を画像一枚分にし、はみ出した二枚目が隠れるようにする
*/
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#dog1').on('click',function(){
$('p:not(:animated)').animate({//一枚目のimgをクリック→pを左に400px(画像一枚分)動かす
'margin-left':'-400px'},'200','linear');//一枚目がずれるため、二枚目が見えるようになる
});
$('#dog2').on('click',function(){//左に一枚分-400pxしたのを戻すために0にすれば初期値に戻る
$('p:not(:animated)').animate({//そうすると一枚目が戻ってくる
'margin-left':'0'},'200','swing');
});
});
</script>
</head>
<body>
<div>
<p>
<img src="img/1.jpg" alt="" id="dog1"><img src="img/2.jpg" alt="" id="dog2">
</p>
</div>
</body>
</html>
★animateで作るページ内リンク スムーススクロール
トップに戻る場合
複数の場所を指定する場合
★記述例
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール ページ内リンクの作り方</title>
<style>
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
ul {
padding: 20px;
background: white;
position: fixed;/*ナブを固定にすれば移動がラク*/
top: 0;
right:0;
}
li {
display: inline-block;/*横並びにするための指示 これを使うとfloatさせずとも横に並べる*/
margin-right: 20px;
}
div{
width: 100%;
height: 100vh;/*view port height 一画面分 今見ている画面分ということ*/
}
#one {
background:#FFFF00;
}
#two {
background:#F90;
}
#three {
background:#F66;
}
#four {
background:#6CF;
}
#five {
background:#6C9;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
//topに戻るだけの場合
//$(function(){
// $('#to-top a').on('click',function(){
// $('#top').animate({ scrollTop: 0 }, 'swing');
// return false;//アンカーのイベントに必須
// });
// });
//複数要素&TOPに戻る場合 このまま覚える
$(function(){
$('a[href^="#"]').on('click',function() {// #で始まるアンカーをクリックした場合に処理
var speed = 400; // スクロールの速度 ミリ秒
var href= $(this).attr("href"); // 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得
var position = target.offset().top; // スムーススクロール
$('#top').animate({
scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
</head>
<body id="top">
<ul>
<li><a href="#one">一個目</a></li><!--div idにリンクさせるとページ内リンクができる-->
<li><a href="#two">二個目</a></li>
<li><a href="#three">三個目</a></li>
<li><a href="#four">四個目</a></li>
<li><a href="#five">五個目</a></li>
</ul>
<div id="one">一個目</div>
<div id="two">二個目</div>
<div id="three">三個目</div>
<div id="four">四個目</div>
<div id="five">五個目</div>
<p id="to-top"><a href="#top">トップに戻る</a></p><!--bodyにつけたid名を入れることでリンクできる-->
</body>
</html>
★応用編
・TOPに戻るボタンをスクロールにする
・TOPに戻るボタンを、300pxスクロールしたら表示、300未満だと非表示にする
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
//TOPに戻るボタンの動き
$(function(){
$('#to-top a').on('click',function(){
$('#top').animate({ scrollTop: 0 }, 'swing');
return false;//アンカーのイベントに必須
});
});
//TOPに戻るボタンを、300pxスクロールしたら表示させる
$(function(){
$('#to-top').hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('#to-top').fadeIn();
} else {
$('#to-top').fadeOut();
}
});
});
</script>
