Twisted text

Developer
Josep Llodrà
Size
3,072 Kb
Views
8,096
  1. Twisted text Previews
  2. Twisted text HTML Codes
  3. Twisted text CSS Codes
  4. Twisted text JS Codes

How do I make an twisted text?

Using transform scaleY. What is a twisted text? How do you make a twisted text? This script and codes were developed by Josep Llodrà on 19 January 2023, Thursday.

Twisted text Previews
IQ Test

Twisted text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twisted text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="text"> What you are reading is a twisted text using scale. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum. Nulla eu neque commodo, dapibus dolor eget, dictum arcu. In nec purus eu tellus consequat ultricies. Donec feugiat tempor turpis, rutrum sagittis mi venenatis at. Sed molestie lorem a blandit congue. Ut pellentesque odio quis leo volutpat, vitae vulputate felis condimentum. Praesent vulputate fermentum lorem, id rhoncus sem vehicula eu. Quisque ullamcorper, orci adipiscing auctor viverra, velit arcu malesuada metus, in volutpat tellus sem at justo.Fusce non fermentum mi. Praesent vel lobortis elit. Nulla sodales, risus quis sollicitudin iaculis, felis dolor aliquet purus, eget elementum velit nunc eu dolor. Curabitur elit tellus, dictum non sem sit amet, viverra lobortis velit. Quisque facilisis, neque cursus ullamcorper ornare, dolor metus aliquam lacus, pharetra porttitor massa neque ut ligula. Vivamus laoreet nulla diam, eget adipiscing felis scelerisque sit amet. Mauris egestas, nisi vitae cursus tincidunt, urna ipsum facilisis eros, ut venenatis dui tellus sit amet orci. Nullam a rhoncus diam, eget tristique felis. Nulla egestas adipiscing fermentum. Aenean sagittis libero at eros ornare molestie. Morbi convallis ornare imperdiet. Mauris convallis tristique erat ac eleifend.Nunc ullamcorper neque nunc, vitae sollicitudin nunc placerat nec. Suspendisse vel enim ultrices, fringilla urna luctus, lacinia est. Quisque mattis dictum sapien vitae laoreet. Suspendisse ultricies, lorem id tempor elementum, turpis magna pharetra purus, ac pulvinar metus ante quis nisi. Praesent dui massa, egestas dictum mi ut, tempus consequat neque. Maecenas urna tellus, fermentum at velit ac, commodo ultricies orci. Morbi augue dui, tincidunt et purus quis, consequat dictum enim</div> <script src="js/index.js"></script>
</body>
</html>

Twisted text - Script Codes CSS Codes

/* Resize viewport and get a different "wave" effect */
/* tune js var "twists" */
/* style your font and colors */
body { font-size: 18pt; text-align: center; margin-top: 5%; background-color: #87ccee;
}
span { display: inline-block; font-weight: bold; /* style your font here */ text-shadow: 0px 0px 14px rgba(50,50,50,0.1);	background: -webkit-gradient(linear, 0 0, 0 100%, from(#77aaFF), to(#888));	background: -webkit-linear-gradient(#77aaFF, #888);	background: -moz-linear-gradient(#77aaFF, #888);	background: -o-linear-gradient(#77aaFF, #888);	background: linear-gradient(#77aaFF, #888);	-webkit-background-clip: text;	-webkit-text-fill-color: transparent;
}

Twisted text - Script Codes JS Codes

var textDiv = document.getElementById('text');
var text = (textDiv.innerHTML).trim();
var n = text.length;
var twists = 40; // use an integer, 1, 2, 3, 4...
var step = 1.0*twists/(n/2);
var dom = "";
var s = 1.0;
var down = true;
var i;
for(i = 0; i < n; i++) { dom += "<span style=\""; // unprefixed transform dom += "transform: scaleY("; if(Math.abs(s)<0.1) { dom += "0.1"; } else { dom += s.toFixed(2); } dom += ");"; // webkit dom += "-webkit-transform: scaleY("; if(Math.abs(s)<0.1) { dom += "0.1"; } else { dom += s.toFixed(2); } dom += ");"; // /*if(s <= 0) { dom += "color: #cccccc;"; } else { dom += "color: #dddddd;"; }*/ dom += "\">"; if(text[i] == ' ') { dom += "&nbsp;"; } else { dom += text[i]; } dom += "</span>"; if(s <= -1 && down) { down = false; } if(s >= 1 && !down) { down = true; } if(down) { s = s - step; } else { s = s + step; }
}
textDiv.innerHTML = dom;
Twisted text - Script Codes
Twisted text - Script Codes
Home Page Home
Developer Josep Llodrà
Username jllodra
Uploaded January 19, 2023
Rating 3
Size 3,072 Kb
Views 8,096
Do you need developer help for Twisted text?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josep Llodrà (jllodra) Script Codes
Name
A worm in the sand
Designed by Apple in California
3D Pythagoras tree II
Boxes with css arrows
Hypnotic animation
Drawing a tree
Dielectric breakdown model
UTF-8 Recycle animation
Gradient overlay button concept
Classic text scroller
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!