[vc_row][vc_column][vc_empty_space height= »50px »][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ margin_bottom= »0″ min_height= »220″][vc_column width= »1/2″][vc_empty_space height= »30px »][vc_column_text css= ».vc_custom_1478084606604{margin-bottom: -10px !important;} »]

Créez un accordéon interactif

[/vc_column_text][vc_column_text css= ».vc_custom_1478084621415{margin-right: 5% !important;} »]

Cette méthode va vous permettre de réaliser un accordéon interactif au survol de la souris.

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text css= ».vc_custom_1478084656989{margin-left: 5% !important;} »]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top= » »][vc_column width= »5/6″][vc_single_image image= »123″ img_size= »full » alignment= »center »][vc_empty_space height= »10px »][vc_row_inner][vc_column_inner][vc_column_text]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_video link= »https://vimeo.com/103343554″ css= ».vc_custom_1448894712311{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »30px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text]

1. Commencez par importer vos éléments (textes, images) sur la scène et placez-les en position initiale. N’oubliez pas de bien superposer dans la pile des calques vos différents éléments afin qu’ils soient bien visibles.

Il y a deux types de positions pour les éléments de notre tutoriel : la position initiale (celle qu?ils occupent sans survol) et la position au survol (rollover).

2. Dans notre cas, les actions layers n’ont pas la même utilité que d’habitude. Ici, ils servent de repère sur la scène pour bien positionner ses médias. Le 2ème et le 3ème correspondent aux deux tiers de ma scène; le 1er et le dernier aux extremités.

Cette astuce nous permet d’être plus rapide et de ne pas avoir besoin de vérifier le positionnement en X (horizontal) lorsque l’on déplace l’un de nos éléments.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »815″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447769279266{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

1. Sélectionnez une de vos images et placez la dans la position qu’elle occupera au survol de la souris. Vous devrez décaler les autres calques pour que le rendu visuel de cette position soit correct. La position en X de chaque image a changé sur la scène. Placez également le bloc texte de votre image par dessus, dans la position qu’il occupera au survol.
2. Rendez-vous dans le menu des interactions et choisissez une action au survol (rollover) sur l’image dont vous venez de préparer la position.
3. Ici, ajoutez à toutes vos images une position en X (horizontale). Vous remarquez que la position en X proposée est celle que vous venez d’attribuer à vos images en les déplaçant.

Pour les textes, faites disparaître ceux des deux autres images en 400 sur l?axe des Y (vertical), afin qu?ils ne soient pas visibles au survol de cette image.

Validez, repositionnez vos images et textes en initiale et lancez l’aperçu. Vous pouvez désormais reproduire le même principe sur les 2 autres images.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »809″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447769375368{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

1. Vous remarquez dans l’aperçu que lorsque vous survollez vos textes, l’animation au survol ne marche plus. La raison est toute simple : vos blocs textes sont superposés dans la pile des calques par dessus vos images; ils vont donc interrompre l?action survol.
2. Pour résoudre ce problème, cliquez sur l’un de vos blocs textes, puis assignez lui une action au survol (rollover).
3. Selectionnez l’image à laquelle il est liée et l’action à dispatch rollover. Cette action va permettre de simuler sur le texte les actions que vous avez configuré sur son image, rendant alors possible le survol de celui-ci. Reproduisez l’opération sur les deux autres blocs textes et lancez l’aperçu. N’oubliez pas de repositionner tous vos éléments en position initiale. Voila, vous avez crée un accordéon interactif !

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »812″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447769523295{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width= »1/6″][vc_empty_space height= »50px »][vc_widget_sidebar sidebar_id= »sidebar-1″][/vc_column][/vc_row][vc_row padding_top= »0″ padding_bottom= »0″][vc_column][vc_empty_space][vc_single_image image= »132″ img_size= »full » alignment= »center »][/vc_column][/vc_row][vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ margin_bottom= »0″ min_height= »220″][vc_column width= »1/3″][vc_empty_space][vc_column_text]

Plus de
tutoriels :

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text]

• Charger des médias
• Préparer ses médias
• Remplacer un média
• Supprimer un média

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text]

• Importer une vidéo
• Importer un son
• Créer un calque d’action

[/vc_column_text][/vc_column][/vc_row]