Salut,
Ce n'est pas cette page que j'avais vu mais celle que tu montres a quand même un poids non justifié. (scripts inutiles)
a écrit :
Voila ce que j'ai reussi a faire, par contre la page tremblote un peu (avec scriptaculous) :
http://daleetstudios.free.fr/dc/index.php?2006/12/11/1-first-post
Je te propose de faire un essai sur cette page... Dans mon exemple aussi, ça tremblote un peu, mais en JS, il est assez difficile de faire une animation aussi fluide qu'avec Flash... (si tant est que ce soit possible, ce dont je doute...)
@Eldebaran : Si tu passes par là et que tu as un peu de temps, il me semble que tu avais fait quelquechose de plus fluide justement...
Déjà, premier truc, tu supprimes ceci :
<script type="text/javascript" src="/dc/ecrire/tools/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/dc/ecrire/tools/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/dc/ecrire/tools/lightbox/js/lightbox.js"></script>
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects" type="text/javascript"></script>
Tout de suite, on respire...
Ensuite, tu intègres :
<div id="trackbacks">
<h3 id="tb">La discussion continue ailleurs</h3>
<p>Aucun rétrolien.</p>
<p>Pour faire un rétrolien sur ce billet :
http://daleetstudios.free.fr/dc/tb.php?id=1</p>
</div>
dans la div qui est juste au-dessus ( <div id="comments"></div> )
De là, tu crées un nouveau fichier js que tu lies comme ça par exemple :
<script type="text/javascript" src="/js/displayProgress.js"></script>
et dans ce fichier, tu mets ceci :
/**
* Test du script
*/
try {
/**
* Création d'un objet
*/
var oO =
{
/**
* Chargement rapide
* @param func: (object) Fonction chargée au chargement de la page
*/
_FastLoadEvent:
function(func)
{
if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);
/*@cc_on @*/
/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
var script = document.getElementById('__ie_onload');
script.onreadystatechange = function()
{
if(this.readyState === 'complete') func();
};
/*@end @*/
if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
},
/**
* Attache une fonction à un événement
* @param oElem: (object) Element générateur
* @param sEvType: (string) Evénement déclencheur
* @param fn: (function) Fonction attachée
* @param bCapture: (boolean) Mode de transmission
*/
_Connect:
function(oElem, sEvType, fn, bCapture)
{
oElem.addEventListener?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent?
oElem.attachEvent('on' + sEvType, fn):
false;
},
/**
* Obtention de l'élément qui génère l'événement
* @param e: (object) Evénement
* @return Element souhaité
*/
_GetTarget:
function(e)
{
var oTarget = e.target || e.srcElement;
if(oTarget.nodeType === 3) oTarget = oTarget.parentNode;
return oTarget;
},
/**
* Annulation de la transmission de l'événement au clic sur un élément
* @param e: (object) Evénement
* @return Annulation de la transmission de l'événément aux autres éléments
*/
_CancelClick:
function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
return false; // Pour Safari
}
else if(window.event && window.event.cancelBubble && window.event.returnValue)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
else return false;
},
/**
* Contrôle d'affichage/masquage d'un élément à partir d'un lien
* @param sIdCont: (string) id du conteneur
* @param sId: (string) id de l'élément
*/
_CtrlDisplay:
function(sIdCont, sId)
{
var oElem = document.getElementById(sId),
oA = document.createElement('a'),
oTxt = document.createTextNode('Montrer les commentaires');
oA.href = '#montrer';
oA.appendChild(oTxt);
document.getElementById(sIdCont).insertBefore(oA, oElem);
oO.HautTot = oElem.offsetHeight + Math.round(oElem.offsetHeight/10);
oElem.style.height = 0;
oElem.style.overflow = 'hidden';
oO._Connect(oA, 'click', function(e) { oO._Display(oElem, e); return oO._CancelClick(e); }, false);
},
/**
* Affichage/masquage d'un élément
* @param oElem: (object) Element
* @param e: (object) Evénement
*/
_Display:
function(oElem, e)
{
var oTarget = oO._GetTarget(e);
if(oTarget.firstChild.data === 'Montrer les commentaires')
{
oTarget.firstChild.data = 'Cacher les commentaires';
oTarget.href = '#cacher';
oO._Deroule(oElem.id, 0, oO.HautTot, 10);
oO._ChgOpak(oElem.id, 0, 100, 500);
}
else
{
oTarget.firstChild.data = 'Montrer les commentaires';
oTarget.href = '#montrer';
oO._Deroule(oElem.id, oO.HautTot, 0, 10);
oO._ChgOpak(oElem.id, 100, 0, 500);
}
},
/**
* Cross-browser sur l'opacité d'un élément
* @param opak: (integer) Valeur de l'opacité
* @param id: (string) id de l'élément
*/
_CrossOpak:
function(opak, id)
{
var oElemStyle = document.getElementById(id).style;
oElemStyle.opacity = (opak / 100);
oElemStyle.MozOpacity = (opak / 100);
oElemStyle.KhtmlOpacity = (opak / 100);
oElemStyle.filter = "alpha(opacity=" + opak + ")";
},
/**
* Modification de l'opacité d'un élément
* @param id: (string) id de l'élément
* @param opakStart: (integer) Opacité de départ
* @param opakEnd: (integer) Opacité d'arrivée
* @param ms: (integer) Temps
*/
_ChgOpak:
function(id, opakStart, opakEnd, ms)
{
var speed = Math.round(ms / 100);
var timer = 0;
var i;
if(opakStart > opakEnd)
{
for(i = opakStart; i >= opakEnd; i--)
{
setTimeout("oO._CrossOpak(" + i + ",'" + id + "')", (timer * speed));
timer++;
}
}
else if(opakStart < opakEnd)
{
for(i = opakStart; i <= opakEnd; i++)
{
setTimeout("oO._CrossOpak(" + i + ",'" + id + "')", (timer * speed));
timer++;
}
}
},
/**
* Variation de hauteur progressive d'un conteneur
* @param id: (string) id de l'élément
* @param initHeight: (integer) hauteur de départ
* @param finalHeight: (integer) hauteur d'arrivée
* @param interval: (integer) Intervalle de répétition
*/
_Deroule:
function(id, initHeight, finalHeight, interval)
{
var oElem = document.getElementById(id);
if(!oElem) return;
if(typeof(initHeight || finalHeight || interval) != 'number') return;
if(oElem.movement) clearTimeout(oElem.movement);
if( !oElem.style.height ) oElem.style.height = parseInt(initHeight) + 'px';
var iDimY = parseInt(oElem.style.height);
if(iDimY == finalHeight) return;
if(iDimY < finalHeight)
{
var dist = Math.ceil((finalHeight - iDimY)/10);
iDimY = iDimY + dist;
}
if(iDimY > finalHeight)
{
var dist = Math.ceil((iDimY - finalHeight)/10);
iDimY = iDimY - dist;
}
oElem.style.height = iDimY + 'px';
var repeat = "oO._Deroule('" + id + "'," + initHeight + "," + finalHeight + "," + interval + ")";
oElem.movement = setTimeout(repeat, interval);
return;
}
};
/**
* Lancement du script
*/
oO._FastLoadEvent(function() { oO._CtrlDisplay('content', 'comments'); });
}
/**
* Annulation du script s'il y a une erreur
*/
catch(e) {};
De là, tu repostes et on regarde le résultat...
(Si tout va bien, tu gagnes pas loin de 100ko)
Modifié par koala64 (09 Jan 2007 - 10:01)
, il faut adapter les temps de modification de l'opacité :
A moins que le compteur ne se soit emballé, je n'ai pas vu pire jusqu'alors... (le plus gros travail à mener étant du côté de tes images)
, c'est vraiment que j'aimerait qu'on me dise exactement quel code il faut mettre et ou, mais je veut bien essayer, comme tu dis quitte a faire des erreurs.