Whats this nice collage-style banner?

C

creativepotion

Regular Member
Joined
Jun 23, 2012
Messages
305
Reaction score
19
I came across this site

Code: 
[URL]http://www.vivint.com/[/URL]

and I really love their collage-style banner in the middle of the page, especially the hover on the "+" sign.
Whats that plugin? Is there anywhere I can purchase that?

thanks in advance.
 
Advertise on BHW
Looks like some custom work to me. Probably backed by jquery or prototype, but it looks custom to me. If you view the javascript sourcecode for the page, it's heavily obfuscated (probably to protect their code from being stolen).

I'm sure you could do something similar though - just get a jquery tool-tip popup plugin and use some absolute positioning to get your + signs where you want them.
 
Any similar plugins / script on themefores / codecanyone etc.?

Thanks
 
Definitely custom coding looking at their source code, I don't know of any plug in that can create this I am sure some template designers could whip something like us for you quickly...Or you can do what Derzok recommended above...?


 
Derrick H said:
Definitely custom coding looking at their source code, I don't know of any plug in that can create this I am sure some template designers could whip something like us for you quickly...Or you can do what Derzok recommended above...?
Click to expand...

Unfortunately, I dont think I can do what derzok recommended. LOL
Quite weak at coding.

I guess if I really wanted something like that, I will probably need to hire/outsource to a developer
It definitely looks nice tho. What you guys think.
 
You may ask creativezz or yachika here on BHW. I know both of them are able to code this with jquery.
 
I agree with the rest that this is probably not a plugin.
It looks to me like they just use CSS to pull off this metro style effect.
The basic ingredients which make up the design are linked below.

From the HTML:
<a id="collage-dot-1" class="collage-dot down" alt="Saving you money, saving the planet" href="/home-energy-management"></a>

From the CSS:
media.vivint.com/www[dot]vivint.com/en/images/front/front-collage.jpg
media.vivint.com/www[dot]vivint.com/en/images/front/collage-tooltip-up .png
media.vivint.com/www[dot]vivint.com/en/images/front/collage-tooltip-down .png
media.vivint.com/www[dot]vivint.com/en/images/front/front-collage-dot .png

If you need some help with image maps this is a solid tutorial.
www[dot]position-relative.com/tutorials/tute1_css_bg_image.php


Good luck with your project.
 
socialdevinfo said:
I can do that using moo tools, let me know if you need any help...
Click to expand...

This sounds great. Not sure how hard it is to code something like that, but if its easy, it will be great if you can code it and share it with everyone here :)
(of course, thats only if you dont mind and not too time consuming)
 
Actually i did not liked it all .This design should be much more attractive than this. I think you can do better than this.
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top