翻轉業面

demo

Our plugin adds a new element in your arsenal called Row Scroll Animation. Attaching this element into your rows gives you the ability to add entrance and exit animations to them.

Scroll down to see it in action.

[row_scroll entrance=”cube” exit=”cube” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Cube Animation

Keep scrolling down to see the full effect

[row_scroll entrance=”cube” exit=”cube” title=”” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=”” entrance_offset=”” exit_offset=””]

Chain Animations with Multiple Rows to Achieve Great Effects

This is a normal row with a text element, some spacers and the new Row Scroll Animation element.

[row_scroll entrance=”cube” exit=”cube” title=”” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=”” entrance_offset=”” exit_offset=””]

Designs Options Retained

As with our other plugins, we integrate well with Visual Composer’s features. Your design options will still work as normal. For example, we’ve placed a background image here.

[row_scroll entrance=”fly-up” exit=”fly-up” title=”Test” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Now for the other animations…

Fly Up

[row_scroll entrance=”fly-left” exit=”fly-left” title=”Test” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Fly Left

[row_scroll entrance=”fly-right” exit=”fly-right” title=”Test” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Fly Right

[row_scroll entrance=”scale-smaller” exit=”scale-smaller” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Scale Smaller

[row_scroll entrance=”fade” exit=”scale-smaller” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

You Can Choose Different Entrance & Exit Animations

For example, this one fades in on enter, then scale smaller on exit.

[row_scroll entrance=”carousel” exit=”carousel” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Carousel

[row_scroll entrance=”carousel” exit=”none” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Carousel Again

But we didn’t add any exit animation, just the entrance animation

[row_scroll entrance=”stick” exit=”stick” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Stick on Enter & Exit

To make the sticking animation more noticeable, here’re some dummy content.

Ei sonet vidisse ius. Vel meis alterum dolorem ea, deleniti iracundia est ne. Recteque expetendis referrentur in ius. Menandri philosophia qui ea, ius ei solet insolens, ius suas elitr invidunt ei. Vis ex atomorum scribentur appellantur. Habemus forensibus mei no.
Qui ei vero doctus legimus. Periculis persequeris eu vel. Ignota sententiae te vim, nam magna dicam ex. Duo ut tempor aliquando, te has officiis complectitur, at vix sapientem periculis accommodare. Ne autem consul commodo vis. Ad perpetua constituto vim. Ex nam vitae primis, an rebum movet per.
cameraLabitur denique platonem et eos. Vix quando mollis verear ei, scaevola quaestio sit an. Usu case ferri repudiandae ei. Volumus copiosae philosophia pri eu, ne urbanitas sententiae est, mea feugait consulatu eu. Moderatius instructior qui id, ne vel eloquentiam definitiones, eu delenit meliore conceptam eos. Ex modo facer iudico nam, ea sea libris deleniti.
Id eum inani indoctum expetenda. Te duo impedit facilis. Ius at iisque commodo habemus, nam at conceptam persequeris. Ea fabellas postulant vix, minim consul copiosae per id, id per timeam regione temporibus. Ipsum perpetua eu cum, officiis patrioque has ad, mundi primis phaedrum no mei. Sit ceteros omnesque delicata no. Cu vel facilis nominavi nominati, quo ex fabellas vituperatoribus.
Et vim omnesque singulis. Ad vel omnes repudiandae, aperiri numquam at quo. Lorem eloquentiam te mei. Mea dicam euismod bonorum ex.
Liber solet ridens quo ad, ne mei delicata quaerendum. Ut sed menandri ocurreret mediocritatem, ea minim alienum vituperata eum. Vix ne ullum omnium laoreet. Te eirmod delenit dolores eam, laudem impedit argumentum mei ut, minim putent oblique mea no. Ad his euismod impedit facilisis, suavitate mnesarchum at nam, vim at doctus referrentur. Definiebas quaerendum vel et, semper maiorum et vel, est eu periculis prodesset.
cherryAt qui scripserit reprehendunt. Error abhorreant sit ad, mundi gubergren in est. No pro assum dictas, ut usu legendos persequeris. Vidisse ornatus sed no, iusto diceret accumsan pro te. Nam ne nulla perfecto delicatissimi, id has elit oporteat deterruisset. Pri partiendo adversarium repudiandae te, qui elitr deseruisse et, munere iuvaret sit te.
Sale fugit eu duo, usu impetus tibique hendrerit ut. His stet dicant ad, meis error signiferumque vim ut. Ad scriptorem consequuntur pro, pri tempor nusquam et, ius in doming definitiones. Id vidit consul gloriatur vel, illud audiam at sea. Diceret corrumpit interpretaris cu vim, augue fierent detraxit no duo. Ut assum consectetuer per, te hinc commodo invenire vix. Et pri melius constituto, maiorum verterem delicata sed no, qui an platonem principes gloriatur.
Eam quis choro suavitate at, eu wisi simul patrioque has. Vim natum fugit oblique cu, audire euismod intellegam vis no. Ei qui sint accumsan omittantur, ius ea possim scaevola. Dico facer minim ex quo. Efficiendi interesset mei no. Eum vitae commodo bonorum ne, porro prompta ut eos. Ea mel sonet diceret, id detracto conclusionemque has, ut case atqui inimicus mea.
No vix oporteat phaedrum. Te quo probo officiis praesent, per quem quot ad. Vis falli nihil ut, usu et utamur perpetua maiestatis. Ut vim mucius semper, id putent posidonium nam.

[row_scroll entrance=”content-fade” exit=”stick-fly-left” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Stick & Fly Left

This makes your row at least full-height.

[row_scroll entrance=”stick” exit=”stick-fly-right” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Stick & Fly Right

The entrance is stick to bottom then stick & fly right upon exit. Pairing this with other rows with similar effects make your rows look like a slide show.

[row_scroll entrance=”stick” exit=”stick-fly-down” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Stick & Fly Down

The entrance is stick to bottom then stick & down right upon exit

[row_scroll entrance=”stick” exit=”content-fade” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Now Let’s Only Animate the Content

You can make the content fade, fly up, left & right. This one fades on exit.

Ei sonet vidisse ius. Vel meis alterum dolorem ea, deleniti iracundia est ne. Recteque expetendis referrentur in ius. Menandri philosophia qui ea, ius ei solet insolens, ius suas elitr invidunt ei. Vis ex atomorum scribentur appellantur. Habemus forensibus mei no.
Qui ei vero doctus legimus. Periculis persequeris eu vel. Ignota sententiae te vim, nam magna dicam ex. Duo ut tempor aliquando, te has officiis complectitur, at vix sapientem periculis accommodare. Ne autem consul commodo vis. Ad perpetua constituto vim. Ex nam vitae primis, an rebum movet per.
Labitur denique platonem et eos. Vix quando mollis verear ei, scaevola quaestio sit an. Usu case ferri repudiandae ei. Volumus copiosae philosophia pri eu, ne urbanitas sententiae est, mea feugait consulatu eu. Moderatius instructior qui id, ne vel eloquentiam definitiones, eu delenit meliore conceptam eos. Ex modo facer iudico nam, ea sea libris deleniti.
Id eum inani indoctum expetenda. Te duo impedit facilis. Ius at iisque commodo habemus, nam at conceptam persequeris. Ea fabellas postulant vix, minim consul copiosae per id, id per timeam regione temporibus. Ipsum perpetua eu cum, officiis patrioque has ad, mundi primis phaedrum no mei. Sit ceteros omnesque delicata no. Cu vel facilis nominavi nominati, quo ex fabellas vituperatoribus

[row_scroll entrance=”content-fly-left” exit=”content-fly-right” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Content Fly Left on Enter & Fly Right on Exit

Ei sonet vidisse ius. Vel meis alterum dolorem ea, deleniti iracundia est ne. Recteque expetendis referrentur in ius. Menandri philosophia qui ea, ius ei solet insolens, ius suas elitr invidunt ei. Vis ex atomorum scribentur appellantur. Habemus forensibus mei no.
Qui ei vero doctus legimus. Periculis persequeris eu vel. Ignota sententiae te vim, nam magna dicam ex. Duo ut tempor aliquando, te has officiis complectitur, at vix sapientem periculis accommodare. Ne autem consul commodo vis. Ad perpetua constituto vim. Ex nam vitae primis, an rebum movet per.
Labitur denique platonem et eos. Vix quando mollis verear ei, scaevola quaestio sit an. Usu case ferri repudiandae ei. Volumus copiosae philosophia pri eu, ne urbanitas sententiae est, mea feugait consulatu eu. Moderatius instructior qui id, ne vel eloquentiam definitiones, eu delenit meliore conceptam eos. Ex modo facer iudico nam, ea sea libris deleniti.
Id eum inani indoctum expetenda. Te duo impedit facilis. Ius at iisque commodo habemus, nam at conceptam persequeris. Ea fabellas postulant vix, minim consul copiosae per id, id per timeam regione temporibus. Ipsum perpetua eu cum, officiis patrioque has ad, mundi primis phaedrum no mei. Sit ceteros omnesque delicata no. Cu vel facilis nominavi nominati, quo ex fabellas vituperatoribus

[row_scroll entrance=”content-fly-up” exit=”rotate-forward” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Content Fly Up on Enter

[row_scroll entrance=”rotate-forward” exit=”rotate-back” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=”” entrance_offset=”20″ exit_offset=”20″][video_row video=”KL6jwnIln6w” mute=”mute” force_hd=”forcehd” aspect_ratio=”16:9″ opacity=”100″]

It also works along with our other VC plugins,

Check Out this Video Background

This video background is provided by our Video & Parallax Backgrounds For Visual Composer plugin and is not included.

[row_scroll entrance=”rotate-forward” exit=”rotate-forward” title=”” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=”” entrance_offset=”” exit_offset=””]

…and also we have some rotations

3D Rotate Forward

These are like the cube effect, but not too drastic

[row_scroll entrance=”rotate-back” exit=”rotate-back” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

3D Rotate Back

[row_scroll entrance=”carousel” exit=”none” title_color=”#ffffff” title_bg_color=”#22a7f0″ body_overflow=””]

Give Our Backend a Spin

Thanks for checking out our demo, you can click on the Launch Demo button above to create your own sandbox where you can play around with our plugin.