DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
Prince
Prince

Posted on

2

Parallax illusion effects in html css and js under 30 seconds.

#webdev #programming #javascript #beginners

`<!DOCTYPE html>









Dual Warping Liquid Effect

<br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
overflow: hidden;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
background: black;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
} 
.warp-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.warp-section {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.warp-effect {
    position: absolute;
    width: 90%;
    height: 90%;
    filter: url(#warpFilter);
}

.left .warp-effect {
    background: linear-gradient(45deg, cyan, blue, purple);
}

.right .warp-effect {
    background: linear-gradient(45deg, red, orange, yellow);
}

.center-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.8), rgba(0, 255, 255, 0.6));
    border-radius: 50%;
    filter: blur(20px) drop-shadow(0 0 30px rgba(255, 0, 255, 0.8));
    animation: morph 5s infinite alternate ease-in-out, pulse 3s infinite;
}

@keyframes morph {
    0% { border-radius: 50%; transform: scale(1) rotate(0deg); }
    50% { border-radius: 40% 60% 50% 50%; transform: scale(1.1) rotate(30deg); }
    100% { border-radius: 60% 40% 50% 50%; transform: scale(1) rotate(-30deg); }
}

@keyframes pulse {
    0% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
    50% { filter: blur(25px) drop-shadow(0 0 40px rgba(0, 255, 255, 0.9)); }
    100% { filter: blur(10px) drop-shadow(0 0 20px rgba(255, 0, 255, 0.9)); }
}

svg {
    position: absolute;
    width: 0;
    height: 0;
}
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</code></pre></div>
<p></head><br>
<body><br>
<div class="warp-container"><br>
<div class="warp-section left"><br>
<div class="warp-effect"></div><br>
<div class="center-orb"></div><br>
</div><br>
<div class="warp-section right"><br>
<div class="warp-effect"></div><br>
<div class="center-orb"></div><br>
</div><br>
</div></p>
<div class="highlight"><pre class="highlight plaintext"><code>&lt;svg&gt;
&lt;filter id="warpFilter"&gt;
&lt;feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="6" seed="3"&gt;
&lt;animate attributeName="seed" values="3;6;9;3" dur="5s" repeatCount="indefinite"/&gt;
&lt;/feTurbulence&gt;
&lt;feDisplacementMap in="SourceGraphic" scale="50"&gt;
&lt;animate attributeName="scale" values="20;50;30;70;40;20" dur="6s" repeatCount="indefinite"/&gt;
&lt;/feDisplacementMap&gt;
&lt;/filter&gt;
&lt;/svg&gt;
</code></pre></div>
<p></body><br>
</html><br>
`</p>

Top comments (0)