-
Completed Patterns
-
Homepage Patterns
- BLOG1
- BLOG2
- BLOG3
- BLOG4
- BLOG5
- BLOG_CONTENT1
- BLOG_CONTENT2
- BLOG_CONTENT3
- CAROUSEL_V1
- CAROUSEL_V3
- CAROUSEL_CONTENT1
- MAIN_CONTENT_INNER_V2
- MAIN_CONTENT_INNER_V3
- CAROUSEL_INDICATOR1
- CAROUSEL_INDICATOR2
- CAROUSEL_INDICATOR3
- CAROUSEL_INDICATOR4
- CAROUSEL_TAB_CONTENT1
- CAROUSEL_TAB_CONTENT2
- HERO1
- HERO2
- HERO3
- HERO4
- HERO5
- HERO6
- HERO7
- HERO8
- NON_CAROUSEL1
- NON_CAROUSEL2
- NON_CAROUSEL3
- TOPCONTENT1
- TOPCONTENT2
- TOPCONTENT3
- TOPCONTENT4
- QUICKLINKS1
- QUICKLINKS2
- QUICKLINKS3
- QUICKLINKS4
- QUICKLINKS5
- QUICKLINKS_CONTENT1
- QUICKLINKS_CONTENT2
- QUICKLINKS_CONTENT3
- QUICKLINKS_CONTENT4
-
Any-Page Patterns
- FOOTER1
- FOOTER2
- FOOTER3
- FOOTER4
- FOOTERCALLOUT1
- FOOTERCALLOUT2
- FOOTERCALLOUT3
- LOGO1
- LOGO2
- MAINTENANCE1
- MAINTENANCE2
- MAINTENANCE3
- MAINTENANCE4
- MINIFORM1
- MINIFORM2
-
MINIFORM3
- MINIFORM4
- MOBILE_NAV1
- NEWSLETTER1
- PROMO1
- PROMO2
- PROMO3
- PROMO4
- PROMO_CONTENT1
- PROMO_CONTENT2
- PROMO_CONTENT3
- PROMO_CONTENT4
- RECOMMENDME1
- RECOMMENDME2
- RECOMMENDME3
- RECOMMENDME4
- REVIEWS1
- REVIEWS2
-
REVIEWS3
-
REVIEWS4
-
REVIEWS5
- REVIEWS_CONTENT1
- REVIEWS_CONTENT2
- REVIEWS_CONTENT3
- SERVICE AREA1
- SERVICE AREA2
- SERVICE AREA3
- SERVICE AREA4
- SERVICEAREA5
- SERVICEAREA_CONTENT1
- VIDEO1
- WRAPPER1
- WRAPPER2
-
Header Patterns
-
Top Content Template Patterns
-
Homepage Patterns
-
In Development
-
Animations
Animations
Many of these can be a different kind of animation (e.g. they are listed as a hover but can also be an entrance or scroll-to-animate), so if you want a different version, just ask!
A lot of these animations were taken from this website, if you see one on there that isn't yet in here, let me know and I can add it!
Hovers
Color Slides Down on Hover:
Color Slides from the left on Hover:
Color Spreads out from the center on Hover:
The button shrinks slightly on hover:
I shrink slightly on hover.
The button 'tadas' on hover:
I "tada" on hover.
Entrance/On Load
These animations require a javascript function that adds a class to the body once the page is loaded:
$(function() {
$('body').addClass('loaded');
});
The background image slowly zooms in on page load:
Hero Text 1
Hero Text 2- Brand promise 1
- Brand promise 2
- A little Longer Brand promise 3
Quicklinks Title
Text slides in from the left on page load:
Text scales in from the center on page load:
I scale in from the center.
Text fades in on page load:
I fade in to view.
On Scroll
Element flips into view on scroll:
I flip in to view.
