Split fractured text
How do I make an split fractured text?
Playing around with split text effects, creating a fractured text look with just css.Check out some other cool text effects: http://codepen.io/collection/DamKJW/. What is a split fractured text? How do you make a split fractured text? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.
Split fractured text - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Split fractured text</title> <link href='https://fonts.googleapis.com/css?family=Roboto:900,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <h1 contenteditable class="animated" data-heading="Fracture">Fracture</h1>
</div> <script src="js/index.js"></script>
</body>
</html>
Split fractured text - Script Codes CSS Codes
html { height: 100%;
}
body { padding: 2rem; font-family: 'Roboto', sans-serif; height: 100%;
}
.wrapper { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute;
}
.wrapper h1 { color: black; text-align: center; font-size: 10vw; position: relative; font-weight: 900; text-transform: uppercase;
}
.wrapper h1:before { content: attr(data-heading); position: absolute; left: 0; overflow: hidden; width: 100%; height: 50%; color: white; text-shadow: 3px -2px 5px white, -3px 3px 4px white; text-align: center;
}
.wrapper h1:after { content: attr(data-heading); position: absolute; left: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); overflow: hidden; width: 100%; height: 49%; color: black;
}
h1.animated:after { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation: fracture 5s infinite ease; animation: fracture 5s infinite ease;
}
@-webkit-keyframes fracture { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-20px); transform: translateX(-20px); }
}
@keyframes fracture { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-20px); transform: translateX(-20px); }
}
Split fractured text - Script Codes JS Codes
// JS is to make the text editable, not required for the effect. Thanks for the suggestion @chriscoyier!
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() { this.setAttribute("data-heading", this.innerText);
});
Developer | Mandy Michael |
Username | mandymichael |
Uploaded | December 16, 2022 |
Rating | 4.5 |
Size | 2,857 Kb |
Views | 8,096 |
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!
Name | Size |
Three way split with clip-path | 2,852 Kb |
Flickering Light Text Effect | 3,315 Kb |
80s style text with clip path and layered fonts | 3,618 Kb |
Vertical split layout text effect | 2,640 Kb |
Angled Split Text Colour | 2,909 Kb |
Multi coloured animated css text | 2,903 Kb |
Split emoji text effect with css | 5,332 Kb |
Awkward Zebra Text Effect | 2,961 Kb |
CSS only 3D paper fold text effect | 3,363 Kb |
Single element, multi coloured 3d text effect | 4,157 Kb |
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!
Name | Username | Size |
Practice using Wixel | Emnk | 3,057 Kb |
Boxes | H3l1um | 2,563 Kb |
STIKHOI | Denmch | 7,122 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!