Baroquest
Framework

Movements

SOURCE: css/movements.css

A Baroquest site should give a sense of movement, ideally in form of smooth and elegant motions. Movements is a collection of elements that utilizes CSS animations and javascript. These include scroll-triggered and other effects for an enhanced user experience.

Some elements may require javascript, which are noted below.

Scroll Fancy

REQUIRED:
js/jquery.3.js
js/scroll-fancy.js


Smoothly animate elements into view based on scrolling. Upon scrolling up or down, elements can transition into view with elegance.

ALTERNATIVE:
js/scroll-fancy-lite.js


Alternatively, a vanilla javascript version is available. However, it only applies the affect once upon scrolling downward.

Include the required aforementioned javascript files before the closing body tag. Then, simply apply the class .scroll-fancy as well as any of the following effect classes listed in the demo below.
Ex: .scroll-fancy.effect-class

.fade-in
.fade-in-bottom
.fade-in-top

.slide-right

.slide-left

.zoom-in

.zoom-out

.dash-in-right

.dash-in-left

.bounce-in

Sequence Scroll

REQUIRED: js/sequence-scroll.js

Animate a list in a sequential fade-in manner when it is scrolled into view. This works on both unordered and ordered lists. Simply apply the class .sequence-scroll.

Example: ul.sequence-scroll

  • Sensual
  • Demure
  • Lovers
  • Voluptuous

Example: ol.sequence-scroll

  1. Columns
  2. Arches
  3. Decorum
  4. Forums

Writhen Scroll

REQUIRED: js/writhen-scroll.js

Inspired by Solomonic columns, Writhen Scroll is a scrolling effect that twists content boxes. Items are listed in vertical columns, which are twisted while scrolling up or down. By default, there are two columns, which becomes one column on screen sizes under 760px.

Simply include the aforementioned javascript file and use the following markup.

MARKUP

<div class="writhen-scroll">
  <div class="twist box"> ...content...</div>
</div>

Optionally, any of the following classes can be added to the .writhen-scroll wrapper to change the number of columns:
.mono - one column
.tri - three columns
.quad - four columns


NOTE: This effect requires that the writhen-scroll container be fixed positioned toward the top. It is advised to use this on a standalone page.

View Demo

Zoom-Image Scroll

REQUIRED: js/zoom-scroll.js

Zoom Scroll adds a scroll-triggered image zooming effect. Images zoom in while scrolling down, and out while scrolling upward.

Simply include the aforementioned javascript file and use the following markup.

MARKUP

<div class="zoom-image-class">
<img src="" data-scroll-zoom />
</div>


Here are some optional classes to use as zoom-image-class:
.polaroid-small - restricts size to 25% width x height
.polaroid-medium - restricts size to 50% width x height
.polaroid-large - restricts size to 75% width x height

Demo: Scroll to see effect

Entrances

Entrances are pure CSS animations that apply smooth entry or exit transitions to elements, such as popovers, modals, or other elements that change from a hidden (non-displayed) to a visible state. The animation duration is specified using the --dur variable. Apply any of the following classes to any element:

  • .blur-in
  • .drop-in
  • .flip-in
  • .glow-in
  • .grow-in
  • .pop-in
  • .roll-in
  • .slide-in
  • .spin-in
  • .splat-in

Demo: Select a Class

Grand Entrance!

DELAYED.
We can delay the animation by applying the class .delayed. The value is specified using the --delay variable.

Canvas Kinetics

The canvas HTML element is ideeal for enhancing a page with elaborately drawn graphics that can employ complex animations and movements.

Simply apply the class .kinetics to a canvas tag to make it fit within it's container (100% width).

Demo: Frou Canvas

REQUIRED:
js/jquery.3.js
js/canvas-frou.js