jQueryのアニメーション3
画像をスライドさせる
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryアニメーション animate()</title>
<style>
html,body,p {
margin: 0;
padding: 0;
}
p {
width: 1200px;
height: 300px;
margin:0 ;
}
div {
width: 400px;
height: 300px;
/* overflow: hidden;*/
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('img').on('click',function(){
$(this).animate({
'margin-left': '-400px'
},'slow','swing');
});
/*
$('#pic1').on('click',function(){
$('p:not(:animated)').animate({
'margin-left': '-400px'
},'slow','swing');
});
$('#pic2').on('click',function(){
$('p:not(:animated)').animate({
'margin-left': '-800px'
},'slow','swing');
});
$('#pic3').on('click',function(){
$('p:not(:animated)').animate({
'margin-left': '0'
},'slow','swing');
});
*/
});
</script>
</head>
<body>
<div>
<p>
<img id="pic1" src="img/1.png" alt="秋の森と川"><!--
--><img id="pic2" src="img/2.png" alt="窓から見える海"><!--
--><img id="pic3" src="img/3.png" alt="少女とバラ">
<!--改行をコメントアウトすることで画像の隙間を無くす-->
</p>
</div>
</body>
</html>
今回は”overflow:hidden”を使用しないで動きを確認しました。
最初の状態（３枚の画像すべてが表示されています）。overflow:hiddenを使えば、表示されているのは一番左の1枚だけです。
一番左の画像をクリックすると、全ての画像が画像の幅分(400px)左にスライドします。1回スライドさせて1枚目の画像は左に消えて2枚目、3枚目のみが表示されています。
表示されている一番左の画像をクリックすると、全ての画像が画像の幅分(400px)左にスライドします。2回スライドさせて3枚目の画像のみが表示されています。
CSS3×jQueryのハイブリッド
CSS3とjQueryのtoggleClassを使ってCSSのclassを作成し、準備していたCSSで図形を変化させます。
<title>CSS3×jQueryのハイブリッド</title>
<style>
#box {
width: 300px;
height: 300px;
transition: 0.5s;
background: red;
}
#box.color {
width: 300px;
height: 300px;
border-radius: 50%;
transition: 0.5s;
background: blue;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('#box').on('click',function(){
$(this).toggleClass('color');
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
最初の状態
赤い四角をクリックすることで、青い円をアニメーション表示させています。
ハンバーガーメニュー
CSS3とjQueryのアニメーションを使ってハンバーガーメニューを作成します。
<title>CSS3×jQuery アニメーション</title>
<style>
html,body,ul,li,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
body {
background: #06F;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
#box {
margin: 100px auto 100px;;
width: 200px;
height: 200px;
border-radius: 10px;
background: white;
position: relative;
cursor: pointer;
}
#hum {
width: 100px;
height: 4px;
background: #000;
position: absolute;
top: 0;
right:0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.1s linear;
/*
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -1px;
*/
}
#hum:before {
display: block;
content:"";
width: 100px;
height: 4px;
background: red;
position: absolute;
top: -20px;
right:0;
bottom: 0;
left: 0;
margin: 0 auto;
transition: 0.1s linear;
/* transform: translate(0, -20px);*/
}
#hum:after {
display: block;
content:"";
width: 100px;
height: 4px;
background: blue;
position: absolute;
top: 20px;
right:0;
bottom: 0;
left: 0;
margin: 0 auto;
transition: 0.1s linear;
/* transform: translate(0, 20px);*/
}
#hum.color {
transform: rotate(90deg);
background: transparent;
}
#hum.color:before {
transform: rotate(-135deg);
top: 0;
}
#hum.color:after {
transform: rotate(-45deg);
top: 0;
}
ul {
width: 100%;
height: 200px;
background: #000;
display: none;
}
ul li {
width: 100%;
height: 50px;
background: #555;
box-sizing: border-box;
border-bottom: solid 1px white;
}
ul li a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
/* background: #AAA;*/
color: white;
text-align: center;
}
ul li a:hover {
background: #006;
border-bottom: solid 1px white;
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$('#box').on('click',function(){
$('#hum').toggleClass('color');
$('ul').slideToggle(200);
});
});
/*
$(function(){
$('#box').on('click',function(){
$('#hum').toggleClass('color')
if($('ul').css('display') == 'block'){
$('ul:not(:animated)').slideUp('slow');
}else{
$('ul').slideDown('slow');
}
});
});
*/
</script>
</head>
<body>
<div id="box">
<div id="hum"></div>
</div>
<ul>
<li><a href="#">ホーム</a>
<li><a href="#">メニュー</a>
<li><a href="#">お店について</a>
<li><a href="#">アクセス</a>
</ul>
</body>
</html>
最初の状態（ハンバーガーメニューのみ表示されています）。
ハンバーガーボタンをクリックすると、ボタンのマークがアニメーションで変化して横の三本線から✖になり、ボタンの下にはメニューがスライドダウンで表示されます。
再度、ハンバーガーボタンをクリックすると，ボタンはアニメーションで変化して三本線に戻り、ボタン下のメニューはスライドアップで消えます。
要素の前と後に疑似要素を追加
<title>CSS3×jQuery アニメーション</title>
<style>
p:before {
display: block;
font-size: 20px;
content:"p:before で表示させています";
}
p:after {
display: block;
font-size: 20px;
content:"p:after で表示させています";
}
</style>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
</script>
</head>
<body>
<p><img src="img/1.png" alt"#"></p>
</body>
</html>
画像の前後に追加された文字が表示されています。
追加される文字はcssで前もって設定してあり、疑似クラスのbeforeとafterがつくられることでCSSに基づいて表示されます。
borderを使った小技1
<title>borderを使った小技</title>
<style>
p {
width: 100px;
height: 100px;
border-top: 10px solid #F00;
border-right: 10px solid #0F0;
border-bottom: 10px solid #00F;
border-left: 10px solid #FF0;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
borderの接点は斜めになっていることがわかります。拡大してみるとあらためて気づくことがあります。
borderを使った小技2
<title>borderを使った小技</title>
<style>
p {
width: 0;
height: 0;
border-top: 100px solid #F00;
border-right: 100px solid #0F0;
border-bottom: 100px solid #00F;
border-left: 100px solid #FF0;
}
</style>
</head>
<body>
<p></p>
</body>
要素の幅と高さを0にしてborderを描くと三角形ができます。
