¿Animaciones sin script?

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.

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

Segunda parte del código:

Código HTML:

{block:Quote}
<div class="node-wrapper quote" id="post-{PostID}">
	<div class="node">
		<div class="header">
			<a href="{Permalink}" class="meta-category">Quote</a>
		</div>
		<div class="body">
			<div class="real-quote">
				<blockquote>{Quote}</blockquote>
			</div>
			{block:Source}<div class="act-as-p">{Source}</div>{/block:Source}
		</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:Quote}
{block:Link}
<div class="node-wrapper link" id="post-{PostID}">
	<div class="node">
		<div class="header">
            <h2><a href="{URL}" {Target}>{Name}</a></h2>
			<a href="{Permalink}" class="meta-category">Link</a>
		</div>
		<div class="body">
			{block:Description}<div class="act-as-p">{Description}</div>{/block:Description}
		</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:Link}
{block:Chat}
<div class="node-wrapper chat" 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">Chat</a>
		</div>
		<div class="body">
			<div class="chat">
                <div class="lines">
					{block:Lines}<div class="line {Alt}">{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</div>{/block:Lines}                             
				</div>
			</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:Chat}
{block:Answer}
<div class="node-wrapper chat answer" id="post-{PostID}">
	<div class="node">
		<div class="header">
			<a href="{Permalink}" class="meta-category">Chat</a>
		</div>
		<div class="body">
            <div class="real-question">{Question}</div>
            <div class="real-asker"><img src="{AskerPortraitURL-24}" alt="" />{Asker}</div>
			<div class="act-as-p">{Answer}</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:Answer}
{block:Video}
<div class="node-wrapper video" id="post-{PostID}">
	<div class="node">
		<div class="header">
			<a href="{Permalink}" class="meta-category">Video</a>
		</div>
		<div class="body">
			<div class="act-as-p"><div class="object">{Video-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:Video}
{/block:Posts}
{block:Permalink}
{block:IfDisqusShortname}
<div class="node">
	<div id="disqus_thread"></div>
</div>
{/block:IfDisqusShortname}
{/block:Permalink}
{block:PostNotes}
<div class="node">
	<div id="notes">
		<h3>Notes:</h3>
		{PostNotes}
	</div><!-- /#notes -->
</div>
{/block:PostNotes}
{block:HasPages}
<div class="node-wrapper pages">
	<div class="node">
		<ul>
			{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
		</ul>
		<hr class="fix" />
	</div>
</div>
{/block:HasPages}
<div class="node-wrapper paging">
<div class="inner">
	<div class="node">
		<p>Page {CurrentPage} of {TotalPages}</p>
		<ul id="paging">
            <li id="paging-next">{block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}</li>
            <li id="paging-prev">{block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}</li>
		</ul>
		<div class="fix"></div>
	</div>
</div>
</div>
{block:Permalink}
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://disqus.com/forums/{text:Disqus Shortname}/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
//]]>
</script>
{/block:IfDisqusShortname}
{/block:Permalink}
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
	var links = document.getElementsByTagName('a');
	var query = '?';
	for(var i = 0; i < links.length; i++) {
	if(links[i].href.indexOf('#disqus_thread') >= 0) {
		query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
	}
	}
	document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
{block:IfGoogleAnalyticsID}
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{text:Google Analytics ID}']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
//]]>
</script>
{/block:IfGoogleAnalyticsID}
</body>
<!--
    This Tumblr Theme and all of its CSS, Javascript,
    and media assets are subject to Tumblr's Terms of Service:

    http://www.tumblr.com/terms_of_service
-->
</html>

MauXXI · #3 (**permalink**) 14/02/2011, 08:14

¿Nadie me puede ayudar? Por favor.

MauXXI · #4 (**permalink**) 14/02/2011, 08:53

Lo descubrí. Usa "transition" que está mejor explicado aquí http://css3.bradshawenterprises.com/#how2transitions y la razón por la que no se ve en Firefox es porque sólo usa "-webkit-transition".
Gracias Yo!!! :D