Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

objets qui tombent sur fond de page

30 appréciations
Hors-ligne
Ce n'est pas un souci mais une simple demande dont j'ai trouvé la réponse pour les articles, mais pas pour les fonds de page. Par fond de page, j'entends la zone qui est au-delà de la page du blog où on communique (ce que le rapid desgn appelle d'ailleurs bien "fond de page" quand il nous demande si on veut le personnaliser).
Donc voilà :  j'ai opté pour un fond de page uni rose pâle effet "tissé", fond de page qui est discret en écran non large, mais qui, quand on est sur un écran large, "vampirise" un peu la zone de communication, car du coup il prend beaucoup d'importance
Pour diminuer ce coté vampire j'ai 2 solution :soit lui donner une couleur qui se fonde à celle de ma zone texte (donc un blanc 80%, mais c'est tristounet) soit faire en sorte que ce fond "poids mort"  devienne "expressif" et participe à la communication. Par exemple  y faire tomber des pluies d'objets (roses, feuilles, coeurs, autres, selon la saison)  exemple en y mettant des gifs (pluie de fleurs ou autres, selon saisons)
Est-ce possible à cet endroit ?
Merci

1471 appréciations
Hors-ligne



Code à mettre dans la bordure de page.

( mettre une image de petite taille dans le code en gras)

<script type="text/javascript">
//<![CDATA[

var image="http://ADRESSE IMAGE"; // Indiquez l'adresse URL de l'image à faire pleuvoir
var pagelink="http://google.fr" // Indiquez l'adresse de la page à lier aux images qui pleuvent
var no = 10; // Nombre d'images à faire pleuvoir
var time = 0; // Configurez le nombre de secondes au bout duquel la pluie cesse (0=la pluie ne s'arrête jamais)
var speed = 30; // Réglez la vitesse à laquelle pleuvent les images
var i, dwidth = 900, dheight =500;
var nht = dheight;
var toppos = 0;

if(document.all){
var ie4up = 1;
}else{
var ie4up = 0;
}

if(document.getElementById && !document.all){
var ns6up = 1;
}else{
var ns6up = 0;
}

function getScrollXY() {
var scrOfX = 10, scrOfY = 10;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY =window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement &&
( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

var timer;

function ranrot()
{

var a = getScrollXY()
if(timer)
{
clearTimeout(timer);
}
toppos = a[1];
dheight = nht+a[1];
//alert(dheight);

timer = setTimeout('ranrot()',2000);
}

ranrot();

function iecompattest()
{
if(document.compatMode && document.compatMode!="BackCompat")
{
return document.documentElement;
}else{
return document.body;
}

}
if (ns6up) {
dwidth = window.innerWidth;
dheight = window.innerHeight;
}
else if (ie4up) {
dwidth = iecompattest().clientWidth;
dheight = iecompattest().clientHeight;
}

nht = dheight;

var cv = new Array();
var px = new Array(); //position variables
var py = new Array(); //position variables
var am = new Array(); //amplitude variables
var sx = new Array(); //step variables
var sy = new Array(); //step variables

for (i = 0; i < no; ++ i) {
cv[i] = 0;
px[i] = Math.random()*(dwidth-100); // set position variables
py[i] = Math.random()*dheight; // set position variables
am[i] = Math.random()*20; // set amplitude variables
sx[i] = 0.02 + Math.random()/10; // set step variables
sy[i] = 0.7 + Math.random(); // set step variables
document.write("<div id="dot"+ i +"" style="position: absolute; z-index "+ i +"; visibility: visible; top: 15px; left:
15px;"><a href='"+pagelink+"'><img src='"+image+"'
border="0"></a></div>");

}

function animation() { // animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
py[i] += sy[i];
if (py[i] > dheight-50) {
px[i] = Math.random()*(dwidth-am[i]-100);
py[i] = toppos;
sx[i] = 0.02 + Math.random()/10;
sy[i] = 0.7 + Math.random();
}
cv[i] += sx[i];
document.getElementById("dot"+i).style.top=py[i]+"px";
document.getElementById("dot"+i).style.left=px[i] + am[i]*Math.sin(cv[i])+"px";
}
atime=setTimeout("animation()", speed);

}

function hideimage(){
if (window.atime) clearTimeout(atime)
for (i=0; i<no; i++)
document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
animation();
if (time>0)
setTimeout("hideimage()", time*1000)
}
animation();

//]]>
</script>




30 appréciations
Hors-ligne
Merci Simon, je note ce code précieusement. Et donc alors je note que cette zone s'appelle "bordure" (je croyais que les bordures étaient les bandes où se trouvent les menus latéraux. Faut que je révise mon papiclic-pour-tous (qui a des schémas bien faits sur les zones d'une page de blog).

Euh, PS : ce code, c'est un code html ou CSS ? Quand tu dis "à mettre dans la bordure de page, ça veut dire que je crée une règle "bordure de page" (si c'est du CSS, quel est le nom de code pour "bordure de page" en langage CSS, et si c'est du html, j'y vais via le composeur de quelle page, la page d'accueil ?)Merci (encore)

Dernière modification le mardi 09 Juin 2015 à 20:07:27

1471 appréciations
Hors-ligne


Dans la gestion il y a les bordures de pages haut et bas donc il faut coller ce code dedans.



30 appréciations
Hors-ligne
Mer sea
Ce sujet est fermé, vous ne pouvez pas y répondre
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Petits soucis.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 5860 autres membres