Rotation d'une div

Résolu/Fermé
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 - Modifié par powerguitou le 5/01/2013 à 10:03
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 - 7 janv. 2013 à 02:17
Bonjour à tous,

J'ai vue sur un site un effet que j'aime beaucoup et que j'aimerais récupéré, mais je me retrouve avec un code a rallonge,2 fichier "JS" qui sont de sacré morceau.et je ne parle même pas du css,qui est mon gout est une usine a gaz...
J'avoue avoir essayer de nettoyer un peu tout ça et ne pas être un spécialiste ,du coup le code reste toujours assez "lourd"
voici le site ou j'ai vue cette effet:
http://www.ubuntu.com/devices/phone
l'effet qui m'intéresse est en haut de page avec la div qui ce retourne pour afficher une vidéo issue de youtube avec le menu juste en dessous.
Voila si quelqu'un peu me donner un tit coup de main ce serais sympa.
merci a vous

6 réponses

powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
5 janv. 2013 à 09:57
J'oubliais si vous voulez je peut vous fournir le code que j'ai déjà récupéré et nettoyer un peu...mais un peu lol
0
canarder Messages postés 1706 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
5 janv. 2013 à 12:05
Je ne connais pas la classe YUI, mais je t'ai sorti le code qui devrait fonctionner :
<div id="panel">
		<div class="back face">
			<div class="video-background"></div>
			<p><a href="#" class="slideless close-video"><img src="/static/u/img/devices/close-button.png" width="24" height="24" alt="Close icon" />Close the video &rsaquo;</a></p>
		</div>
		<div class="front face">
			<div class="five-col last-col">
				<h1>Ubuntu now fits your phone</h1>
				<h2>Introducing the superphone that&rsquo;s <br/>also a full PC</h2>
				<p><a href="https://www.youtube.com/watch?v=cpWHJDLsqTU" class="slideless show-video"><img src="/static/u/img/devices/play-video-icon.png" width="54" height="50" alt="Play icon" />Watch the video &rsaquo;</a></p>
			</div><!-- /.four-col -->
		</div>
</div>

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
core.flipVideo = function(){
	YUI().use('node', function(Y) {
		if(Y.one('body').hasClass('phone-home')) {
			Y.one('.show-video').on('click',function(e) {
				e.preventDefault();
				Y.one('#panel').addClass('flipped');
				setTimeout(function(){ Y.one('.the-video').set('innerHTML','<iframe width="569" height="320" src="https://www.youtube.com/embed/cpWHJDLsqTU?showinfo=0&hd=1&rel=0&modestbranding=0&autoplay=1" frameborder="0" allowfullscreen></iframe>');Y.one('#panel .back').setStyle('z-index', '50');}, 1000);
			});
			Y.one('.close-video').on('click',function(e) {
				e.preventDefault();
				Y.one('#panel .back').setStyle('z-index', '0');
				Y.one('.the-video').set('innerHTML','');
				Y.one('#panel').removeClass('flipped');
			});
		}
	});
}
</script>

0
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
5 janv. 2013 à 12:26
Merci pour ta réponse mais ça ne fonctionne pas.

J'ai remarquer qu'il faut les deux fichier js et le styles.css

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script src="/static/u/js/core.js"></script>

sans quoi ça ne marche pas ,bon a la limite les js passe encore,mais le css un truc de fous,j'ai commencer a le nettoyer mais c'est un truc a ne jamais voir le bout.
Mais merci d'avoir essayer surtout
0
canarder Messages postés 1706 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
5 janv. 2013 à 20:36
Je n'ai pas trouvé, mais peut-être avec les bons termes de recherches sur YUI (en anglais ?)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
6 janv. 2013 à 13:52
et avec la librairie jQuery ?
fais une recherche jQuery rotation div
0
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
7 janv. 2013 à 02:17
hello,

Oui j'ai regarder du coté de jQuery mais les effet "flip" sont trop simple par rapport a celui la, mais j'ai pas mal continué a nettoyé le code ,je me suis séparé d'un js, presque fini le nettoyage du css et c'est déjà beaucoup mieux qu'avant et surtout beaucoup plus léger.
si besoin est je pourrais vous fournir un lien du code nettoyer.
en tout les cas merci a tous ce qui m'on aider sur le coup là.
bye
0