Advanced Techniques : Creating Dynamic Text Shadow CSS Animation Part 2
Dynamic text shadow CSS animation creation
CSS text shadows are a great way to add depth and dimension to your text. It can be used for a variety of purposes, from subtle shine to bold lines. But what if you want to create a dynamic and ever-changing text shadow?
This is where CSS animations come in. CSS animations allow you to create effects that change over time, such as fading, rotation, and scaling. By combining CSS text shadows and animations you can create really dynamic and eye-catching effects.
In this blog post, we will discuss some advanced techniques for creating dynamic text shadow CSS animations. We will discuss topics e.g.
- Using CSS variables to control animation
- Creating more shadows of text and animating them freely
- Using CSS transformations to create complex animations
- Combines text shadow animation with other CSS effects
By the end of this blog post, you will have the skills to create your own dynamic text shadow CSS animations.
Introduction
Text shadows are a great way to add depth and dimension to your text, but they can also be used to create sharp and eye-catching effects. To combine CSS text shadows and animations, you can create effects that change over time, such as fading, rotation, and scaling.
One of the most common ways to create dynamic text shadow animations is to use CSS variables. CSS variables allow you to set values that can be used throughout your CSS code. This means that you can easily control the animation by changing the value of one variable.
Want to create Attractive demo you have to add JavaScript which is mention below:
Source code give at last of page
window.onload = init;
function init() {
var root = new THREERoot({
createCameraControls: !true,
antialias: (window.devicePixelRatio
|| 1) == 1,
fov: 90,
});
root.renderer.setClearColor(0x000000);
root.renderer.setPixelRatio
(window.devicePixelRatio || 1);
root.camera.position.set(0, 0, 300);
var textAnimation = createText
Animation();
root.scene.add(textAnimation);
var light = new THREE.Directiona
lLight();
light.position.set(0, 0, 1);
root.scene.add(light);
var tl = new TimelineMax({
repeat: -1,
repeatDelay: 0.25,
yoyo: true,
});
tl.fromTo(
textAnimation,
8,
{ animationProgress: 0.0 },
{ animationProgress: 0.8, ease:
Power1.easeInOut },
0
);
tl.to(root.camera.position, 8, { z:
-350, ease: Power1.easeInOut }, 0);
createTweenScrubber(tl);
}
function createTextAnimation() {
var geometry = generateTextGeometry
("Jai Shri Ram", {
size: 14,
height: 4,
font: "droid sans",
weight: "bold",
style: "normal",
curveSegments: 24,
bevelSize: 1,
bevelThickness: 1,
bevelEnabled: true,
anchor: { x: 0.5, y: 0.5, z: 0.5 },
});
THREE.BAS.Utils.separateFaces(geometry);
return new TextAnimation(geometry);
}
function generateTextGeometry(text,
params) {
var geometry = new THREE.TextGeometry
(text, params);
geometry.computeBoundingBox();
geometry.userData = {};
geometry.userData.size = {
width: geometry.boundingBox.max.x -
geometry.boundingBox.min.x,
height: geometry.boundingBox.max.y -
geometry.boundingBox.min.y,
depth: geometry.boundingBox.max.z -
geometry.boundingBox.min.z,
};
var anchorX = geometry.userData.size.
width * -params.anchor.x;
var anchorY = geometry.userData.size.
height * -params.anchor.y;
var anchorZ = geometry.userData.size.
depth * -params.anchor.z;
var matrix = new THREE.Matrix4().make
Translation(anchorX, anchorY, anchorZ);
geometry.applyMatrix(matrix);
return geometry;
}
function TextAnimation(textGeometry){
var bufferGeometry = new THREE.BAS
ModelBufferGeometry(textGeometry);
var aAnimation = bufferGeometry.
createAttribute("aAnimation", 2);
var aCentroid = bufferGeometry.
createAttribute("aCentroid", 3);
var aControl0 = bufferGeometry.
createAttribute("aControl0", 3);
var aControl1 = bufferGeometry.
createAttribute("aControl1", 3);
var aEndPosition = bufferGeometry.
createAttribute("aEndPosition", 3);
var aAxisAngle = bufferGeometry.
createAttribute("aAxisAngle", 4);
var faceCount = bufferGeometry.faceCount;
var i, i2, i3, i4, v;
var keys = ["a", "b", "c"];
var vDelay = new THREE.Vector3();
var maxDelay = 0.0;
var minDuration = 1.0;
var maxDuration = 1.0;
var stretch = 0.0125;
var lengthFactor = 0.01;
var maxLength = textGeometry.
boundingBox.max.length();
this.animationDuration =
maxDuration + maxDelay + stretch
+ lengthFactor * maxLength;
this._animationProgress = 0;
var distanceZ = -400;
var axis = new THREE.Vector3();
var angle;
for (
i = 0, i2 = 0, i3 = 0, i4 = 0;
i < faceCount;
i++, i2 += 6, i3 += 9, i4 += 12
) {
var face = textGeometry.faces[i];
var centroid = THREE.BAS.Utils.
computeCentroid(textGeometry, face);
// animation
var delay = centroid.length() *
lengthFactor + Math.random() * maxDelay;
var duration = THREE.Math.randFloat
(minDuration, maxDuration);
for (v = 0; v < 6; v += 2) {
var vertex = textGeometry.vertices
[face[keys[v * 0.5]]];
var vertexDelay = vDelay.subVectors
(centroid, vertex).length() * 0.0001;
aAnimation.array[i2 + v] = delay +
vertexDelay + stretch * Math.random();
aAnimation.array[i2 + v + 1] = duration;
}
// centroid
for (v = 0; v < 9; v += 3) {
aCentroid.array[i3 + v] = centroid.x;
aCentroid.array[i3 + v + 1] = centroid.y;
aCentroid.array[i3 + v + 2] = centroid.z;
}
// ctrl
var c0x = centroid.x * THREE.Math.
randFloat(0.75, 1.0);
var c0y = centroid.y * THREE.Math.
randFloat(0.75, 1.0);
var c0z = distanceZ * THREE.Math.
randFloat(0.5, 0.75);
var c1x = centroid.x * THREE.Math.
randFloat(0.25, 0.5);
var c1y = centroid.y * THREE.Math.
randFloat(0.25, 0.5);
var c1z = distanceZ * THREE.Math.
randFloat(0.75, 1.0);
for (v = 0; v < 9; v += 3) {
aControl0.array[i3 + v] = c0x;
aControl0.array[i3 + v + 1] = c0y;
aControl0.array[i3 + v + 2] = c0z;
aControl1.array[i3 + v] = c1x;
aControl1.array[i3 + v + 1] = c1y;
aControl1.array[i3 + v + 2] = c1z;
}
// end position
var x, y, z;
x = 0;
y = 0;
z = distanceZ;
for (v = 0; v < 9; v += 3) {
aEndPosition.array[i3 + v] = x;
aEndPosition.array[i3 + v + 1] = y;
aEndPosition.array[i3 + v + 2] = z;
}
axis.x = 0;
axis.y = 0;
axis.z = 1;
axis.normalize();
angle = Math.PI * THREE.Math.
randFloat(4, 6);
for (v = 0; v < 12; v += 4) {
aAxisAngle.array[i4 + v] = axis.x;
aAxisAngle.array[i4 + v + 1] = axis.y;
aAxisAngle.array[i4 + v + 2] = axis.z;
aAxisAngle.array[i4 + v + 3] = angle;
}
}
THREERoot.prototype = {
tick: function () {
this.update();
this.render();
requestAnimationFrame(this.tick);
},
update: function () {
this.controls && this.controls.
update();
},
render: function () {
this.renderer.render(this.scene,
this.camera);
},
resize: function () {
this.camera.aspect = window.innerWidth
/ window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth,
window.innerHeight);
},
};
// desktop
var mouseDown = false;
document.body.style.cursor = "pointer";
window.addEventListener("mousedown",
function (e) {
mouseDown = true;
document.body.style.cursor = "ew-resize";
_cx = e.clientX;
stop();
});
window.addEventListener("mouseup",
function (e) {
mouseDown = false;
document.body.style.cursor = "pointer";
resume();
});
window.addEventListener("mousemove",
function (e) {
if (mouseDown === true) {
var cx = e.clientX;
var dx = cx - _cx;
_cx = cx;
seek(dx);
}
});
// mobile
window.addEventListener("touchstart",
function (e) {
_cx = e.touches[0].clientX;
stop();
e.preventDefault();
});
window.addEventListener("touchend",
function (e) {
resume();
e.preventDefault();
});
window.addEventListener("touchmove",
function (e) {
var cx = e.touches[0].clientX;
var dx = cx - _cx;
_cx = cx;
seek(dx);
e.preventDefault();
});
}
Want to Download the Code
See the Pen Text Animation by vishaltewatia (@vishaltewatia) on CodePen.
Post a Comment