Foros del Web » Creando para Internet » HTML »

¿Animaciones sin script?

 Estas en el tema de ¿Animaciones sin script? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/02/2011, 18:17
 
Fecha de Ingreso: junio-2008
Mensajes: 51
Antigüedad: 15 años, 10 meses
Puntos: 2
Pregunta ¿Animaciones sin script?
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.
  #2 (permalink)  
Antiguo 13/02/2011, 18:18
 
Fecha de Ingreso: junio-2008
Mensajes: 51
Antigüedad: 15 años, 10 meses
Puntos: 2
Pregunta ¿Animaciones sin script?
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>
  #3 (permalink)  
Antiguo 14/02/2011, 08:14
 
Fecha de Ingreso: junio-2008
Mensajes: 51
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: ¿Animaciones sin script?
¿Nadie me puede ayudar? Por favor.
  #4 (permalink)  
Antiguo 14/02/2011, 08:53
 
Fecha de Ingreso: junio-2008
Mensajes: 51
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: ¿Animaciones sin script?
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

Etiquetas: animacion, chrome, firefox, jquery, tumblr, plantillas, themes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:13.