<div id="app"></div>
* {
padding: 0;
margin: 0;
}
body {
padding: 5em;
font-family: "Helvetica Neue", "Helvetica", sans-serif;
background-color: #F0EFEA;
padding-top: 10em;
}
h1 {
font-size: 5em;
text-align: center;
font-weight: 600;
color: #353239;
}
h1 span span {
color: tomato;
position: relative;
bottom: -1em;
opacity: 0;
animation: move-text 0.75s forwards;
}
h1 span span:nth-child(2n) { color: lightseagreen; }
h1 span span:nth-child(3n) { color: orange; }
h1 span span:nth-child(4n) { color: dodgerblue; }
h1 span span:nth-child(5n) { color: blueviolet; }
@keyframes move-text {
0% {
bottom: -0.2em;
opacity: 1;
}
50% {
bottom: 0.2em;
}
100% {
bottom: 0;
opacity: 1;
}
}
@media screen and (max-width: 500px) {
body {
transform: scale(0.75);
}
}
const { Component, Children, PropTypes } = React
class SplitText extends Component {
render(){
return(
<span aria-label={this.props.copy} role={this.props.role}>
{this.props.copy.split("").map(function(char, index){
let style = {"animation-delay": (0.5 + index / 10) + "s"}
return <span
aria-hidden="true"
key={index}
style={style}>
{char}
</span>;
})}
</span>
);
}
}
class Layout extends Component {
render() {
return(
<h1><SplitText copy="Sarah Fossheim" role="heading" /></h1>
);
}
}
ReactDOM.render(<Layout />, document.getElementById('app'));
View Compiled
This Pen doesn't use any external CSS resources.