Cool effect, how is it done?!

Dave1975

Active Member
Hey guys,

Just been following a few links around on Twitter and ended up a site called TypeTees by Threadless, there's some very cool shirts on there! But the thing I wanted to ask all the web developers, how have they done the mouseover effect on the shirts so it displays the full t-shirt? I love it! :cool:

Thanks in advance!
Greg
 
JavaScript and CSS.

I think the effect is called SlideToView.
 
Thanks guys, figured it would be Javascript, wondered if there were any scripts available to create that sort of effect, had a quick search but nothing yet, will have a proper look around though.

Hey Paul, welcome to Design Forums, and yeah that's along the lines I was thinking, some way of having a small/key element of the design as a thumbnail and then more of the image appears on mouseover... just thinking out loud now...

Greg
 
Greg said:
Hey Paul, welcome to Design Forums, and yeah that's along the lines I was thinking, some way of having a small/key element of the design as a thumbnail and then more of the image appears on mouseover... just thinking out loud now...

Thanks, Greg. :) I'll have a look around too, as I am making templates to sell these days (business is slow for a beginner like me), and this would look great on one of them.
 
Cool, yeah would be a nice thing to have included, would help to set yours apart from some of the other templates (hate that word! lol) that are available, will let you know if I find anything ;)

Cheers,
Greg
 
I didn't think of using CSS for this, now you showed it, it's pretty simple.

(I used Firebug to see the CSS)
 
Hay Tommy.
If you want to change Safari's CSS use this -
#id{margin-top:10px}
#id,x:-webkit-any-link{margin-top:30px}

That way all bowsers get the margin top of 10px, however only webkit enabled browsers, Sarfari and Chrome {shudder} display the margin top of 20px on the same id.

That should get around your problem.

Jaz
 
I have to admit it is a pretty cool effect.

Thing is the guy or gal obviously thought outside of the box but why not pull it off better.

1. They have all the images on a sub domain, this requires an extra DNS request which slows it down.

2. They have used all png 32 images which are huge 60-100k per image, and not png 8 with alpha transparency, which would be 8-18k.

3. They haven't preloaded the images.

By doing all those 3 the image roll over would be instantanous with no wait time. The thing that is a shame is that the average user wont even see it due to the fact they will hover over the image and click it within seconds they wont even wait for it to load so will miss it unless they are on a pretty quick connection.

Jaz
 
Would be really interested if someone could post a link to the js files, css files etc to how this is done.

TOmmy - I appreciate you have but it doesnt work in Safarai - imac.
 
You don't really need the .js files.
Thier techquie uses a framework I think Json.

But if you want to recreate it something like this would do ~

CSS:
.hide{display:none}

Src:
<img src="some/image" alt="" onmouseover="roll('path/to/file',1)" onmouseout="off(1)" />
<div class="hide"></div>


javascript:
<script type="text/javascript">
function roll(a,b){
var div=document.getElementsByTagName("div");
div.className="";
div.innerHTML="<img src='"+a+"' />";
}
function off(a){
document.getElementsByTagName("div")[a].className="hide";
}
</script>


Job done.
Bare in mind that the code is written off the cuff and may need tuning as I'm preety tired, I would also put it into the object literal way of writting JS and add the onmouseover, onmouseout and the div by DOM scripting. But that would speed it up a lot more than what they have done.

The fact they have used a frame work and not shorthen thier images , nor preloaded them, suggests to me they just used a free tutorial to pull it off, not a good one either.
 
Their code is using jQuery to turn off and on the visibility of a div containing the bigger image. The code also sets the positioning of the div so that it is higher and further left than the containing div. The relevant code is this:

function toggleSmallTee(smallID,URL){
var offset = $j("#"+smallID).offset();
$j("#smallOverlayHolder").css("left",(offset.left-84)+"px");
$j("#smallOverlayHolder").css("top",(offset.top)+"px");
$j("#smallOverlayHolder").css("backgroundImage",$j("#"+smallID).css("backgroundImage"));
$j("#smallOverlayHolder").html('<a href="'+URL+'" onmouseout="toggleSmallTee(\''+smallID+'\',\''+URL+'\')"></a>');
$j("#smallOverlayHolder").toggle();
}

So the images and links have the onmouseover="toggleSmallTee('the_id', 'http://www.example.com/')" A better way to do it would be to write clean html, then get jQuery to hijack it and insert the behaviour@

$('#smallOverlayHolder a').hover (function () {
toggleSmallTee(/*some way of getting smallID*/, $(this).attr("href"));
})

It's from the file: http://media.typetees.com/js/actions.js
 
Can't say I looked at thier files when I wrote mine but the problem with using any framework is the extra proformance hit loading the actual sheet(s), where as the technique I have written above is only 8 lines, 1 if you obfuscate your .js file. This is a massive reduction in code and has huge proformance benefits.

But even with the framework way it can be modified a lot. The CSS, should be where it belongs, that's not in the .js file but in an id in a .css sheet, this allows it therefore to be cached which again can speed it up dramatically.

For example ~
#divId{position:relative;top:-200px;left:200px}

You then just switch the id on and off on hover and mouseout.

That way you take out the need for the browser to work out how to add the extra changes to the DOM and the fact that it actually needs to work out what the values are in the first place.

If every image is 200 X 200 and the div would be below the image, you just need to move it 200 pixels up and 200 pixels accross or where ever it falls. This would place it above the image.

This therefore speeds it up considerably.

The code reduction is huge and again means less strain on the server and less bandwidth used, if that is also a concern.

Using a framework to achieve this is overkill, and slow IMO.

It is a nice technique but it can be hugly improved, from it's current state.

1. Like showing a animated gif of a loading sequence to show the user something is happening, if the images are not preloaded that is.
2. Add in AJAX and show price information and a short description of the product.
3. If it has ratings show the users ratings.
4. If it has user comments add them as well.
5. If it has user tags add them as well.
6. Preload the images, therefore no wait time, server hit here though, the animated gif loading idea is probably better.

Just some ideas, but it's a shame it wasn't taken further IMO.
This technique, on thier site, does have greater useability benefits from what they have already achieved.

Jaz
 
Back
Top