Chargement aléatoire

par **sombrecape** » 12 juil. 2014, 12:36

Si le pointeur de la souris quitte la zone l'animation s'arrête elle ne charge pas jusqu'au bout c'est pour cela que je pensais que ça serait possible en .css et au lieux d'aléatoire un chargement alterné serait possible ? Une fois twitter une fois facebook toujours la même boucle.

par **Elie** » 12 juil. 2014, 12:23

Euh bah si tu veux que ca recharge, tu le fais en JavaScript ...
Tu fais un tableau des images et des liens et à la fin de l'animation, tu dis d'aller chercher au hasard une nouvelle informations.

Le problème c'est que ton animation est déclanché en CSS donc comment faire pour savoir quand l'animation a disparu ...

par **sombrecape** » 12 juil. 2014, 12:05

Bonjour,

je souhaiterais faire un chargement aléatoire quand on passe le curseur de la souris sur une icône dans mon code c'est l'icône twitter qui se charge mais peut t'on par exemple faire charger une icône facebook si l'on repasse le curseur dessus bien sur il faudrait prendre en compte également du lien de redirection de la page en fonction de l'icône chargé soit redirection sur la page twitter ou la page facebook.

<body>
	<h1>5 mots par image</h1>
      <span></span>
    <p>prochainement</p>
    
    <div id="hover-me"> play
      <div id="base"></div>
       <div id="base-blu">
         <img src="http://img4.hostingpics.net/pics/607947twit.png" width="139" height="139" id="marks" alt="marks">
         <img src="http://img4.hostingpics.net/pics/607947twit.png" width="103" height="103" id="quarter" alt="quarter">
         <a href="http://www.5motsparimage.fr"></a>
       </div>
    </div>      
</body>

	font-size: 1em;
	text-align: center;
	line-height: 160px;
	display: none;
}

#base {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 160px;
	background: -moz-linear-gradient(top, #fefdfe 0%, #fefdfe 25%, #bec0c2 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdfe), color-stop(25%,#fefdfe), color-stop(100%,#bec0c2));
	background: -webkit-linear-gradient(top, #fefdfe 0%,#fefdfe 25%,#bec0c2 100%); 
	background: -ms-linear-gradient(top, #fefdfe 0%,#fefdfe 25%,#bec0c2 100%); 
	background: linear-gradient(to bottom, #fefdfe 0%,#fefdfe 25%,#bec0c2 100%); 
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0px 3px 6px #1e1e1e;
	-moz-box-shadow: 0px 3px 6px #1e1e1e;
	box-shadow: 0px 3px 6px #1e1e1e;
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;
}

#base-blu {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 144px;
	height: 144px;
	background: -moz-radial-gradient(center, ellipse cover, rgb(82,189,230) 8%, rgb(9,83,206) 100%); 
	background: -webkit-gradient(radial, center center, 8px, center center, 100%, color-stop(8%,rgb(82,189,230)), color-stop(100%,rgb(9,83,206))); 
	background: -webkit-radial-gradient(center, ellipse cover, rgb(82,189,230) 8%,rgb(9,83,206) 100%); 
	background: -ms-radial-gradient(center, ellipse cover, rgb(82,189,230) 8%,rgb(9,83,206) 100%); 
	background: radial-gradient(ellipse at center, rgb(82,189,230) 8%,rgb(9,83,206) 100%);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset 6px -10px 9px rgba(9,83,206,0.55);
	-moz-box-shadow: inset 6px -10px 9px rgba(9,83,206,0.55);
	box-shadow: inset 6px -10px 9px rgba(9,83,206,0.55);
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
	opacity: 0;
}

#base-blu #marks {
	position: absolute;
	top: 2px;
	left: 2px;
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
}

#base-blu #quarter {
	position: absolute;
	top: 21px;
	left: 21px;
	opacity: 0;
	z-index: 10;
}

@-webkit-keyframes quarter {
	0% {
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);	
}
	25% {
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
    50% {
	-webkit-transform: rotate(3deg);
	transform: rotate(3deg);	
}
	75% {
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
}   
	100% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

}

@-moz-keyframes quarter {
	0% {
	-moz-transform: rotate(5deg);
	transform: rotate(5deg);	
}
	25% {
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
  50% {
	-moz-transform: rotate(3deg);
	transform: rotate(3deg);	
}
	75% {
	-moz-transform: rotate(-3deg);
	transform: rotate(-3deg);
}   
	100% {
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}

}

@keyframes quarter {
	0% {
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);	
}
	25% {
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
    50% {
	-webkit-transform: rotate(3deg);
	transform: rotate(3deg);	
}
	75% {
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
}   
	100% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

}

#base-blu a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 144px;
	height: 144px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	z-index: 100;
}

#hover-me:hover #base,
#hover-me:hover #base-blu {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	-webkit-transition: all 1s cubic-bezier(.85,.29,.02,.89);
	-moz-transition: all 1s cubic-bezier(.85,.29,.02,.89);
	transition: all 1s cubic-bezier(.85,.29,.02,.89);
}

#hover-me:hover #marks {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	-webkit-transition: all 1s cubic-bezier(.85,.29,.02,.89);
	-moz-transition: all 1s cubic-bezier(.85,.29,.02,.89);
	transition: all 1s cubic-bezier(.85,.29,.02,.89);
}

#hover-me:hover #quarter {
	opacity: 1;
	-webkit-transition: opacity 1.4s ease-in;
	-moz-transition: opacity 1.4s ease-in;
	transition: opacity 1.4s ease-in;
	-webkit-animation: quarter 2s ease-in-out;
	-moz-animation: quarter 2s ease-in-out;
	animation: quarter 2s ease-in-out;
	-webkit-animation-delay: .9s;
	animation-delay: .9s;
}

#hover-me:hover #base-blu {
	-webkit-transition-delay: .25s;
	transition-delay: .25s;
}

#hover-me:hover #marks {
	-webkit-transition-delay: .35s;
	transition-delay: .35s;
}

#hover-me:hover #quarter {
	-webkit-transition-delay: .65s;
	transition-delay: .65s;
}

[javascript]$(window).load(function() {

$("h1").animate({
top:"20%", opacity:"1"
},1100,function() {

$("span").animate({
width:"60px"
}, 900, function() {

$("p").fadeIn(
700, function () {

$("#hover-me").fadeIn(
700, function() {
});

});

});

});

});

[/javascript]

Chargement aléatoire

Répondre

Étendre la vue Revue du sujet : Chargement aléatoire

Re: Chargement aléatoire

Re: Chargement aléatoire

Chargement aléatoire