CuaJs

A holy "cua" library to create a horizontal scrolling page.

(Cua is a Vietnamese word for crab)

crab-moving

A section could be loooooonger than the viewport,

or shorter.

[data-cua-animate]

Elements with "data-cua-animate" attribute get "cua-intersection" class when visible, enabling custom animations.

🦀
/* My animation */ [data-cua-animate="my-animation"] { /* starting state here */ } .cua-intersection[data-cua-animate="my-animation"] { /* ending state here */ }

[data-cua-animate="fade-in"]

/** FADE-IN **/ [data-cua-animate="fade-in"] { opacity: 0; transition: opacity 1s ease-in-out; } [data-cua-animate="fade-in"].cua-intersecting { opacity: 1; }

Available in "cua-animate.css".

[data-cua-animate="tilt"]

Usage

🦀

Adjust via inline style.

🦀

Override via CSS variables.

/** TILT (override) **/ [data-cua-animate="tilt"] { --tilt-max: 30; /* maximum tilt angle in degrees */ --tilt-direction: 1; /* 1 or -1 to control direction */ --tilt-sensitivity: 1; /* higher value = more sensitive to scroll */ }

Available in "cua-animate.css".

[data-cua-animate="mask"]

random pic

Usage

Adjust via inline style.

Override via CSS variables.

/** MASK (override) **/ [data-cua-animate="mask"] { --tilt-range: 50px; /* can be 10% or 20px */ --tilt-direction: -1; /* 1 or -1 to control direction */ --tilt-max: 30; /* maximum tilt angle */ }

Available in "cua-animate.css".

[data-cua-vertical-scroll]

Nested vertical scroll.

Make sure you have "overflow:auto".

Ultricies lectus inceptos scelerisque ut amet quisque ex pretium. Taciti sollicitudin nullam eleifend malesuada fusce montes letius. Tortor metus netus in sodales suspendisse. Suscipit class morbi venenatis mi platea cras arcu nisi vivamus. Scelerisque hac felis sit ultrices cras dis himenaeos sodales mus eget. Class condimentum ullamcorper donec id purus pulvinar parturient. Cubilia viverra malesuada facilisis nascetur himenaeos condimentum quam egestas aptent placerat amet. Accumsan mus erat adipiscing quisque mi elementum curae lorem.

Nascetur eu tellus etiam molestie enim ut scelerisque augue vehicula fringilla tincidunt. Dapibus pellentesque enim montes efficitur penatibus sem mollis. Semper non sapien sagittis amet porttitor urna netus. Venenatis dui nibh nullam ad penatibus donec maecenas. Facilisi aliquam nam odio commodo in mauris quisque si torquent senectus metus.

Etiam ac a aliquam dictumst egestas nunc sociosqu donec sagittis magnis. At inceptos dictumst nunc congue dictum finibus sed. Luctus consectetuer at accumsan commodo sollicitudin curae lacinia. Tempus maecenas nostra posuere nascetur per natoque convallis magna quam fames. Eros ad habitasse lorem cursus nisl torquent eget pulvinar. Eleifend si quisque etiam adipiscing bibendum vulputate velit magna fames. Enim duis nullam et pharetra diam pulvinar etiam ex dictumst. Gravida aptent malesuada bibendum lacinia pulvinar senectus ex himenaeos consectetuer.

Suscipit quisque nam ante rhoncus lorem egestas nascetur congue imperdiet. Amet elementum rhoncus posuere non nostra augue. Curabitur integer facilisi sodales himenaeos leo euismod risus vestibulum bibendum velit nisl. Vitae fusce velit nisi mauris laoreet nascetur non convallis malesuada pede.

Pretium per curae eleifend amet praesent sociosqu felis penatibus. Nibh felis bibendum ad taciti pellentesque vel consequat dictumst eros nam. Hac proin ridiculus sem bibendum mauris aliquet id rutrum mattis suscipit malesuada. Ullamcorper fusce a dictum condimentum elementum porta ipsum velit.

Nisl aptent potenti nec orci ac vel nascetur suscipit maecenas. Condimentum egestas nisi dui vehicula ac volutpat. Convallis vehicula fermentum ullamcorper porta viverra diam consectetur. Sodales eu velit dapibus dolor augue etiam class cras himenaeos consectetur blandit. Sodales dui leo enim venenatis letius maximus rhoncus netus. Scelerisque fermentum facilisis mus sed quisque leo felis. Montes aliquet imperdiet interdum vivamus hendrerit velit. Himenaeos eros netus pulvinar consectetur rutrum.