CSSの各要素のアニメーションの項目を参照頂きたいが、
CSSだけでも動きをつけることが出来る。
つまりは、基本的には画面よりも大きい要素を容易して
｜画面に表示される範囲｜
｜記事1 ｜記事2 ｜記事3 ｜
⬅margin-leftを1画面分消して、左にスライドさせることで隠れていた記事を表示するといったことをやる。
<html>
<head>
<style>
#overflow{
overflow:hidden;
}
#inner{
width: 500%; /* articleを格納するdivの広さ。100% × articleの数にすると良い */
}
article {
width:20%; /* <div id="inner">に占めるarticleの割合。100% ÷ articleの数にすると良い */
float:left; /*左からarticleを埋めていく。*/
}
#check1:checked ~ #overflow #inner{ /* ~はcheckboxの後の要素のみ更新する。従って、checkboxと同じ階層の#overflowの子孫要素として、#innerを指定 */
margin-left: 0%;
transition: all 1s ease-out 0.6s; /* 緩やかにスライド */
}
#check2:checked ~ #overflow #inner{
margin-left: -100%;
transition: all 1s ease-out 0.6s;
}
#check3:checked ~ #overflow #inner{
margin-left: -200%;
transition: all 1s ease-out 0.6s;
}
#check4:checked ~ #overflow #inner{
margin-left: -300%;
transition: all 1s ease-out 0.6s;
}
#check5:checked ~ #overflow #inner{
margin-left: -400%;
transition: all 1s ease-out 0.6s;
}
</style>
</head>
<body>
<!--コントローラーは操作したいものよりも前に記述する必要がある-->
<input type="radio" name="test" id="check1" style="display:none">
<input type="radio" name="test" id="check2" style="display:none">
<input type="radio" name="test" id="check3" style="display:none">
<input type="radio" name="test" id="check4" style="display:none">
<input type="radio" name="test" id="check5" style="display:none">
<div id="overflow">
<div id = "inner">
<article style="background:red">テスト1</article>
<article style="background:blue">テスト2</article>
<article style="background:yellow">テスト3</article>
<article style="background:green">テスト4</article>
<article style="background:purple">テスト5</article>
</div>
</div>
<!--操作したいものよりも後にコントロール用UIを作りたい場合はラベルを利用する-->
<label for="check1"><input type="button" value="記事1"></label>
<label for="check2"><input type="button" value="記事2"></label>
<label for="check3"><input type="button" value="記事3"></label>
<label for="check4"><input type="button" value="記事4"></label>
<label for="check5"><input type="button" value="記事5"></label>
</body>
</html>
最終更新：2013年02月18日 19:48
