Jumbotron waveAnimation

Kategori

@inherits System.Web.Mvc.WebViewPage<IEnumerable<Discus.Models.Post>>
@using Discus.Models;
@{
    string lang = ViewBag.LanguageShortName;
    Category category = ViewBag.Category as Category;
}
<div class="jumbotron jumbotron-fluid wavejumbot">
    <div class="waveWrapper waveAnimation">
        <div class="container-fluid wavecontainer">
            <h1 class="display-4 text-center">@category.CategoryTitle.HtmlEncode()</h1>
            <div class="text-center">
                <nav aria-label="breadcrumb" style="display:inline-block;">
                    @{ int breadcrumbcount = 2;}
                    <ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
                        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                            <a itemprop="item" href="@Partial.SiteAddress()@lang"><span itemprop="name">@Partial.Translate("Anasayfa", lang)</span></a>
                            <meta itemprop="position" content="1" />
                        </li>
                        @foreach (Category kat in Partial.BreadcrumbCategory(category.CategoryID))
                        {
                            <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                <a itemprop="item" href="@Partial.CategoryLink(kat.CategoryID)"><span itemprop="name">@kat.CategoryTitle.Replace("<br />", " ").HtmlEncode()</span></a>
                                <meta itemprop="position" content="@(breadcrumbcount)" />
                            </li>
                            breadcrumbcount++;
                        }
                    </ol>
                </nav>
            </div>
        </div>

        <div class="waveWrapperInner bgTop">
            <div class="wave waveTop"></div>
        </div>
        <div class="waveWrapperInner bgMiddle">
            <div class="wave waveMiddle"></div>
        </div>
        <div class="waveWrapperInner bgBottom">
            <div class="wave waveBottom"></div>
        </div>
    </div>
</div>

MakaleKategori

@{
    string lang = ViewBag.LanguageShortName;
    Category category = Partial.Category(Model.RefPostCategoryID);
}
<div class="jumbotron jumbotron-fluid wavejumbot">
    <div class="waveWrapper waveAnimation">
        <div class="container-fluid wavecontainer">
            <h1 class="display-4 text-center">@Model.PostTitle.HtmlEncode()</h1>
            <div class="text-center">
                <nav aria-label="breadcrumb" style="display:inline-block;">
                    @{ int breadcrumbcount = 2;}
                    <ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
                        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                            <a itemprop="item" href="@Partial.SiteAddress()@lang"><span itemprop="name">@Partial.Translate("Anasayfa", lang)</span></a>
                            <meta itemprop="position" content="1" />
                        </li>
                        @foreach (Category kat in Partial.BreadcrumbCategory(category.CategoryID))
                        {
                            <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                                <a itemprop="item" href="@Partial.CategoryLink(kat.CategoryID)"><span itemprop="name">@kat.CategoryTitle.Replace("<br />", " ").HtmlEncode()</span></a>
                                <meta itemprop="position" content="@(breadcrumbcount)" />
                            </li>
                            breadcrumbcount++;
                        }

                        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                            <a itemprop="item" href="@Partial.PostLink(Model.PostID)">@Model.PostTitle.HtmlEncode()</a>
                            <meta itemprop="position" content="@(breadcrumbcount)" />
                        </li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="waveWrapperInner bgTop">
            <div class="wave waveTop"></div>
        </div>
        <div class="waveWrapperInner bgMiddle">
            <div class="wave waveMiddle"></div>
        </div>
        <div class="waveWrapperInner bgBottom">
            <div class="wave waveBottom"></div>
        </div>
    </div>
</div>

CSS

@@keyframes move_wave {
        0% {
            transform: translateX(0) translateZ(0) scaleY(1);
        }

        50% {
            transform: translateX(-25%) translateZ(0) scaleY(0.55);
        }

        100% {
            transform: translateX(-50%) translateZ(0) scaleY(1);
        }
    }

    .jumbotron {
        background-color: #3c5476 !important;
    }

    .wavejumbot {
        position: relative;
        height: 250px;
    }

    .wavecontainer {
        position: absolute;
        z-index: 999;
        top: 50px;
    }

    .waveWrapper {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }

    .waveWrapperInner {
        position: absolute;
        width: 100%;
        overflow: hidden;
        height: 100%;
        bottom: -1px;
        /*background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);*/
    }

    .bgTop {
        z-index: 15;
        opacity: 0.5;
    }

    .bgMiddle {
        z-index: 10;
        opacity: 0.75;
    }

    .bgBottom {
        z-index: 5;
    }

    .wave {
        position: absolute;
        left: 0;
        width: 200%;
        height: 100%;
        background-repeat: repeat no-repeat;
        background-position: 0 bottom;
        transform-origin: center bottom;
    }

    .waveTop {
        background-size: 50% 100px;
    }

    .waveAnimation .waveTop {
        background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png');
        animation: move-wave 3s;
        -webkit-animation: move-wave 3s;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    .waveMiddle {
        background-size: 50% 120px;
    }

    .waveAnimation .waveMiddle {
        background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png');
        animation: move_wave 10s linear infinite;
    }

    .waveBottom {
        background-size: 50% 100px;
    }

    .waveAnimation .waveBottom {
        background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png');
        animation: move_wave 15s linear infinite;
    }
    .display-4 {
        font-size: 2.0rem;
        font-weight: 300;
        color: #fff;
        line-height: 1.2;
    }
    ol.breadcrumb a, ol.breadcrumb a:hover {
        color: white;
    }

https://www.sagcankurtaran.com.tr/tr/kurumsal