<div id="wrap">
<div class="heading" data-class="0">
<div class="heading__text">
<span class="heading-text heading-text--0">Heading text goes here</span>
<span class="heading-text heading-text--1">Heading text #1 goes here</span>
<span class="heading-text heading-text--2">Heading text #2 goes here</span>
<span class="heading-text heading-text--3">Heading text #3 goes here</span>
<span class="heading-text heading-text--4">Heading text #4 goes here</span>
<span class="heading-text heading-text--5">Heading text #5 goes here</span>
</div>
<div class="heading__icon">
<div class="heading-image heading-image--glass">
<svg x="0px" y="0px" viewBox="0 0 67.888 101.903">
<style type="text/css">
.st0 {
opacity: 0.5;
}
.st1 {
fill: #E5ECF1;
stroke: #BCBCBC;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
opacity: 0.6;
}
.st3 {
opacity: 0.4;
fill: #C3CACF;
}
.st4 {
opacity: 0.9;
fill: #E7F3FD;
}
.st5 {
fill: none;
}
.st6 {
opacity: 0.5;
fill: #B5BBBF;
}
.st7 {
opacity: 0.7;
fill: #FFFFFF;
}
</style>
<g class="st0">
<g>
<path class="st1" d="M43.377,20.462V5.195H24.453v15.267L1.508,92.786c0,0-5.352,8.617,8.616,8.617c13.97,0,33.431,0,47.582,0
c14.151,0,8.616-8.617,8.616-8.617L43.377,20.462z" />
</g>
</g>
<g>
<g class="st2">
<g>
<g>
<g>
<path class="st1" d="M46.204,2.772c0,1.255-1.019,2.272-2.271,2.272H23.957c-1.254,0-2.271-1.017-2.271-2.272l0,0
c0-1.257,1.017-2.272,2.271-2.272h19.976C45.185,0.5,46.204,1.516,46.204,2.772L46.204,2.772z" />
<path class="st3" d="M43.932,0.5H23.957c-1.254,0-2.271,1.016-2.271,2.272c0,1.255,1.017,2.272,2.271,2.272h19.976
c1.253,0,2.271-1.017,2.271-2.272C46.204,1.516,45.185,0.5,43.932,0.5z M36.801,4.026H24.232c-0.789,0-1.429-0.562-1.429-1.254
s0.641-1.253,1.429-1.253h12.569c0.788,0,1.43,0.56,1.43,1.253S37.589,4.026,36.801,4.026z" />
<path class="st4" d="M26.537,2.605c0,0.41-0.332,0.742-0.742,0.742h-1.235c-0.408,0-0.742-0.332-0.742-0.742l0,0
c0-0.409,0.333-0.74,0.742-0.74h1.235C26.205,1.865,26.537,2.196,26.537,2.605L26.537,2.605z" />
</g>
<path class="st3" d="M43.932,0.5h-3.575c0.915,0.294,1.692,0.747,1.904,1.904c0.227,1.247-0.57,2.14-1.599,2.64h3.27
c1.253,0,2.271-1.017,2.271-2.272C46.204,1.516,45.185,0.5,43.932,0.5z" />
</g>
</g>
</g>
<path class="st3" d="M66.322,92.786L43.377,20.462V5.195H24.453v15.267L1.508,92.786c0,0-5.352,8.617,8.616,8.617
c13.97,0,33.431,0,47.582,0C71.857,101.403,66.322,92.786,66.322,92.786z M43.044,94.915H7.777
c-4.39-0.455-2.876-5.146-2.876-5.146L25.941,20.9V6.522l8.022-0.152v14.076l14.379,70.081
C48.796,95.823,43.044,94.915,43.044,94.915z" />
<g>
<path class="st5" d="M7.777,94.915h35.267c0,0,5.752,0.908,5.298-4.388L33.963,20.446V6.37l-8.022,0.152V20.9L4.901,89.769
C4.901,89.769,3.387,94.46,7.777,94.915z" />
<path class="st6" d="M66.322,92.786L43.377,20.462V5.195h-4.874v14.948l20.433,72.351c0.909,5.751-5.146,5.903-5.146,5.903H6.719
c-5.753-0.454-5.449-5.146-5.449-5.146l-0.006-0.008c-0.871,1.774-3.168,8.16,8.861,8.16c13.97,0,33.431,0,47.582,0
C71.857,101.403,66.322,92.786,66.322,92.786z" />
</g>
<path class="st7" d="M26.698,7.202v14.076L7.02,87.574c0,0-1.589,3.784,1.06,4.465h9.536c0,0,5.6,0.908,6.054-3.936l6.963-66.9
V7.126L26.698,7.202z" />
</g>
</svg>
</div>
<div class="heading-image heading-image--fill">
<svg x="0px" y="0px" viewBox="0 0 67.888 101.903">
<path class="st1" d="M64.76,91.99L42.306,21.695H25.267L3.073,91.99c0,0-5.095,8.202,8.2,8.202h45.286C70.028,100.192,64.76,91.99,64.76,91.99z" />
</svg>
</div>
</div>
</div>
</div>html,
body {
padding: 0;
margin: 0;
background-color: #fff;
font-family: monospace;
font-size: 18px;
color: #333;
}
#wrap {
width: 100%;
max-width: 980px;
margin: auto;
padding: 40px 0;
}
.heading {
display: flex;
align-items: center;
&__text {
flex: 1 1 100%;
margin-right: 20px;
line-height: 1.2;
font-size: 24px;
}
&__icon {
width: 60px;
position: relative;
}
&-text {
display: none;
&--0 {
display: block;
}
}
&-image {
width: 100%;
&--glass {
position: relative;
z-index: 1;
svg {
display: block;
width: 100%;
}
}
&--fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
path {
fill: transparent;
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
transition: 1s ease;
transition-property: fill, clip-path;
}
}
}
}
&[data-class='1'] {
.heading {
&-text {
display: none;
&--1 {
display: block;
}
}
&-image {
&--fill {
svg {
path {
fill: #333333;
clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
}
}
}
}
}
}
&[data-class='2'] {
.heading {
&-text {
display: none;
&--2 {
display: block;
}
}
&-image {
&--fill {
svg {
path {
fill: #0014ff;
clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0% 100%);
}
}
}
}
}
}
&[data-class='3'] {
.heading {
&-text {
display: none;
&--3 {
display: block;
}
}
&-image {
&--fill {
svg {
path {
fill: #00ad07;
clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%);
}
}
}
}
}
}
&[data-class='4'] {
.heading {
&-text {
display: none;
&--4 {
display: block;
}
}
&-image {
&--fill {
svg {
path {
fill: #ff9d00;
clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0% 100%);
}
}
}
}
}
}
&[data-class='5'] {
.heading {
&-text {
display: none;
&--5 {
display: block;
}
}
&-image {
&--fill {
svg {
path {
fill: #ff0000;
clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
}
}
}
}
}
$(function () {
var i = 0;
setInterval(function () {
i++;
if (i > 5) {
i = 0;
}
$('.heading').attr('data-class', i);
}, 2000);
});
External CSS
This Pen doesn't use any external CSS resources.