I only want to rotate or flip the text on a ribbon box, not the entire box itself.
If you try to rotate the box directly, it may disrupt the string animation.
(function(){
var STATE_CLOSED = 0,
STATE_DETACHED = 1,
STATE_OPENED = 2,
TAG_HEIGHT = 30,
TAG_WIDTH = 200,
MAX_STRAIN = 40,
// Factor of page height that needs to be dragged for the
// curtain to fall
DRAG_THRESHOLD = 0.36;
VENDORS = [ 'Webkit', 'Moz', 'O', 'ms' ];
var dom = {
ribbon: null,
ribbonString: null,
ribbonTag: null,
curtain: null,
closeButton: null
},
// The current state of the ribbon
state = STATE_CLOSED,
// Ribbon text, correlates to states
closedText = '',
detachedText = '',
friction = 1.04;
gravity = 1.5,
// Resting position of the ribbon when curtain is closed
closedX = TAG_WIDTH * 0.55,
closedY = -TAG_HEIGHT * 0.1,
// Resting position of the ribbon when curtain is opened
openedX = TAG_WIDTH * 0.4,
openedY = TAG_HEIGHT,
velocity = 0,
rotation = 45,
curtainTargetY = 0,
curtainCurrentY = 0,
dragging = false,
dragTime = 0,
dragY = 0,
anchorA = new Point( closedX, closedY ),
anchorB = new Point( closedX, closedY ),
mouse = new Point();
function initialize() {
dom.ribbon = document.querySelector( '.forkit' );
dom.curtain = document.querySelector( '.forkit-curtain' );
dom.closeButton = document.querySelector( '.forkit-curtain .close-button' );
if( dom.ribbon ) {
// Fetch label texts from DOM
closedText = dom.ribbon.getAttribute( 'data-text' ) || '';
detachedText = dom.ribbon.getAttribute( 'data-text-detached' ) || closedText;
// Start the animation loop
animate();
}
}
// Omitted rest of the JavaScript code for brevity
});
initialize();
})();.forkit-curtain {
text-align: center;
background: rgba( 0, 0, 0, 0.8 );
padding-top: 0%;
}
.forkit-curtain .close-button {
position: absolute;
width: 32px;
height: 32px;
right: 20px;
top: 20px;
cursor: pointer;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRQ middx...");
// Style CSS omitted for brevity
<p>This allows us to fill areas with transparent color; the first three numbers represent the color in RGB values and the fourth represents a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but....</p>