7 great HTML effects anyone can add to their website

You want your website to look great, but lack web development skills? Do not despair! You don't need to know CSS or PHP to build a favorite website. This article will give you 7 free HTML effect templates. They will enhance the functionality and user experience for your site. And they can contain some CSS and PHP too. Perhaps one of these effects is what you're looking for.

1. Parallax effect

You may have seen the Parallax effect in online newspapers. When you scroll down to an article, the wallpaper will move slower than the previous content. When you enter another part of the article, the wallpaper will change. It is a great effect to deepen the image for content.

1. Instructions for creating a website for beginners

Since this is not a pure HTML effect, the article can only provide animated GIFs to illustrate.

Below you will see a basic version of Parallax, a scrolling text box on a static wallpaper when you scroll.

You can create this effect by copying the above code from W3Schools.

The most complex version of this effect is a combination of HTML, CSS and JS.

You can download the effect from CodePen.

2. Scrollable text box

This is a simple HTML element but its usefulness allows you to encapsulate long paragraphs of text into a compact format. This way it does not occupy the entire space on the page.

Input HTML:

If you want something interesting, you can also get the code for a customizable comment box from Quackit.com. They provide some templates, but you can also use their editors to change and run your own code.

3. Highlight text

With simple HTML tags, you can add tons of effects to text or images. Note that not all of them work on browsers. The HTML tags mentioned here work in Google Chrome, Microsoft Edge and Mozilla Firefox.

Input HTML:

Văn bản bạn muốn đánh dấu ở đây

4. Add wallpaper to text

Similarly, you can change the color of the text or add a wallpaper. This is only really interesting if your text is large enough, which is why you should also increase the font size.

Input:

Text you need to add wallpaper here

5. Add a caption to the title

A title legend appears when you hover your mouse over a text or image. You know this from images or text links. This is how you can add it to plain text.

Input:

Nội dung bạn muốn giải thích ở đây

6. Scroll text or create a text effect that moves up and down

When searching for "marquee html" on Google, you will see a text that informs you of the time of the search results. It is an effect created by the marquee tag. Although this HTML feature has been deprecated, most browsers still support it.

Input:

Text content you want to scroll here

You can add other properties to control scrolling, background color, direction, height and more. These effects can become quite annoying if you abuse it.

For a falling text effect, go to Quackit again and copy the highly customizable marquee code.

7. Add conversion menu

The most interesting HTML effects are dynamic HTML effects. However, they are often based on scripts. It is a bit more complicated than normal HTML tags because it works with a style table and scripts. The advantage is that you don't have to download a CSS file or script to make it work, you can put all the necessary information into the part of the website.

Input:

Add the following code to the section of the page:

 

And this code wherever you want the menu to appear.

– Browsers/Addons

– Web Apps

– How-To Tips

– Cool Software

…and more!

– Karl Gechlik

– Tina

– Varun Kashyap

…and more!

– About

– Contact

– Archives

– Disclaimer