Fade in from bottom.
スクロールで画面に入った瞬間
下からフェードインさせる。
KATSU's Original Templered
高速かつ効率的にサイト制作が完成するテンプレート集
Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。
Header Templered
高速かつ効率的にサイト制作が完成するテンプレート集
Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。
また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。
Dropdown Menu Templered
ドロップダウンメニュー
MENU( 1 & 2 )をホバーすることで、子要素を表示することができます。
また、ホバーではなくクリックに変更することもできます。
MainVisual Templered
高速かつ効率的にサイト制作が完成するテンプレート集
Webサイト制作を高速に組み上げるためにテンプレート集を作成しました。
また、ベースとしても使えるため、どんな案件でもこのテンプレートをコピペし、不要箇所を削除することでも使うことができます。
スクロールで画面に入った瞬間
下からフェードインさせる。
スクロールで画面に入った瞬間
左からフェードインさせる。
scss>function>scrollFunction.scss
.effectLeftFade
Animation's Templered
Webサイトを彩るアニメーション
ただWEBサイトを組み上げても、どこにでもあるものになってしまう可能性が。
そう言った時こと、目にとまりやすいアニメーションを使って、個性的なサイトを作り上げます!
Contents Area Templered
各情報やお問い合わせに繋がるパーツ
WEBサイトにはそれぞれに役割があります。
コーポレートサイトであれば、コンタクトへ導くことが重要です。
会社情報
お問い合わせ
Viewer's Templered
画像をアピールするためのビューアー
画像は表現のために重要な要素。
商品やサービスなどで用いると
アピール力はアップします。
Tab's Templered
複数のコンテンツを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
スクロールに対して、要素を追従させる。
position: fixed; による追従ではなく、jQueryによる計算が行われている追従機能!
scrollTop()を使うことで、任意の位置に配置して、animationによって動きを実装。
※左上で追従しているメニューです。
LIGHTBOX Menu Templered
画像をクリックすると、バックグラウンドにフィルターをかけて、画像を大きく表示する。
画像をクリックすることで、jQueryによって背景用と写真用それぞれのクラスを追加している。
応用させれば、別のコンテンツを一時的に表示する、という使い方もでき、アピール力を高める。
背景をクリックすると元の画面に戻る。
CAPTION Templered
画像ホバーでキャプションを表示!
画像上ホバーすることによって、キャプションを表示することができます。
キャプションはimgタグ内のalt=""内の文章を、jQueryにより取得して表示しています。
TOOLTIP Templered
画像ホバーでキャプションを表示!
position: fixed; による追従ではなく、jQueryによる計算が行われている追従機能!
scrollTop()を使うことで、任意の位置に配置して、animationによって動きを実装。