55 lines
6.5 KiB
HTML
55 lines
6.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Liquid masking - scroll</title>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<h1>SVG MASKING</h1>
|
||
|
|
|
||
|
|
<svg id="ourSVG" viewBox="0 0 800 1000">
|
||
|
|
<image opacity="0.65" mask="url('#myMask')" preserveAspectRatio="xMidYMid slice" href="https://images.unsplash.com/photo-1599146348750-b9ea22c672ff?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" height="100%" width="100%" />
|
||
|
|
|
||
|
|
<mask id="myMask">
|
||
|
|
<path id="wobble" d="M53.48-414.83C-36.82-373-33.76-278.17-19.91-194c12.17,74,66.56,136.46,2.05,205.61s-109.6,66-153.69,147.16,31,143.15-55,230.15-274,14.62-267,206S-750.66,726.14-680.2,819.76c75,99.68,487.9,207.62,632,282.55,342.19,177.9,764,148.24,902.86-42.68C994.14,867.89,1031.26,327.21,819.11-35.12,647.45-328.3,300.19-406.44,276.48-428.27,223.48-477.07,92.55-432.94,53.48-414.83Z" fill="white" />
|
||
|
|
</mask>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<!-- ignore this -->
|
||
|
|
<svg class="scroll" viewBox="0 0 200 174" aria-labelledby="myName" role="img">
|
||
|
|
<title id="myName">scroll down</title>
|
||
|
|
<g fill="currentColor">
|
||
|
|
<path d="M21.08,109.53l-1.91,0a10.29,10.29,0,0,0,1.21-4.36,3.94,3.94,0,0,0-.3-1.59,2.42,2.42,0,0,0-.89-1.15,2.33,2.33,0,0,0-1.29-.4,2.48,2.48,0,0,0-1.54.51,6.81,6.81,0,0,0-1.59,2l-.61,1-.61,1c-1.11,1.82-2.46,2.72-4.07,2.7a4,4,0,0,1-3-1.27,5.31,5.31,0,0,1-1.16-3.84,11.25,11.25,0,0,1,.52-3.23l1.74,0a9.62,9.62,0,0,0-.7,3.35,3.11,3.11,0,0,0,.66,2.1,2.12,2.12,0,0,0,1.65.83,2.21,2.21,0,0,0,1.6-.6A6.6,6.6,0,0,0,12,105l.48-.78.61-1,.49-.8a4.59,4.59,0,0,1,4-2.52,4.18,4.18,0,0,1,3.09,1.36,5.83,5.83,0,0,1,1.25,4.24,10,10,0,0,1-.18,1.77A15,15,0,0,1,21.08,109.53Z" />
|
||
|
|
<path d="M23.11,88.4a8.93,8.93,0,0,1,.14,3.21,6.19,6.19,0,0,1-1.52,3.17,6.35,6.35,0,0,1-3.27,1.89,10.73,10.73,0,0,1-4.47.14,10.83,10.83,0,0,1-4.17-1.55,6.5,6.5,0,0,1-2.51-2.83,6.15,6.15,0,0,1-.43-3.52,9.2,9.2,0,0,1,1.15-3l1.83.31a6.35,6.35,0,0,0-1.45,3,3.42,3.42,0,0,0,.45,2.31,5.73,5.73,0,0,0,2.13,2,10,10,0,0,0,6.91,1.12,5.68,5.68,0,0,0,2.65-1.21,3.42,3.42,0,0,0,1.15-2,6.5,6.5,0,0,0-.41-3.34Z" />
|
||
|
|
<path d="M18.15,82.13l6.34,2-.63,1.93L9,81.31l1.28-4a8.2,8.2,0,0,1,1.32-2.73,3.16,3.16,0,0,1,1.66-1,3.41,3.41,0,0,1,1.9.06,5,5,0,0,1,1.62.89A5.65,5.65,0,0,1,18,75.93a6.46,6.46,0,0,1,.76,2.12L27.12,76l-.74,2.3L18.77,80.2Zm-1.48-.48.87-2.71A5.18,5.18,0,0,0,17,77.26a4,4,0,0,0-.88-1,3.34,3.34,0,0,0-1.1-.61,2.16,2.16,0,0,0-1.92.22,4.76,4.76,0,0,0-1.5,2.57l-.47,1.44Z" />
|
||
|
|
<path d="M30.18,70.89a4.5,4.5,0,0,1-3.82,2.64,11.25,11.25,0,0,1-6.05-1.43,11.28,11.28,0,0,1-4.79-4,4.81,4.81,0,0,1,3.62-7.29,11.33,11.33,0,0,1,6,1.44A11.31,11.31,0,0,1,30,66.24,4.52,4.52,0,0,1,30.18,70.89Zm-1.4-.7a2.85,2.85,0,0,0-.4-2.94,10.21,10.21,0,0,0-4.1-3.13,10.24,10.24,0,0,0-5-1.38,2.64,2.64,0,0,0-2.19,4.4,10.21,10.21,0,0,0,4.1,3.13,10.21,10.21,0,0,0,5,1.38A2.85,2.85,0,0,0,28.78,70.19Z" />
|
||
|
|
<path d="M37,55.88l1.41,1-4.86,6.9-12.8-9,1.17-1.67,11.4,8Z" />
|
||
|
|
<path d="M45.14,47l1.24,1.2-5.83,6.09L29.24,43.45,30.65,42,40.71,51.6Z" />
|
||
|
|
<path d="M58,39.19,50.34,25.52l3.24-1.8a6.62,6.62,0,0,1,3.76-1.08,5.37,5.37,0,0,1,2.94,1.45,13.06,13.06,0,0,1,2.63,3.43,11.64,11.64,0,0,1,1.42,3.91,6.07,6.07,0,0,1-.3,3.28,6.09,6.09,0,0,1-2.83,2.67Zm.94-2.5L60.08,36A4.57,4.57,0,0,0,62.29,34a4,4,0,0,0,.11-2.39A13.61,13.61,0,0,0,61,28.22a10.46,10.46,0,0,0-2.07-2.8,4,4,0,0,0-2-1,4.42,4.42,0,0,0-2.68.75l-1.33.74Z" />
|
||
|
|
<path d="M72.88,32.41a4.52,4.52,0,0,1-4.59-.67,11.26,11.26,0,0,1-3.45-5.18A11.31,11.31,0,0,1,64,20.41a4.82,4.82,0,0,1,7.62-2.87,11.48,11.48,0,0,1,3.44,5.17,11.5,11.5,0,0,1,.82,6.17A4.52,4.52,0,0,1,72.88,32.41ZM72.33,31A2.86,2.86,0,0,0,74,28.52a10.23,10.23,0,0,0-.86-5.09A10.15,10.15,0,0,0,70.48,19a2.64,2.64,0,0,0-4.59,1.73,10.07,10.07,0,0,0,.86,5.08,10.2,10.2,0,0,0,2.7,4.4A2.85,2.85,0,0,0,72.33,31Z" />
|
||
|
|
<path d="M80.05,29.5,75,14.57l1.81-.38,3,9.1.47,1.51h0l-.13-1.59-.36-9.66,1.8-.38,3.9,9.3.5,1.44h0l-.2-1.52L85,12.45l1.56-.33L88,27.81l-1.88.4-4.18-9.95-.54-1.51h0l.15,1.59.43,10.75Z" />
|
||
|
|
<path d="M92.77,27.24l-1.87.11L90,11.73l1.83-.1L97.94,21.7l.69,1.52h.06l-.15-1.54-.6-10.4,1.87-.11.91,15.62-1.87.11-6-9.91L92,15.39,92.17,17Z" />
|
||
|
|
<path d="M115.47,28.25l4-15.14,8.32,2.17-.39,1.51L121,15.13l-1.35,5.15,5.75,1.5-.4,1.51-5.74-1.5-1.82,7Z" />
|
||
|
|
<path d="M130.38,33.36a4.54,4.54,0,0,1-2.91-3.63,11.34,11.34,0,0,1,1-6.13,11.32,11.32,0,0,1,3.61-5.06,4.8,4.8,0,0,1,7.52,3.1,11.29,11.29,0,0,1-1,6.12,11.36,11.36,0,0,1-3.6,5.07A4.51,4.51,0,0,1,130.38,33.36Zm.59-1.45a2.84,2.84,0,0,0,2.91-.61A10.17,10.17,0,0,0,136.71,27a10.25,10.25,0,0,0,1-5,2.64,2.64,0,0,0-4.54-1.87,10.24,10.24,0,0,0-2.83,4.31,10.14,10.14,0,0,0-1,5.05A2.83,2.83,0,0,0,131,31.91Z" />
|
||
|
|
<path d="M142.27,31.16l-3.43,5.7-1.75-1,8.06-13.41,3.59,2.15a8.3,8.3,0,0,1,2.36,1.91,3.2,3.2,0,0,1,.63,1.86,3.43,3.43,0,0,1-.48,1.83A5.22,5.22,0,0,1,150,31.53a5.7,5.7,0,0,1-1.68.9,6.2,6.2,0,0,1-2.23.25l.11,8.61L144.13,40,144,32.2Zm.8-1.34,2.44,1.46a5.07,5.07,0,0,0,1.77-.18,4,4,0,0,0,1.21-.63,3.35,3.35,0,0,0,.84-.93,2.16,2.16,0,0,0,.22-1.92,4.76,4.76,0,0,0-2.15-2.05l-1.31-.78Z" />
|
||
|
|
<path d="M163.43,55.34l-1.28,1.15-5.63-6.3L168.2,39.77,173.72,46l-1.17,1-4.17-4.67-4,3.54,3.75,4.2-1.17,1-3.75-4.2-4.08,3.64Z" />
|
||
|
|
<path d="M164.35,59.41l13.09-8.56,4.71,7.2-1.31.86-3.59-5.5-4.46,2.92,3.25,5-1.3.85-3.25-5-6,3.94Z" />
|
||
|
|
<path d="M170.58,69.49,184.8,63l3.58,7.82-1.42.65-2.73-6-4.84,2.22,2.47,5.4-1.42.65L178,68.34l-6.55,3Z" />
|
||
|
|
<path d="M179.16,87.8l-1.65.47-2.34-8.11,15-4.33,2.29,8-1.51.43-1.73-6-5.11,1.47,1.56,5.42-1.5.43-1.56-5.42-5.26,1.52Z" />
|
||
|
|
<path d="M179.52,100.42a9,9,0,0,1-1.06-3,6.14,6.14,0,0,1,.54-3.48,6.42,6.42,0,0,1,2.59-2.75A11.62,11.62,0,0,1,190.27,90a6.4,6.4,0,0,1,3.22,2,6.12,6.12,0,0,1,1.43,3.24,9.14,9.14,0,0,1-.24,3.2l-1.84.24a6.49,6.49,0,0,0,.52-3.32,3.45,3.45,0,0,0-1.11-2.09A5.72,5.72,0,0,0,189.64,92a10.15,10.15,0,0,0-6.94.92,5.83,5.83,0,0,0-2.19,1.92,3.47,3.47,0,0,0-.51,2.28,6.51,6.51,0,0,0,1.35,3.08Z" />
|
||
|
|
<path d="M179.38,106.51l13.92.3.1-4.68,1.72,0-.24,11.41-1.73,0,.1-4.68-13.91-.31Z" />
|
||
|
|
</g>
|
||
|
|
<line x1="105.86" y1="80" x2="105.86" y2="130" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
|
||
|
|
<line x1="105.86" y1="130" x2="97" y2="121.15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
|
||
|
|
<line x1="105.89" y1="130.01" x2="114.74" y2="121.15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
|
||
|
|
</svg>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
|
||
|
|
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script><script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|