How to animate fire in the footer with Gooey SVG

In English is the word sticky has the meaning of clay or gluing. Appearance sticky can easily be created using the SVG image format. SVG or Scalable vector graphics is an image format that uses XML as the basis for creating two-dimensional graphics. These graphics consist of paths, images and / or text that can be changed without affecting the quality.

By using SVG, we can display various display animations on the website. One of them is the fire animation in the footer. The fire in the footer is not only red, but also forms flames with different shapes.

Then how do you create a fire animation with SVG? Let’s just open up your computer and do some of the simple steps below.

Tutorials

1. Open the XAMPP control panel and activate Apache.

2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

    Cara Membuat Animasi Api di Footer dengan CSS Gooey  

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named Footer fire – save the code above with the name index.html.

3. To see the results of the script code above, you can open your browser and type http: // localhost / FooterApi.

4. Enter the following CSS code to create a footer.

body {  display: grid;  grid-template-rows: 1fr auto;  grid-template-areas: "main" "footer";  overflow-x: hidden;  background: #ffe4f1;  min-height: 100vh;  font-family: 'Open Sans', sans-serif;}body .footer {  z-index: 1;  --footer-background:#ED5565;  display: grid;  position: relative;  grid-area: footer;  min-height: 12rem;}body .footer .bubbles {  position: absolute;  top: 0;  left: 0;  right: 0;  height: 1rem;  background: var(--footer-background);  -webkit-filter: url("#blob");          filter: url("#blob");}body .footer .bubbles .bubble {  position: absolute;  left: var(--position, 50%);  background: var(--footer-background);  border-radius: 100%;  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);  -webkit-transform: translate(-50%, 100%);          transform: translate(-50%, 100%);}body .footer .content {  z-index: 2;  display: grid;  grid-template-columns: 1fr auto;  grid-gap: 4rem;  padding: 2rem;  background: var(--footer-background);}body .footer .content a, body .footer .content p {  color: #F5F7FA;  text-decoration: none;}body .footer .content b {  color: white;}body .footer .content p {  margin: 0;  font-size: .75rem;}body .footer .content > div {  display: -webkit-box;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;          flex-direction: column;  -webkit-box-pack: center;          justify-content: center;}body .footer .content > div > div {  margin: 0.25rem 0;}body .footer .content > div > div > * {  margin-right: .5rem;}body .footer .content > div .image {  align-self: center;  width: 4rem;  height: 4rem;  margin: 0.25rem 0;  background-size: cover;  background-position: center;}@-webkit-keyframes bubble-size {  0%, 75% {    width: var(--size, 4rem);    height: var(--size, 4rem);  }  100% {    width: 0rem;    height: 0rem;  }}@keyframes bubble-size {  0%, 75% {    width: var(--size, 4rem);    height: var(--size, 4rem);  }  100% {    width: 0rem;    height: 0rem;  }}@-webkit-keyframes bubble-move {  0% {    bottom: -4rem;  }  100% {    bottom: var(--distance, 10rem);  }}@keyframes bubble-move {  0% {    bottom: -4rem;  }  100% {    bottom: var(--distance, 10rem);  }}

Save CSS code in the xampplite folder – htdocs – select folder Footer fire – Create a new folder named CSS – Save the CSS code under the name style.css.

5. Reload the URL address: http: // localhost / FooterApi. The footer display but the footer fire animation did not appear.

6. To see the fire animation in the footer, open the index.html file again and enter the following SVG code.

                              

Don’t forget Ctrl + S.

7. Reload the URL address: http: // localhost / FooterApi. The view from the fire footer.

See more.

8. Done, very interesting, isn’t it ?.

Remarks:

  1. Htdocs is one of the standard folders of XAMPP, whose special task is to store files to be executed such as PHP, HTML, CSS and JavaScript files.
  2. Then maybe someone asks about the meaning of http: // localhost / FooterApi. Localhost is a local server on the computer. Localhost can be activated by clicking Start Apache in the XAMPP control panel. FooterApi refers to my FooterApi folder in xampplite – htdocs. Also, index.html and style.css are the names of the files stored in the script code above.

This is the explanation from the tutorial ‘How to Make Fire Animation in Footer with Gooey SVG’. Much luck.






Leave a Reply

Your email address will not be published.