KATSU's Original Templered

Master Templete


高速かつ効率的にサイト制作が完成するテンプレート集

Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。

Header Templered

Header Templete List


高速かつ効率的にサイト制作が完成するテンプレート集

Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。
また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。

MainVisual Templered

MainVisual Templete List


高速かつ効率的にサイト制作が完成するテンプレート集

Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。
また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。

Fade in from bottom.

スクロールで画面に入った瞬間
下からフェードインさせる。

Fade in from left.

スクロールで画面に入った瞬間
左からフェードインさせる。
scss>function>scrollFunction.scss
.effectLeftFade

Animation's Templered

Animation's Templete List


Webサイトを彩るアニメーション

ただWEBサイトを組み上げても、どこにでもあるものになってしまう可能性が。
そう言った時こと、目にとまりやすいアニメーションを使って、個性的なサイトを作り上げます!

Original Templered Master Templete

Contents Area Templered

Contents Area Templete List


各情報やお問い合わせに繋がるパーツ

WEBサイトにはそれぞれに役割があります。
コーポレートサイトであれば、コンタクトへ導くことが重要です。

COMPANY

会社情報

CONTACT

お問い合わせ

Viewer's Templered

Viewer's Templete List


画像をアピールするためのビューアー

画像は表現のために重要な要素。
商品やサービスなどで用いると
アピール力はアップします。

Tab's Templered

Tab's Templete List


複数のコンテンツを1つにまとめるためにはタブが便利

1つのコンテンツで複数のコンテンツを!
これによりUIが向上する。

01

jQuery では、まず#tab1 以外のコンテンツをhide() で隠している。そこから、タブをクリックして反応するように、クリックメソッドを導入。
タブがクリックされたら、一度コンテンツ("contents div") をhide()で隠してしまい、クリックされたタブのid を出現させるようにしている。
ポイントは、aタグの hrefに対応するコンテンツの id を入れていること。これによって、表示させたいattr("href")でidを取得して、show()によって出現させることができる。

02

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

03

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

04

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Floating Menu Templered

Floating Menu Templete List


スクロールに対して、要素を追従させる。

position: fixed; による追従ではなく、jQueryによる計算が行われている追従機能!
scrollTop()を使うことで、任意の位置に配置して、animationによって動きを実装。
※左上で追従しているメニューです。

CAPTION Templered

CAPTION Templete List


画像ホバーでキャプションを表示!

画像上ホバーすることによって、キャプションを表示することができます。
キャプションはimgタグ内のalt=""内の文章を、jQueryにより取得して表示しています。

TOOLTIP Templered

TOOLTIP Templete List


画像ホバーでキャプションを表示!

position: fixed; による追従ではなく、jQueryによる計算が行われている追従機能!
scrollTop()を使うことで、任意の位置に配置して、animationによって動きを実装。