Efek Ombak

<div class="wave">
    <style type="text/css">
        .editorial-border {
            display: block;
            width: 100%;
            height: 100%;
            max-height: 60px;
            margin: 0;
            z-index:5;
            bottom:0;
            position:absolute;
            left:0px;
            float:left;
        }
        #parallax-menu {
            display: none;
        }
        .home #parallax-menu {
            display: block;
        }

        .parallax1 > use {
            animation: move-forever1 10s linear infinite;
            &:nth-child(1) {
            animation-delay: -3s;
            }
        }
        .parallax2 > use {
            animation: move-forever2 8s linear infinite;
            &:nth-child(1) {
                animation-delay: -3s;
            }
        }
        .parallax3 > use {
            animation: move-forever3 6s linear infinite;
            &:nth-child(1) {
                animation-delay: -3s;
            }
        }
        .parallax4 > use {
            animation: move-forever4 4s linear infinite;
            &:nth-child(1) {
                animation-delay: -3s;
            }
        }
        @keyframes move-forever1 {
            0% {
                transform: translate(85px, 0%);
            }
            100% {
                transform: translate(-90px, 0%);
            }
        }
        @keyframes move-forever2 {
            0% {
                transform: translate(-90px, 0%);
            }
            100% {
                transform: translate(85px, 0%);
            }
        }
        @keyframes move-forever3 {
            0% {
                transform: translate(85px, 0%);
            }
            100% {
                transform: translate(-90px, 0%);
            }
        }
        @keyframes move-forever4 {
            0% {
                transform: translate(-90px, 0%);
            }
            100% {
                transform: translate(85px, 0%);
            }
        }
        @media (max-width: 980px) {
            #main-menu, #parallax-menu, .home #parallax-menu{
                display:none
        }
    </style>

    <svg class='editorial-border' preserveAspectRatio='none' viewBox='0 24 150 28'>
        <defs>
            <path d='M-160 44c30 0    58-18 88-18s   58 18 88 18      58-18 88-18     58 18 88 18    v44h-352z' id='gentle-wave'></path>
        </defs>
        <g class='parallax1'>
            <use fill='#3bc3f9' x='50' xlink:href='#gentle-wave' y='3'></use>
        </g>
        <g class='parallax2'>
            <use fill='#1a8fe3' x='50' xlink:href='#gentle-wave' y='0'></use>
        </g>
        <g class='parallax3'>
            <use fill='#0f73d8' x='50' xlink:href='#gentle-wave' y='9'></use>
        </g>
        <g class='parallax4'>
            <use fill='#ffffff' x='50' xlink:href='#gentle-wave' y='6'></use>
        </g>
    </svg>
    <script type="text/javascript">
        $(document)["ready"](function() {
            "use strict";
            var a = $(window);
            $(".full-height")["height"](a["height"]());
            a["on"]("resize", function() {
                $(".full-height")["height"](a["height"]());
            });
            $('#parallax-menu ul').clone().appendTo('.scrolling-mobile-menu');
            $('.scrolling-mobile-menu-toggle').on('click', function() {
                $('body').toggleClass('scrolling-active');
                $('.overlay').fadeToggle(170);
            });
         });
    </script>
</div>