¶ (c) Technocore - All Rights Reserved.
NOTICE: All information contained herein is, and remains
the property of TechnoCore.
The intellectual and technical concepts contained
herein are proprietary to TechnoCore and dissemination of this information or reproduction of this material
is strictly forbidden unless prior written permission is obtained
from TechnoCore.
¶ ObjTextTilt
The ObjTextTilt object is a utility for applying a subtle, 3D tilt effect to a block of content on a web page. It uses the tilt.js library to achieve this effect, which responds to mouse movement.
¶ Methods
¶ Process(Param1: str, ...)
This method takes a string of HTML or text content, wraps it in a <div>, and attaches the tilt.js event listeners.
Parameters:
Param1(str): The HTML or text content that the tilt effect should be applied to.
Returns:
- (str): A string of HTML and JavaScript that will render the content with the tilt effect enabled.
Example Usage:
tilt = ObjProcessText()
content_to_tilt = "<h2>Hover over me!</h2><p>This text will tilt.</p>"
tilt_html = tilt.Process(param1=content_to_tilt)
print(tilt_html)
This would output the necessary HTML and a <script> block to initialize the effect on the content.
¶ The effect
{tilt:content|entrance} renders content that tilts in 3D toward the
cursor, with a glare highlight tracking the pointer and a shadow that
leans opposite the tilt — which is what sells the illusion of the card
lifting off the page rather than being painted on it.
| Param | Meaning | Default |
|---|---|---|
param1 |
content to tilt (run through process_text) |
— |
param2 |
animate.css entrance class | animate__fadeInUp |
param2 accepts a bare name (zoomIn) or the full class
(animate__zoomIn), and none opts out of the entrance while keeping
the tilt.
¶ Two libraries, split by what each is good at
animate.css runs the one-shot entrance — a canned keyframe
sequence, exactly its strength. The cursor tilt is the thing it
cannot express, so that is this module's own js: block.
They are on separate nested elements, and that is not tidiness:
animate.css entrances animate transform in their keyframes and so
does the tilt. On one element the two fight and the card jerks as it
arrives. The outer div owns the entrance, the inner one owns the tilt,
and neither touches the other's transform.
¶ tilt.js is gone
The effect used to come from tilt.js, a jQuery plugin
($.fn.tilt), and this module was the only thing pulling jQuery into
the page for it. Writing the transform out here removed the
dependency rather than trading it for another vendored library — and
report-bound JS belongs in the companion YAML regardless.
¶ Accessibility
prefers-reduced-motion: reduce disables the tilt and the glare
entirely, in both the CSS and the JS. A card that tracks the cursor is
precisely the kind of vestibular trigger that setting exists for.
¶ Colour
The glare is built from --ax-panel via color-mix, so it suits the
active skin instead of being white on every one.