01. Fun bla bla effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
IMAGINE
IMAGINE
IMAGINE
IMAGINE
HTML CODE
<div class="hero_animation_content"> <h2>IMAGINE</h2> <h2>IMAGINE</h2> </div>
CSS CODE
.hero_animation_content {
position: relative;
min-height:200px;
}
.hero_animation_content h2 {
font-family: Josefin Sans;
font-weight: 600;
font-size: calc(3rem + 5vw);
text-transform: uppercase;
position: absolute;
left: 12%;
}
.hero_animation_content h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
.hero_animation_content h2:nth-child(2) {
color: #fff;
animation: animate 12s ease-in-out infinite;
}
/* water animation */
@keyframes animate {
0%,
100% {
clip-path: polygon(
0% 70%,
60% 50%,
70% 90%,
30% 90%,
30% 60%,
50% 40%,
200% 150%,
60% 100%,
00% 100%
);
}
50% {
clip-path: polygon(
0% 30%,
10% 30%,
80% 90%,
90% 100%,
30% 50%,
80% 40%,
110% 10%,
100% 100%,
0% 100%
);
}
} 02. Fun bla bla effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
d e s i g n
HTML CODE
<div class="anim_waviy">
<span style="--i:1">d</span>
<span style="--i:2">e</span>
<span style="--i:3">s</span>
<span style="--i:4">i</span>
<span style="--i:5">g</span>
<span style="--i:6">n</span>
</div>
CSS CODE
.anim_waviy {
position: relative;
-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
font-size: 3em;
letter-spacing: -5px;
margin-left: 20px;
margin-bottom: 60px;
}
.anim_waviy span {
font-family: 'Alfa Slab One', cursive;
position: relative;
display: inline-block;
color: #fff;
text-transform: lowercase;
animation: waviy 5s infinite;
animation-delay: calc(.8s * var(--i));
}
@keyframes waviy {
0%,40%,100% {
transform: translateY(0)
}
20% {
transform: translateY(-20px)
}
} 03. Fun bla bla effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
HTML CODE
<div id="words_fade_anim_container ">
<span id="text1"></span>
<span id="text2"></span>
</div>
<svg id="filters">
<defs>
<filter id="threshold">
<feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140" />
</filter>
</defs>
</svg> CSS CODE
#words_fade_anim_container {
filter: url(#threshold) blur(0.6px);
min-height:60px;
position: relative;
}
#text1,
#text2 {
position: absolute;
width: 100%;
left: 0;
top: 50%;
display: inline-block;
font-family: "Raleway", sans-serif;
font-size: 70px;
user-select: none;
}
04. Fun bla bla effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
d e s i g n
HTML CODE
<div class="anim_words">
<span>d</span>
<span>e</span>
<span>s</span>
<span>i</span>
<span>g</span>
<span>n</span>
</div>
CSS CODE
.anim_words {
font-size: 0;
}
.anim_words span {
font-size: 85px;
display: inline-block;
animation: move 5s ease-in-out infinite;
color: #ffffff!important;
}
@keyframes move {
0% {
transform: translate(-30%, 0);
}
50% {
text-shadow: 0 25px 50px rgba(105, 150, 105, .8);
}
100% {
transform: translate(30%, 0);
}
}
.anim_words span:nth-child(2) {
animation-delay: 0.5s;
}
.anim_words span:nth-child(3) {
animation-delay: 1s;
}
.anim_words span:nth-child(4) {
animation-delay: 1.5s;
}
.anim_words span:nth-child(5) {
animation-delay: 2s;
}
.anim_words span:nth-child(6) {
animation-delay: 2.5s;
} 05. Fun bla bla effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
HTML CODE
<a href="#" class="button" role="button"> CLICK HERE </a>
CSS CODE
.button {
position: relative;
overflow:hidden;
}
.button::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.4);
border-radius: 10%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.button:hover::before {
-webkit-animation: circle .75s;
animation: circle 1s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 180%;
height: 180%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 180%;
height: 180%;
opacity: 0;
}
}