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

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

 

Lide Demo

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

 

使い方

 

使い方は「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');
}

・・・・・

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

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。