Bootstrapの無料ハイクオリティテンプレートの紹介

2022年4月28日 17:11 更新｜2015年2月12日 17:00 公開

今回ご紹介するテンプレートは、Bootstrapベースのハイクオリティなテンプレートです。
テンプレートは無料で利用することができますが、再配布や、改変をしてからの配布など禁止されています。

Lide Demo

クオリティーが高いテンプレートが無料で使えるなんて良い時代になりましたね。

「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

詳細はこちら

使い方

使い方は「codrops」からダウンロードしてソースを頑張って眺めるです。
各ブロックがセクションで分かれていますので、パーツとして使うのも良さそうですね。

スクロールに合わせて、アニメーションが程よく付いていると思いますが、こちらは「js/scripts.js」に記述がありますが、jQuery Waypointsを使い、スクロール位置を検出し、Animate CSSで動きを付けています。

各ブロックに「wp1」、「wp2」などの記述があるかと思いますが、そちらが元にアニメーションがキックされています。下記が該当のコードです。

$(document).ready(function() {

/***************** Waypoints ******************/

$('.wp1').waypoint(function() {
  $('.wp1').addClass('animated fadeInLeft');
}, {
  offset: '75%'
});
$('.wp2').waypoint(function() {
  $('.wp2').addClass('animated fadeInDown');
}

・・・・・

ソースコードを眺めているだけでも勉強になりますよね。