7 Cool HTML effects for your website

7 Cool HTML Effects that can make your Website Cool!!!

The "HTML" effects are used to create an attractive website with the help of new latest effects which are available in HTML5

1. Parallax Effect using HTML:

Parallax effect is an extremely popular design feature that is commonly used on WordPress websites. This special effect has featured in the gaming world for years but has more recently crossed over into web design. And so far this major trend doesn’t seem to be going anywhere, if anything it is being more widely used than ever.

In this Blog, we will consider what a parallax effect is and the benefits it can bring to your site and business. We will then discuss how to quickly and easily add a parallax effect to any WordPress website, page, or post, with a theme or a plugin.

CODE:

<style>

.parallax {
  background-image: url("img.jpg");
  min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
  background-size: cover;
}
</style>
<div class="parallax"></div>

2. Scrollable HTML Comment Box Code:

Scrolling effects are the ones that we have seen a lot on interactive websites. With libraries of animations triggered by scroll action, it’s become much easier to create dynamic scrolling web experiences.

You might have seen some interactive websites that bring delightful experience as users scroll down for more content. Or you might even have built one yourself using some scroll techniques to enrich the user experience. Having done some research and worked on a few websites using scroll effects, I decided to compile what I found and learned to share with you.

CODE:

Html code:

             <a href="#home">Home</a>
             <a href="#news">News</a>
             <a href="#contact">Contact</a>
             <a href="#about">About</a>

</div>

Css code:

div.scrollmenu {

             background-color: #333;
           overflow: auto;
           white-space: nowrap;
             }

             div.scrollmenu a {
             display: inline-block;
             color: white;
             text-align: center;
             padding: 14px;
             text-decoration: none;
             }

             div.scrollmenu a:hover {
             background-color: #777;
             }

3. Highlighted Text:

With a simple <span> HTML tag you can add a ton of cool effects to your text or images. Note that not all of them work across browsers. The ones mentioned here work in Google Chrome, Microsoft Edge, and Mozilla Firefox.

This HTML text effect highlights the text between the <span> tags.

CODE:

<p>how to make text <mark>Highlighted</mark> today.</p>

4. Add Background Image to Text:

       To insert an image in HTML, use the image tag and include a source and alt attribute.            Like any other HTML element, you’ll add images to the body section of your HTML file.
       The syntax looks like this: <img src="URL" alt="descriptive text">.
       An image is known as an “empty element” in HTML. While elements like a paragraph               contain content between their opening and closing tags, an image has no content or                closing tag. Instead, it contains attributes only. Compare the following lines of code to            see the difference between a paragraph and an image.

CODE:

body {

       background-image: url("paper.gif");
          background-color: #cccccc;
          }

5. Add a Title Tooltip:

A title tooltip comes up when you scroll with the mouse over a piece of "manipulated" text or image. You'll have seen these used on websites on images, linked text, or even menu items in desktop apps. Use this HTML code to add a tooltip to plain text on your webpage.

CODE:

Html Code:

<a href="#" data-toggle="tooltip" title="Hooray!">Title tooltip</a>

Script Code:

              $(document).ready(function(){
             $('[data-toggle="tooltip"]').tooltip();
              });

</script>

6. Scrolling or Falling Text:

When you search for "marquee html" on Google, you'll discover a little Easter Egg. See the scrolling search result count at the top? That's an effect created by the now obsolete marquee tag. While this once-cool HTML text effect has been deprecated, most browsers still support it.

CODE:

<marquee behavior="scroll" direction="left">HTML scrolling text... </marquee>

7. Build a Cool Switchmenu With HTML:

The coolest HTML tricks are dynamic HTML effects. However, they are often script based. Here is one effect for menus that you'll agree looks very slick.

It's a little more complicated than your average HTML tag because it works with a style sheet and scripts. The advantage is that you don't have to upload a CSS or script file to make it work. Instead, simply paste the following code into the <head> section of your website.

CODE:

Hewlett Packard Enterprise

CMS INTERN JOB At Hewlett Packard Enterprise, we bring together the brightest minds to create breakthrough technology solutions that advance the way people live and work. What sets us apart? Our people and our relentless dedication to helping our customers make their mark on the world. We are a team of doers, dreamers and visionaries; inspired by our purpose and driven by our strategy. We live by our three values: partner, innovate and act. Our legacy inspires us as we forge ahead, always pushing to discover what’s next. Every day is a new opportunity to advance and grow ourselves, our company and the industry. Some people call it an obsession, we call it a way of life. SOME INFORMATIONS AND BASIC REQUIREMENTS REGARDING THE JOB: Job ID: 1104914 Date Posted: 10/26/2021 Primary Location: Bangalore, Karnataka Other Locations: Bangalore, Karnataka, India,Chennai,TAMILNADU, India Job Category: Graduate Program and Internships Schedule: Full time Shift: No shift premium (India) Respons...

All About Tech

Search This Blog

Arcadis is Hiring!!!