CODEWITHSUNDEEP
csscss-animationsbootstrap-5
Adamu Abdulkarim Dee
Adamu Abdulkarim Dee

Reputation: 196

How can I add Bootstrap 5 animation to a web page

I want to add animations like This one to a background of this page down below, but i don't know how to do that using bootstrap 5, the image i provided up here, i want it to be the background of my html page, How can i do this please?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">

My Templates:

<div class="container-fluid bg-light bg-body shadow-lg">
        <div class="row">
                <nav class="navbar navbar-expand-lg navbar-light bg-light bg-body shadow-sm">
                    <div class="container">
                        <a class="navbar-brand" href="#" style="color: dodgerblue; font-size: 20px;">DB</a>
                        <div class="navbar-nav">
                            <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">About</a>
                            <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Contact</a>
                            <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Pricing</a>
                            <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Disabled</a>
                          </div>
                    </div>
                </nav>

            <div class="col">
                <div class="container p-5">
                    <h1>Landing Page</h1>
                    <br>
                    <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur recusandae 
                    accusamus enim dolorum sequi saepe unde minima</h4>
                    <br>
                    <a class="btn btn-primary shadow-lg bg-body text-dark" href="">Get Started</a>
                </div>
            </div>

            <div class="col-md-6">
                <div class="p-5">
                    <h2 class="text-center">Sign In</h2>
                <br>
                <form method="POST" action="{% url 'login' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label class="text-primary text-dark font-weight-bold">Enter School Name</label>
                        <input type="text" class="form-control" name="username" placeholder="School Name">
                    </div>
  
                    <br>
                    <div class="form-group">
                        <label class="text-primary text-dark font-weight-bold">Enter School Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Enter Password">
                    </div>
                    <br>
                    <button type="submit" class="btn btn-primary btn-block">Login</button>
                </form>
                </div>
            </div>


        </div>
    </div>

Upvotes: 1

Views: 2724

Answers (1)

IT goldman
IT goldman

Reputation: 19483

Just take the code from the fiddle (the compiled css) and use bubbles as the class for your required container. In this case, I used a fixed div as the background of page.

(Wait for it...)

body {
  background: #1a1e23;
  margin: 0;
}

.bubbles {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  border: 1px solid red;
  margin: auto;
}

.bubble {
  position: absolute;
  left: var(--bubble-left-offset);
  bottom: -75%;
  display: block;
  width: var(--bubble-radius);
  height: var(--bubble-radius);
  border-radius: 50%;
  animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite;
}

.bubble::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(136, 246, 251, 0.3);
  border-radius: inherit;
  animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite;
}

.bubble:nth-child(0) {
  --bubble-left-offset: 70vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(1) {
  --bubble-left-offset: 92vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(2) {
  --bubble-left-offset: 60vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(3) {
  --bubble-left-offset: 93vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(4) {
  --bubble-left-offset: 77vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(5) {
  --bubble-left-offset: 36vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(6) {
  --bubble-left-offset: 33vw;
  --bubble-radius: 6vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(7) {
  --bubble-left-offset: 84vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(8) {
  --bubble-left-offset: 3vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(9) {
  --bubble-left-offset: 89vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(10) {
  --bubble-left-offset: 87vw;
  --bubble-radius: 9vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(11) {
  --bubble-left-offset: 98vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(12) {
  --bubble-left-offset: 80vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(13) {
  --bubble-left-offset: 97vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(14) {
  --bubble-left-offset: 28vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(15) {
  --bubble-left-offset: 64vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(16) {
  --bubble-left-offset: 3vw;
  --bubble-radius: 6vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(17) {
  --bubble-left-offset: 14vw;
  --bubble-radius: 6vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(18) {
  --bubble-left-offset: 41vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(19) {
  --bubble-left-offset: 31vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(20) {
  --bubble-left-offset: 49vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(21) {
  --bubble-left-offset: 89vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(22) {
  --bubble-left-offset: 47vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(23) {
  --bubble-left-offset: 93vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(24) {
  --bubble-left-offset: 72vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(25) {
  --bubble-left-offset: 68vw;
  --bubble-radius: 4vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(26) {
  --bubble-left-offset: 15vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(27) {
  --bubble-left-offset: 20vw;
  --bubble-radius: 4vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(28) {
  --bubble-left-offset: 51vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(29) {
  --bubble-left-offset: 31vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(30) {
  --bubble-left-offset: 45vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(31) {
  --bubble-left-offset: 9vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(32) {
  --bubble-left-offset: 62vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(33) {
  --bubble-left-offset: 8vw;
  --bubble-radius: 4vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(34) {
  --bubble-left-offset: 76vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(35) {
  --bubble-left-offset: 22vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(36) {
  --bubble-left-offset: 82vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(37) {
  --bubble-left-offset: 30vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(38) {
  --bubble-left-offset: 96vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(39) {
  --bubble-left-offset: 13vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(40) {
  --bubble-left-offset: 8vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(41) {
  --bubble-left-offset: 66vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(42) {
  --bubble-left-offset: 11vw;
  --bubble-radius: 4vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(43) {
  --bubble-left-offset: 57vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(44) {
  --bubble-left-offset: 53vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}

.bubble:nth-child(45) {
  --bubble-left-offset: 18vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(46) {
  --bubble-left-offset: 72vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(47) {
  --bubble-left-offset: 80vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(48) {
  --bubble-left-offset: 83vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(49) {
  --bubble-left-offset: 16vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}

.bubble:nth-child(50) {
  --bubble-left-offset: 0vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}

@keyframes float-up {
  to {
    transform: translateY(-175vh);
  }
}

@keyframes sway-left-to-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes sway-right-to-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container-fluid bg-light bg-body shadow-lg">
  <div class="row">

    <nav class="navbar navbar-expand-lg navbar-light bg-light bg-body shadow-sm">
      <div class="container">
        <a class="navbar-brand" href="#" style="color: dodgerblue; font-size: 20px;">DB</a>
        <div class="navbar-nav">
          <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">About</a>
          <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Contact</a>
          <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Pricing</a>
          <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Disabled</a>
        </div>
      </div>
    </nav>

    <div class="bubbles">
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
    </div>

    <div class="col position-relative">


      <div class="container p-5">
        <h1>Landing Page</h1>
        <br>
        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur recusandae accusamus enim dolorum sequi saepe unde minima</h4>
        <br>
        <a class="btn btn-primary shadow-lg bg-body text-dark" href="">Get Started</a>
      </div>
    </div>

    <div class="col-md-6">
      <div class="p-5">
        <h2 class="text-center">Sign In</h2>
        <br>
        <form method="POST" action="{% url 'login' %}">
          {% csrf_token %}
          <div class="form-group">
            <label class="text-primary text-dark font-weight-bold">Enter School Name</label>
            <input type="text" class="form-control" name="username" placeholder="School Name">
          </div>

          <br>
          <div class="form-group">
            <label class="text-primary text-dark font-weight-bold">Enter School Password</label>
            <input type="password" class="form-control" name="password" placeholder="Enter Password">
          </div>
          <br>
          <button type="submit" class="btn btn-primary btn-block">Login</button>
        </form>
      </div>
    </div>


  </div>
</div>

Upvotes: 1

Related Questions