Foros del Web - Ver Mensaje Individual

MauXXI · #1 (**permalink**) 13/02/2011, 18:17

Hola FDW. No tenía muy claro dónde colocar este post asi que lo siento si cometí un error.

Resulta que encontré una plantilla para Tumblr llamada Rockstar que tiene unas animaciones muy interesantes como la transición entre efectos de los links o los íconos a los costados que al colocar el cursor encima se mueven unos pixeles.

Quise averiguar cómo funcionaba o qué librería usaba la plantilla. Encontré que hace una llamada a jQuery 1.4 y eso es todo. Busqué busqué y busqué dentro del código y no pude encontrar nada que agregue esas animaciones a esos elementos.

Actualmente estoy usando esa plantilla en mi blog de Tumblr y este es el código:

Primera Parte:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="tumblr-theme" content="8959" />
<meta name="google-site-verification" content="Tpn8AwM9sBAnWkHIKTAYrCC7Nfjr03fcCDlQaJDubR0" />
{block:IndexPage}
<title>{Title}{block:SearchPage} &mdash; Search results for: {SearchQuery}{/block:SearchPage}{block:TagPage} &mdash; Posts tagged: {Tag}{/block:TagPage}</title>
<meta name="description" content="{MetaDescription}" />
{/block:IndexPage}
{block:PostSummary}<title>{PostSummary}</title>{/block:PostSummary}
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/j8lh0bq/MCukzsax5/master.css" media="screen" />
<meta name="image:Header" content="http://30.media.tumblr.com/preview.kxhLRMoolZ90vFkI_250.png" />
<meta name="if:About Open By Default" content="0" />
<meta name="text:About Title" content="About this Tumblog" />
<meta name="text:Copyright" content="Copyright &copy; 2010. Remember that it’s not so rockstar to steal from others." />
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics ID" content="" />
<meta name="text:Typekit Kit ID" content="" />
<script type="text/javascript" src="http://use.typekit.com/kyj0tgn.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
	{block:IfAboutOpenByDefault}
	$("#info").hide();
	if ($("body").hasClass("homepage")) { 
		$("#info").show();
	}
	{/block:IfAboutOpenByDefault}
	$("#toolbox-info a").click(function() {
		$("#info").toggle("slow");
		return false;
	});
});
//]]>
</script>
{block:IfTypekitKitID}
<script type="text/javascript" src="http://use.typekit.com/{text:Typekit Kit ID}.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
{/block:IfTypekitKitID}
<style type="text/css">
	{block:IfNotAboutOpenByDefault}#header #info { display:none; }{/block:IfNotAboutOpenByDefault}
	{CustomCSS}
</style>
</head>
<body class="homepage">
<!-- Tumblr Theme #8959 -->
<div id="header" class="node-wrapper">
	<div class="node">
		{block:IfHeaderImage}
		<div class="logo-img">
			<h1>{Title}</h1>
			<a href="/" rel="home"><img src="{image:Header}" alt="{Title}" /></a>
		</div><!-- /.logo -->
		{/block:IfHeaderImage}
		{block:IfNotHeaderImage}
		<div class="logo-txt">
			<h1><a href="/" rel="home">{Title}</a></h1>
		</div><!-- /.logo -->
		{/block:IfNotHeaderImage}
		<ul id="toolbox">
			<li id="toolbox-info"><a href="#info">Info</a></li>
			<li id="toolbox-rss"><a href="{RSS}">RSS Feed</a></li>
			<li id="toolbox-search">
				<form method="get" class="searchform" action="/search">
					<input type="text" name="q" id="q" value="Buscar&hellip;" onfocus="if (this.value == 'Buscar&hellip;') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Buscar&hellip;';}" />
					<input type="submit" name="submit" value="Buscar" />
				</form>
			</li>
		</ul>
		<hr class="fix" />
		<div id="info">
			<div id="about">
				<h2>{text:About Title}</h2>
				<p id="about-picture"><img src="{PortraitURL-128}" alt="Imagen de {Title}" /></p>
				<div class="act-as-p">{Description}</div>
				<div class="act-as-p">{block:Twitter}<a href="http://twitter.com/{TwitterUsername}" class="twitter-enabled">Seguime en Twitter</a>{/block:Twitter}{block:AskEnabled}<a href="/ask">Haceme una pregunta ;)</a>{/block:AskEnabled}</div>
			</div>
			<div id="credits">
				<p>{text:Copyright}</p>
			</div>
		</div>
	</div>
</div>
<hr />
{block:NoSearchResults}
<div class="node-wrapper article">
	<div class="node">
		<div class="header">
            <h2><a href="{Permalink}">Sorry!</a></h2>
			<a href="{Permalink}" class="meta-category">Article</a>
		</div>
		<div class="body">
        	<div class="act-as-p">Your search <strong>"{SearchQuery}"</strong> did not match any posts.</div>
		</div>
		<div class="footer">
			<div class="fix"></div>
		</div>
	</div>
</div>
<hr />
{/block:NoSearchResults}
{block:Posts}
{block:Text}
<div class="node-wrapper article" id="post-{PostID}">
	<div class="node">
		<div class="header">
            {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
			<a href="{Permalink}" class="meta-category">Article</a>
		</div>
		<div class="body">
        	<div class="act-as-p">{Body}</div>
			{block:More}<p>[<a href="{Permalink}">More Reading Here</a>]</p>{/block:More}
		</div>
		<div class="footer">
			{block:Date}
			<ul class="meta">
            	<li class="meta-comments"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> notes</a></li>
			</ul>
			<div class="right">
				<p><a href="{Permalink}">{TimeAgo}</a>{block:IfDisqusShortname} &ndash; <a href="{Permalink}#disqus_thread">comentarios</a>{/block:IfDisqusShortname}</p>
				{block:HasTags}
				<ul class="meta-tags">
					{block:Tags}<li><a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
				</ul>
				{/block:HasTags}
			</div><!-- /.right -->
			{/block:Date}
			<div class="fix"></div>
		</div>
	</div>
</div>
<hr />
{/block:Text}
{block:Photo}
<div class="node-wrapper image" id="post-{PostID}">
	<div class="node">
		<div class="header">
			<a href="{Permalink}" class="meta-category">Image</a>
		</div>
		<div class="body">
			<p>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</p>
            {block:Caption}<div class="act-as-p">{Caption}</div>{/block:Caption}
		</div>
		<div class="footer">
			{block:Date}
			<ul class="meta">
            	<li class="meta-comments"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> notes</a></li>
			</ul>
			<div class="right">
				<p><a href="{Permalink}">{TimeAgo}</a>{block:IfDisqusShortname} &ndash; <a href="{Permalink}#disqus_thread">comentarios</a>{/block:IfDisqusShortname}</p>
				{block:HasTags}
				<ul class="meta-tags">
					{block:Tags}<li><a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
				</ul>
				{/block:HasTags}
			</div><!-- /.right -->
			{/block:Date}
			<div class="fix"></div>
		</div>
	</div>
</div>
<hr />
{/block:Photo}
{block:Photoset}
<div class="node-wrapper image" id="post-{PostID}">
	<div class="node">
		<div class="header">
			<a href="{Permalink}" class="meta-category">Photoset</a>
		</div>
		<div class="body">
			<div class="act-as-p"><div class="object">{Photoset-500}</div></div>
            {block:Caption}<div class="act-as-p">{Caption}</div>{/block:Caption}
		</div>
		<div class="footer">
			{block:Date}
			<ul class="meta">
            	<li class="meta-comments"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> notes</a></li>
			</ul>
			<div class="right">
				<p><a href="{Permalink}">{TimeAgo}</a>{block:IfDisqusShortname} &ndash; <a href="{Permalink}#disqus_thread">comentarios</a>{/block:IfDisqusShortname}</p>
				{block:HasTags}
				<ul class="meta-tags">
					{block:Tags}<li><a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
				</ul>
				{/block:HasTags}
			</div><!-- /.right -->
			{/block:Date}
			<div class="fix"></div>
		</div>
	</div>
</div>
<hr />
{/block:Photoset}
{block:Audio}
<div class="node-wrapper audio" id="post-{PostID}">
	<div class="node">
		<div class="header">
			<a href="{Permalink}" class="meta-category">Audio</a>
		</div>
		<div class="body">
			{block:AlbumArt}<p class="album-art"><img src="{AlbumArtURL}" alt="" /></p>{/block:AlbumArt}
			<p class="audio-player">{AudioPlayer}</p>
            {block:Caption}<div class="act-as-p">{Caption}</div>{/block:Caption}
			<div class="fix"></div>
		</div>
		<div class="footer">
			{block:Date}
			<ul class="meta">
            	<li class="meta-comments"><a href="{Permalink}#notes"><strong>{NoteCount}</strong> notes</a></li>
			</ul>
			<div class="right">
				<p><a href="{Permalink}">{TimeAgo}</a>{block:IfDisqusShortname} &ndash; <a href="{Permalink}#disqus_thread">comentarios</a>{/block:IfDisqusShortname}</p>
				{block:HasTags}
				<ul class="meta-tags">
					{block:Tags}<li><a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
				</ul>
				{/block:HasTags}
			</div><!-- /.right -->
			{/block:Date}
			<div class="fix"></div>
		</div>
	</div>
</div>
<hr />
{/block:Audio}

Lo raro es que las animaciones sólo funcionan en Chrome. Bueno, no sé si sólo porque lo probé únicamente en Chrome y Firefox 4 Beta 11.

Desde ya muchas gracias.