[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_1447676411623{margin-bottom: -10px !important;} »]
Scroll in & scroll out
[/vc_column_text][vc_column_text letter_spacing= » » css= ».vc_custom_1474974716672{margin-right: 5% !important;} »]
Grace aux fonctionnalités « scroll in » et « scroll out », vous allez pouvoir déclencher des actions en fonction de la navigation dans la page.
[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474974740620{margin-left: 5% !important;} »]
Voici les différentes possibilités de Racontr que nous allons aborder :
[/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 width= »1/3″][vc_column_text letter_spacing= » »]Ce type d’action vous permet, dans un long-format, de lancer des animations dès qu’un élément apparaît ou disparaît à l’écran.
Comme dans l’exemple ci-contre (au scroll), il va être possible de déclencher vos animations votre positionnement dans la page.
Nous allons donc apprendre à faire jouer ou apparaître des éléments, actions, animations et les faire s’arrêter ou disparaître avec cette méthode !
Vous pouvez l’appliquer avec tous les types de médias possibles sur Racontr : images, sons, textes, vidéos…[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »50px »][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]
Première étape : Scroll-in
[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Avec le scroll-in, vos actions se déclencheront lorsque vous entrerez dans la zone où il est actif.
Appliquez vos actions sur un élément, ici par exemple nous avons décider que lorsque la scène se trouve au niveau du hotlink, à l’aide de l’action « scroll-in », le titre et le fond de l’intro changent de position (X).
- Cliquez sur l’élément
- Ajoutez une action au scroll
- Choisissez « scroll-in » ou « scroll-out »
Dans l’aperçu, lorsque vous atteignez l’élément sur lequel les actions au scroll-in ont été affectées, vos animations vont se déclencher !
Vous pouvez alors construire toute votre page sur ce principe en positionnant judicieusement vos blocs textes et alors donner une réelle touche d’interactivité à vos projets.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5648″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463668801627{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]
Scroll-out
[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]A l’inverse du scroll-in, le scroll-out déclenchera des actions lorsque l’élément sur lequel elles sont appliquées ne sera plus visible.
- Cliquez sur l’élément
- Ajoutez une action au scroll
- Choisissez « scroll-out »
Toujours dans le même principe, appliquez vos action scroll-out sur le hotlink concerné, puis choisissez de faire disparaître de la scène le titre et le fond.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5651″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463668826981{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 letter_spacing= » »]
[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text letter_spacing= » »]
[/vc_column_text][/vc_column][/vc_row]
