HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-3.css">body内のアニメーションを表示させたい場所にHTMLを記載します。
<div class="fluid"></div>
CSSの書き方
※border-radius の値は「Fancy Border Radius Generator」（https://9elements.github.io/fancy-border-radius/）」などのジェネレーターを使うと数値が出しやすい。
.fluid {
width:40vh;/*横幅*/
height: 40vh;/*縦幅*/
background:#fff100;/*背景色*/
animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
}
@keyframes fluidrotate {
0%, 100% {
border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-2.css">bodyに対してCSSを適応します。
CSSの書き方
/*========= body背景色の変化CSS ===============*/
body {
width: 100%;
height: 100vh;
background:linear-gradient(45deg, #3bade3,#9844b7,#44ea76);/*グラデーションを定義*/
background-size: 200% 200%;/*サイズを大きくひきのばす*/
animation: bggradient 20s ease infinite;
}
@keyframes bggradient{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1.css">bodyに対してCSSを適応します。
CSSの書き方
body{
animation: bgchange 20s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
}
@keyframes bgchange{
0% {
background:#ffe6e1;
}/*変化させたい色*/
25% {
background:#fdcb9e;
}/*変化させたい色*/
50% {
background:#fdcbc1;
}/*変化させたい色*/
75% {
background:#ffff8c;
}/*変化させたい色*/
90% {
background:#b2dffb;
}/*変化させたい色*/
100% {
background:#ffe6e1;
}/*変化させたい色*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-1-8.css">body内に無限スクロールをさせたいコンテンツのHTMLを記載します。
<div class="wrapper">
<ul class="article-list"><!--無限読み込みをさせたい要素を囲う親のクラス名をarticle-listに指定-->
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
<div class="navigation"><a href="page-2.html">続きを表示</a></div><!--クリックするボタンのクラス名をnavigationに指定-->
</div>そのHTMLをコピーして、2 ページ目以降に読み込みたいHTMLをつくります。
その際、HTMLの名前を任意の名前＋数字（例：page-2.html、page-3.html）にします。
<div class="navigation"><a href="page-2.html">続きを表示</a></div>
<!--2ページ目以降はリンク先の数字の部分が自動的に連番が付与されて読み込まれます-->body 終了タグ直前に jQuery、Infinite Scroll、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
<!--自作のJS-->
<script src="js/9-1-8.js"></script>
CSSの書き方
/*ローディングが表示されるエリアの設定*/
#infscr-loading {
width:100%;
text-align:center;
margin:20px auto;
}
#infscr-loading img{
width:30px;/*ローディング画像のサイズ*/
}
JSの書き方
//無限読み込みInfiniteScroll
$('.article-list').infinitescroll({ //無限読み込みをさせたい要素を囲う親のクラス名を指定
navSelector : ".navigation",//次のページを読み込むリンクを囲んでいるクラス名を指定
nextSelector : ".navigation a",//次のページにリンクする要素を指定
itemSelector : ".article-list li",//無限スクロールで表示をさせたい要素を指定
maxPage : 3,//読み込む全体のページ数。入れないと連番でURLが読まれて404エラーが出る
animate: true, //アニメーション処理を行う
loading: {
finishedMsg: "全ての記事が読み込まれました", //全ての要素が読み込まれた後の終了メッセージ
msgText: "読み込み中", //ローディング中の表示テキスト
img: 'svg/loading.svg', //ローディング中の画像を指定
},
},
function(newArticle) {
$(newArticle).hide().delay(100).fadeIn(900); // 0.9秒かけてフェードイン
$(".navigation").appendTo(".wrapper").css("display","block"); //navigationをwrapperの一番最後に移動して表示
});
//ボタンをクリックしたら表示する設定
$('.article-list').infinitescroll('unbind');//初期値にもどして
// ボタンをクリックしたら要素を表示。ボタンのリンク機能は無効
$(".navigation a").click(function(){
$('.article-list').infinitescroll('retrieve');
return false;
});
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-1-7.css">body内に無限スクロールをさせたいコンテンツのHTMLを記載します。
<div class="wrapper">
<ul class="article-list"><!--無限読み込みをさせたい要素を囲う親のクラス名をarticle-listに指定-->
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
<div class="navigation"><a href="page-2.html">続きを表示</a></div><!--次のページを読み込むきっかけのクラス名をnavigationに指定-->
</div>そのHTMLをコピーして、2 ページ目以降に読み込みたいページをつくります。
その際、HTMLの名前を任意の名前＋数字（例：page-2.html、page-3.html）にします。
<div class="navigation"><a href="page-2.html">続きを表示</a></div>
<!--2ページ目以降はリンク先の数字の部分が自動的に連番が付与されて読み込まれます-->body 終了タグ直前に jQuery、Infinite Scroll、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
<!--自作のJS-->
<script src="js/9-1-7.js"></script>
CSSの書き方
/*ローディングが表示されるエリアの設定*/
#infscr-loading {
width:100%;
text-align:center;
margin:20px auto;
}
#infscr-loading img {
width:30px;/*ローディング画像のサイズ*/
}
JSの書き方
//無限読み込みInfiniteScroll
$('.article-list').infinitescroll({ //無限読み込みをさせたい要素を囲う親のクラス名を指定
navSelector : ".navigation",//次のページを読み込むリンクを囲んでいるクラス名を指定
nextSelector : ".navigation a",//次のページにリンクする要素を指定
itemSelector : ".article-list li",//無限スクロールで表示をさせたい要素を指定
maxPage : 3,///読み込む全体のページ数。入れないと連番でURLが読まれて404エラーが出る
animate: true, //アニメーション処理を行う
loading: {
finishedMsg: "全ての記事が読み込まれました", //全ての要素が読み込まれた後の終了メッセージ
msgText: "読み込み中", //ローディング中の表示テキスト
img: 'svg/loading.svg', //ローディング中の画像を指定
},
});
$('.article-list').hide().delay(100).fadeIn(900);//0.9秒かけてフェードイン