Brutalize elements with some CSS and javascript-based effects.
requires:
core/css/bfx.css
Baffle adds an animated obfuscation effect to any text. Reload page to see effect. Apply these baffling classes!
REQUIRES:
core/jab/bfx/baffle.js
Baffles once upon page load
Baffles longer, for 3 seconds
Baffles for a prolonged duration
Baffles endlessly
Baffles once upon page load
Baffles longer, for 3 seconds
Baffles for a prolonged duration
Baffles endlessly
(uses --accent variable)
Tumble text characters either forward, backwards, or both! The tumble animation starts upon page load.
REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/tumbletext.js
Classes
.tumbletext - apply to any text element
.forwards - tumbles all characters forward
.backwards - tumbles all characters backward
.mixed - combines both forward and backwards, alternating characters
EXAMPLE: .tumbletext.mixed
TIP: Make sure there is at least 1em of padding on the bottom of any parent element that contains tumbled text.
Apply this class to any text element. The animation pauses upon hover.
REQUIRES:
core/jab/bfx/choptext.js
Truncate a paragraph of text to a preset number of words. Even if there are a fewer number of words, an elipsis (...) will be appended to the end of the truncated text. Apply any of these classes to any text to truncate it:
.chop-8
.chop-16
.chop-32
.chop-64
.chop-128
In this example, we wish to limit a paragraph of text to 16 words.
Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset.
In this example, we wish to limit a paragraph of text to 64 words.
Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset.
Deconstructed Text is a pure CSS text effect that slides text in with a looping "deconstruction" effect. The animation slides text from the right, pauses, then slides to the left. Four text divs are animated in, which can have additional classes applied to them for further customization.
Markup
<div class="deconstructed-text">
CUSTOM TEXT
<div>CUSTOM TEXT</div>
<div>CUSTOM TEXT</div>
<div>CUSTOM TEXT</div>
<div>CUSTOM TEXT</div>
</div>
REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/divisive-text.js
Divide text elements in half, such as paragraphs and headings. Using the br tag, lines of text can alternate between two columns. This is a unique text layout effect for creating a distinctive typography block.
By default, the division gap is set in the middle of the parent element, so that each column is 50% wide. Division minority makes the first column 25% wide, and the second 75% wide. Division majority switches these values. The division gap has a default of 20px wide, which can be expanded to 96px (1 inch).
Classes
.divisive-text
.divisive-text-minority
.divisive-text-majority
.divisive-text-gap
.divisive-text-gap-minority
.divisive-text-gap-majority
Markup
<p class="divisive-text">Line 1<br />Line 2<br />Line 3</p>
The above markup will output:
Line 1
Line 2
Line 3
Divisive Text works with any text element, such as blockquotes, paragraphs, and h tags.
Styling
Divisive Text divides up text into div elements. Below is an example of custom CSS for the rendered element:
.divisive_right .divisive_line {
background: #0000ff; color: #fff;
}
.divisive_left .divisive_line {
background: #ff0000; color: #fff;
border-right: 4px solid #8000ff;
}
In the following examples, we'll use the above custom CSS. We'll also apply various other classes to demonstrate some options.
.divisive-text
.divisive-text-minority
The minority
will never be supported nor accepted by the majority!!
.divisive-text-majority
The majority rules are often rejected by
the minority!!
REVOLUTION!
.divisive-text-gap
Divisiveness only causes hatred and disunity
which creates an ever-growing
G A P
.divisive-text-gap-minority
Minorities
are perceived as inappropriate by the majority.
.divisive-text-gap-majority
The majority will always cancel and reject
the minority.
REQUIRES:
core/jab/bfx/fittext.js
Fittext makes any text aggressively responsive, and scales the text in proportion to the window width.
.fittext - Best scales text to fit within container.
Brutalist Framework 3
.fittext-c - Compress scaling of text size.
Brutalist Framework 3
.fittext-cc - Conservative compression of scaling text.
Brutalist Framework 3
.fittext-x - Expands scaling text aggressively.
Brutalist Framework 3
.fittext-xx - Extreme expansion of scaling text!!
Brutalist Framework 3
REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/curvetext.js
Warp your text into curves, spirals, circles, and waves! Works best on paragraphs. All are fully responsive. Apply these classes for these effects:
.arc-text
Arc Text allows you to create a responsive arch of text!
.bezier-text
Bezier Text allows you to create curvy responsive text!
.circle-text
Circle Text allows you to create a responsive circle of text!
.wave-text
Wave Text allows you to create a responsive wave of text!
.spiral-text
Spiral Text allows you to become sucked into another dimension! It is fully responsive, too!
All animations are pure CSS, and are useful for drawing attention toward an element.
Add a glitch effect to any element! Works on images and text, or even entire areas! Simply apply the following class to any element:
.glitch
Glitched Circle Image
This is a rather glitchy paragraph. You could even baffle all your firking enemies!
shift-glitch is a more aggressive glitch effect than glitch.
NOTE: .glitchtext works only on text.
You can also add -h to apply the effect upon hover.
Blink is back! Formerly known as the <blink> HTML tag, blink is now available as a CSS animation! Apply theses classes to blink any element!
ALERT!
ALERT!
ALERT!
////////
WARNING!!!!
////////
Here is a fast-blinking span and image:
Get Your Blinker Fluid NOW!
Get Your Blinker Fluid!
Bounce any element by applying the following class:
.bouncy
TIP: The parent element containing the bounce element should be at least 200px.
Apply a throbbing, pulsing effect. It's CSS-based, so no javascript is needed. Simply apply this class to any element:
.throb
.throb-throw
Spin any element constantly. Apply these classes:
Rotate Text is a jQuery plugin that rotates text within an element.
REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/rotate-text.js
Rotate Text uses data attributes to configure the settings. You will need to apply a unique ID to each individual Rotate Text element. The markup is as follows:
<div id="rotate-text-1" class="rotator" data-rotate-interval="3000" data-rotate-animate="fadeIn,rollOut">
/* element to render rotated text */
<p class="rotate-arena"></p>
/* specify list of rotated text */
<ul>
<li>First Text Phrase</li>
<li>Second Phrase of Text</li>
<li>Last Text Phrase</li>
</ul>
</div>
data-rotate-interval
[3000 = 3 seconds until next rotation]
data-rotate-animate
[Animations use animate.css. Visit animate.style for reference.]
Rotate text within a <span> element.
Rotate text within a header element, with fadeIn and fadeOut animation.
Rotating paragraph with data-rotate-animate left unspecified.
Animated backgrounds are based purely on CSS. Apply any of these classes to any element:
This uses the --color1 and --color2 color variables.
Or, just .dotgrid to disable the animation.
Some effects for creating chaos!
Let's get ready to rumble!
REQUIRES:
core/jab/jquery.3.js
core/jab/plugins/rumbler.js
Brutalize any element by making it rumble! Simply apply the following classes to any element.
Stop Constant Rumble
By applying these classes together, users can stop a constantly rumbling element:
.rumble.strumble - rumble constantly, stop upon click
.rumble.sthrumble - rumble constantly, stop upon hover
.rumble
Constant rumbling!
.prumble
Pulse rumble, constantly
.drunk
Aggressive constant rumble
.hyper
Extra aggressive constant rumble
.crumble
Rumble constantly on click
.trumble
Triggered rumble on click for only 1.5 sec
.hrumble
Rumble upon hover
.mdrumble
Rumble on mousedown
.caffeinated
Aggressive rumble on hover
Put an element through a trying tribulation of turbulence ranging from mild to severe. The effect applies an SVG filter which distorts any element.
REQUIRES:
core/jab/bfx/turbulent.js
See class names in the examples below.
Turbulence Upon Hover!
You can also apply the effect upon hover, simply by appending an -h to the end of the .turbulence class. In the example below, we apply severe turbulence upon hover:
.severe.turbulence-h
Subtle turbulence.
Survivable.
Standard turbulence.
Might be fatal.
Severe turbulence!
Unsurvivable.