Share via

How to add background animation in asp.net

Agha Khan 166 Reputation points
2023-03-18T06:15:06.6233333+00:00

I wanted to bring Particle animation into asp.net Razor pages. The Particle animation works fine with a simple page with an Html5 page as a background, implying it is not part of the main rending page and is a background layer. The animation is written with JavaScript and looks for an id for rending. It works fine but does not show the animation under control or on the same line.

https://1drv.ms/u/s!AtjIdnVOoJXtpNthBNsruHOX_s8Riw?e=FtJuSa

Thank you.

Developer technologies ASP.NET ASP.NET Core
Accepted answer
  1. Anonymous
    2023-03-20T06:38:12.7466667+00:00

    Hi @Agha Khan

    As we all know, by default in asp.net core application, the Static files are stored within the project's wwwroot directory. More detail information, see https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-7.0.

    So, you can try to copy the static files from the assets folder to the asp.net core application wwwroot folder, like this:

    User's image

    Then, in the _Layout.cshtml page, you can add the css, image, or js reference like this:

        <link rel="stylesheet" href="~/css/style.css"> 
    <img src="~/img/A.jpg" class="d-block w-100" alt="Image 1">
    <script src="~/js/particles.min.js"></script>

    The _Layout.cshtml page code as below: add the @RenderBody() in the container:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RealCrimeToday</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/RealCrimeToday.styles.css" asp-append-version="true" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="~/css/style.css"> 
</head>
<body data-spy="scroll" data-offset="80">
    <!-- particles -->
    <div id="particles-js" style="opacity: 0.3;"></div>
    <div class="container" style="margin-top: 20px;">
        <div class="col-lg-3 col-md-3 col-sm-4">
            <div class="row">
                <div class="col-5">
                    <a href="https://www.hitwebcounter.com" target="_blank">
                        <img src="https://hitwebcounter.com/counter/counter.php?page=8120608&style=0018&nbdigits=5&type=ip&initCount=0" title="Free Counter" Alt="web counter" border="0" />
                    </a>
                </div>
                <div class="col-5">
                    <a href="https://www.hitwebcounter.com" target="_blank">
                        <img src="https://hitwebcounter.com/counter/counter.php?page=8332397&style=0001&nbdigits=5&type=page&initCount=0" title="Free Counter" Alt="web counter" border="0" />
                    </a>
                </div>
            </div>
        </div>

        <h1>Real Crime Today</h1>
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <ol class="carousel-indicators">
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="~/img/A.jpg" class="d-block w-100" alt="Image 1">
                </div>
                <div class="carousel-item">
                    <img src="~/img/B.jpg" class="d-block w-100" alt="Image 2">
                </div>
                <div class="carousel-item">
                    <img src="~/img/C.jpg" class="d-block w-100" alt="Image 3">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="~/img/logo.png" alt="logo" width="206" height="60"
                     class="d-inline-block align-text-top">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <ul class="navbar-nav">
                    <li>
                        <a class="nav-link" aria-current="page" href="index.html">
                            <div style="width:130px;height:50px;background:gray;  border:2px solid #000;padding-left: 10px;padding-right: 10px;"><h1>Home</h1></div>
                        </a>
                    </li>
                    <li><a class="nav-link" href="index2.html" id="DownloadPage"><h1>Contact us</h1></a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- START NAVBAR -->
    <div id="navigation" class="navbar-light bg-faded site-navigation" style="margin-top: 20px;">
        <div class="container"> 
                @RenderBody() 
        </div>
    </div>
    <!-- <div id="particles-js"></div> -->
    <script src="~/js/particles.min.js"></script>
    <script src="~/js/app.js"></script>
    <script src="~/js/particles.min.js"></script>
    <script src="~/js/app.js"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
    <script>
        addEventListener("click", function () {
            var el = document.documentElement
                , rfs =
                    el.requestFullScreen
                    || el.webkitRequestFullScreen
                    || el.mozRequestFullScreen
                ;
            rfs.call(el);
        });

        document.getElementById("IndexPage").focus();
    </script>
    <!-- hitwebcounter Code START -->
    <!-- <a href="https://www.hitwebcounter.com" target="_blank">
    <img src="https://hitwebcounter.com/counter/counter.php?page=8108863&style=0005&nbdigits=9&type=page&initCount=0" title="Free Counter" Alt="web counter"   border="0" /></a>        -->
</body>

</html>

    After that, in the content page, such as Index.cshtml page (it will use above layout page), add the image section like this:

    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<section id="portfolio" class="our_portfolio section-padding">
    <div class="container">

        <div class="row portfolio_item">
            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/cjyh" width="100%"
                           Height="100%">
                            <img src="~/img/books/PremeditatedCrime.png"
                                 alt="PremeditatedCrime" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/aoud/" width="100%"
                           Height="100%">
                            <img src="~/img/books/Interview.png" alt="Interview.jpg"
                                 width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/dlzo/" width="100%"
                           Height="100%">
                            <img src="~/img/books/Original.png"
                                 alt="Original.png" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/jorp" width="100%"
                           Height="100%">
                            <img src="~/img/books/CindyLarson.png"
                                 alt="CindyLarson" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>
            <!-- <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/hpfb" width="100%"
                            Height="100%"><img src="~/img/books/PoliceInterview.png"
                                alt="PoliceInterview" width="170" height="220"></a>
                    </nav>
                </div>
            </div> -->
            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/psyr/" width="100%"
                           Height="100%">
                            <img src="~/img/books/Reporting.png"
                                 alt="Reporting" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/xwku" width="100%"
                           Height="100%">
                            <img src="~/img/books/RajahInterview.png"
                                 alt="RajahInterview" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>

        </div>

        <div class="row portfolio_item">
            <!-- <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/pxvn/" width="100%"
                            Height="100%"><img src="~/img/books/JudgeJudy.png"
                                alt="JudgeJudy.png" width="170" height="220"></a>
                    </nav>
                </div>
            </div> -->

            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/hpfb" width="100%"
                           Height="100%">
                            <img src="~/img/books/PoliceInterview.png"
                                 alt="PoliceInterview" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/hwme/" width="100%"
                           Height="100%">
                            <img src="~/img/books/UnfairDoc.png" alt="Unfair.png"
                                 width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/pcar/" width="100%"
                           Height="100%">
                            <img src="~/img/books/RajahNahajskiInterview.png" alt="RajahNahajskiInterview.png"
                                 width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>



            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/ljpy" width="100%"
                           Height="100%">
                            <img src="~/img/books/CrimeReport.png"
                                 alt="CrimeReport.png" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/brql" width="100%"
                           Height="100%">
                            <img src="~/img/books/LifeSentence.png"
                                 alt="LifeSentence" width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-2">
                <div class="box book">
                    <nav class="navbar">
                        <a href="https://online.flipbuilder.com/AghaKhan/bgjk" width="100%"
                           Height="100%">
                            <img src="~/img/books/Immigration.png" alt="Immigration"
                                 width="170" height="220">
                        </a>
                    </nav>
                </div>
            </div>

        </div>

    </div>
</section>

    The result as below: as we can see the background animation works well.

    image1

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,

    Dillion

    1 person found this answer helpful.
    0 comments

2 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Agha Khan 166 Reputation points
    2023-03-20T04:33:06.3866667+00:00

    I already provided it from one drive. So you need two JaveScript files which you can find in the assert folder. To find an answer I also asked for help from ChatGpd and got the idea about canvas, but it did not work. The .gif solution is not correct because git is unrespose to the mouse event. Thanks for the reply. To see the working code you may check www.RealCrimeToday.com. Thanks. I want to convert HTML page to Asp.net page.

    0 comments
  2. Agha Khan 166 Reputation points
    2023-03-20T04:43:43.3466667+00:00

    Hi @Anonymous

    Thanks for the reply. I already provided the code at the provided link. You need two JavaScript files inside the assert folder. You can see the working example at www.RealCrimeToday.com. ChatGpd also did not help. Particle animation should be in a different layer, as I understand. The gif solution will not work because the gif does not handle mouse events. Regards Agha

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.