Text animation with CSS - strike through line

shrek-7 — Tue, 20 Oct 2020 14:28:32 +0000

Hello folks!
I often love to play around with CSS and try out things whenever I'm free. I always feel animations with just CSS is highly underrated and can be used to achieve 60 fps animations without any JS involved.
I have tried to create a very simple animation, a strike through line, a line passes through a text and the characters in that text are alternatively overlapped onto the line.

HTML

For the HTML part we only need a parent container, it will contain the text that we want to show and the another empty <div></div> which will be used as the line we want to animate.
Notice that the text is not just a string but in a form of a list, so that we can change the z-index of individual characters.

CSS

Styling of the parent container
Just some general styling, height, width, alignment also position as relative, it will be used the position the line with respect to parent.

Styling of Text

align horizontally with flex
Remove default styling of li
z-index set to 1
z-index of alternative elements set to 3 ( using pseudo class nth-child(2n + 1) or nth-child(2n))
position:relative - z-index won't work without it.

Styling of line

position it absolute with respect to the parent element, half way from the top.
width to be some default value, we will animate width of the line from some initial value lets say 5vw to final value '100vw'.
z-index should be set as 2, since the li elements of the text is given value 1 and 3 alternatively.
animation, to increase the width of line.

Link to Sandbox
https://codesandbox.io/s/strike-through-line-animation-q7x9m

Happy coding ♥ !

JavaScript Reduce method

shrek-7 — Mon, 16 Mar 2020 14:28:02 +0000

I have been a fan of map and filter but never bothered to look into how we can use reduce to simplify and minimise the lines of code ( " make it difficult for others ").

This is what the documentation says,

array.reduce( callback(accumulator, currentValue, currentIndex, arr), initialValue);

callback : to execute on each element in the array (except for the first, if no initialValue is supplied )
accumulator: It recieves the return value of the callback, its the value returned from the last invocation of callback or initialValue.
currentValue: Current value of the array being processed.
currentIndex: Index of the current value of the array.
arr: The entire array on which we are calling reduce.
initialValue: Value as a first argument to call the callback for the first time.

Here is a small snippet to reverse a string using reduce method. We will loop through the code and dive deeper to see how it works.

// Reverse a string
var stringToReverse= "fiction";

var arrList = stringToReverse.split(''); 
// ["f", "i", "c", "t", "i", "o", "n"]

var getReverse = function( total, currentValue, currentIndex, arr ) {
    let valueToBeReturned = currentValue + total;
    return valueToBeReturned;
}

var b = arrList.reduce( getReverse, '#' );

So according to the docs, here "callback" is getReverse() function, "initialValue" is '#'.

first Iteration
accumulator gets a value: '#' this is the initial value that I have passed to the reduce method.
currentValue : 'f' // first element of the array.
valueToBeReturned: Its just concatenated value of currentValue and accumulator. ('f#' ).

lets see what next.

second iteration
third iteration
fourth iteration
fifth iteration
sixth iteration

*last iteration

Here is the shortened code.

var stringToReverse= "fiction";
var arrList = stringToReverse.split(''); // ["f", "i", "c", "t", "i", "o", "n"]
var getReverse = (reverse, currentValue) => currentValue + reverse;
var reversedStr = arrList.reduce( getReverse, '' );

Thats it folks. How about you go further and share about what happens if we don't pass the "initialValue" ? What does accumulator gets in that case ?
Also , feedback would be valuable.
Cheers!

MDN web docs

DEV Community: shrek-7

Text animation with CSS - strike through line

JavaScript Reduce method