 PC & MOBILE

 LIFESTYLE

 HARDWARE

 FREE STUFF

 VIDEOS

 ABOUT

 WHATNERD

 BLOCKS D.

 Email

 Facebook

 Pinterest

 Twitter
  YouTube

Search

PROGRAMMING

7 Cool HTML Effects That Anyone

Can Add to Their Website
Tina Sieber September 22, 2017 8 minutes
7 Cool HTML Effects That Anyone Can Add to Their Website
Email FacebookPinterest Twitter

Advertisement

You want your website to look awesome, but your web development skills are lacking?

How to Make a Website: For Beginners How to Make a Website: For

BeginnersToday I'll be guiding you through the process of making a complete website from scratch. Don't
worry if this sounds difficult. I'll guide you through it every step of the way.READ MORE
Don’t despair! You don’t have to know CSS or PHP to build a fancy site. Some good old
HTML and knowing how to copy-and-paste will do.

We have compiled 7 free HTML effect templates. They will enhance the functionality and user
experience of your site, while not breaking the bank. And they may contain some CSS and PHP
too.

Maybe one of these is what you’ve been looking for.

1. Parallax Effect
You have probably seen the Parallax Effect in fancy-magazine-style online articles. As you
scroll down a feature article, the background image appears to scroll at a different pace. As you
enter a different section of the article, the background image changes. It’s a cool effect that adds
visual depth to the content.

How to Create a Parallax Desktop Background With Rainmeter How to Create a

Parallax Desktop Background With RainmeterIf you desire a live animated desktop
wallpaper, look into Rainmeter! Here we'll show you how to create a unique parallax effect for your Windows
desktop background.READ MORE

Since this is not a pure HTML effect, we can only offer animated GIFs to demonstrate the
output.

Below you’ll see a basic version of the Parallax effect; a box of text moves across a static
background image as you scroll.
You can play with the effect and copy the code for the above simple Parallax scrolling effect
from W3Schools.

In its most sophisticated version, this effect is a combination of HTML, CSS, and JS.
Go ahead and fetch the codes for the above Header/Footer Parallax effect from CodePen.

2. Scrollable Text Box

This is a simple but helpful HTML element that lets you pack long snippets of text into a
compact format. This way it doesn’t take up the entire space on the page.

HTML input:

<div style=”width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-
shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111;
scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-
color: #6F4709;”>Your text will show here. And you can scroll down to go through all of it. You
just have to add a sufficient amount of text to make the scrollbars show. Obviously, this is not
enough,o let’s assume we have a little more to say. Eventually, the scrollbars will come in handy.
That’s it! :)</div>

Output demo:
Your text will show here. And you can scroll down to go through all of it. You just have
to add a sufficient amount of text to make the scrollbars show. Obviously, this is not
enough,o let’s assume we have a little more to say. Eventually, the scrollbars will come
in handy. That’s it! :)

You can play with the colors and the size of the text box to make it fit your needs.

If you desire something a little fancier, you can also fetch code for a customizable comment
box from Quackit. They offer several templates, but you can also use their editor to manually
change and teset (run) your custom code.

3. Highlight Text
With a simple <span> HTML tag you can add a ton of 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.

Input:

<span style=”background-color: #FFFF00″>Your highlighted text here.</span>

Output demo:

Your highlighted text here.

4. Add Background Image to Text
Likewise, you can change the color of your text or add a background image. This one only
becomes really exciting if your text has a big enough size, which is why I also increased the font
size.

Input:

<span style=”background-image: url(//static.makeuseof.com/wp-

content/uploads/2017/09/Background-Image.jpg); font-size: 20pt”>MakeUseOf
presents…</span>

Note that you could also add the style and font elements to a <strong> tag for the same effect,
plus bolded text.

Output demo:

MakeUseOf presents…

5. Add Title Tooltip

A title tooltip comes up when you scroll with the mouse over a piece of “manipulated” text or
image. You know these from images or linked text. Here is how you can add this one to plain
text.

Input:

<span title=”See, this is the tooltip. :)”>Move your mouse over me!</span>

Output demo:

Move your mouse over me!

6. Make 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? That’s an effect created by the now obsolete marquee tag. While
this HTML feature has been deprecated, most browser still support it.

Input:

<marquee>Make it scroll, baby!</marquee>

Output demo:

Make it scroll, baby!

You can add further attributes to control the scrolling behavior, background color, direction,
height, and more. These effects can become quite irritating if you overdo it.

For a cool falling text effect, head to Quackit again and copy their highly customized marquee
code.

7. Add a Switchmenu
The most exciting HTML effects are dynamic HTML effects. However, they are often script
based. Here is one effect for menus that I have come to adore. It’s a little more complicated than
your avarage 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, you can plant all necessary
information into the <head> section of your website.

Input:

Add the following code into the <head> section of your page:

<style type=”text/css”>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
</style><script type=”text/javascript”>/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu=”yes” //”yes” or “no”. Make
sure each SPAN content contains an incrementing ID starting at 1 (id=”sub1″,
id=”sub2″, etc)
var persisttype=”sitewide” //enter “sitewide” for menu to persist across site, “local” for
this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write(‘<style type=”text/css”>n’)
document.write(‘.submenu{display: none;}n’)
document.write(‘</style>n’)
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById(“masterdiv”).getElementsByTagName(“span”);
//DynamicDrive.com change
if(el.style.display != “block”){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className==”submenu”) //DynamicDrive.com change
ar[i].style.display = “none”;
}
el.style.display = “block”;
}else{
el.style.display = “none”;
}
}
}function get_cookie(Name) {
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu==”yes”){
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!=””)
document.getElementById(cookievalue).style.display=”block”
}
}function savemenustate(){
var inc=1, blockid=””
while (document.getElementById(“sub”+inc)){
if (document.getElementById(“sub”+inc).style.display==”block”){
blockid=”sub”+inc
break
}
inc++
}
var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname
var cookievalue=(persisttype==”sitewide”)? blockid+”;path=/” : blockid
document.cookie=cookiename+”=”+cookievalue
}if (window.addEventListener)
window.addEventListener(“load”, onloadfunction, false)
else if (window.attachEvent)
window.attachEvent(“onload”, onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu==”yes” && document.getElementById)
window.onunload=savemenustate</script>

And this code goes wherever you want the dynamic menu to appear.

<!– Keep all menus within masterdiv–>

<div id=”masterdiv”><div onclick=”SwitchMenu(‘sub1’)”>Topics</div>
<span id=”sub1″>
– <a href=”//www.makeuseof.com/service/browser”>Browsers/Addons</a><br>
– <a href=”//www.makeuseof.com/service/web_based”>Web Apps</a><br>
– <a href=”//www.makeuseof.com/service/how-to”>How-To Tips</a><br>
– <a href=”//www.makeuseof.com/service/applications”>Cool Software</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub2’)”>Staff Writers</div>
<span id=”sub2″>
– <a href=”//www.makeuseof.com/tag/author/karl-l-gechlik/”>Karl Gechlik</a><br>
– <a href=”//www.makeuseof.com/tag/author/tinsie/”>Tina</a><br>
– <a href=”//www.makeuseof.com/tag/author/varunkashyap/”>Varun Kashyap</a><br>
…and more!
</span><div onclick=”SwitchMenu(‘sub3’)”>Miscellaneous</div>
<span id=”sub3″>
– <a href=”//www.makeuseof.com/about/”>About</a><br>
– <a href=”//www.makeuseof.com/contact”>Contact</a><br>
– <a href=”//www.makeuseof.com/archives-2″>Archives</a><br>
– <a href=”//www.makeuseof.com/disclaimer”>Disclaimer</a><br>
</span></div>

Output demo:

Unfortunately, we cannot demonstrate this effect here. But the original source, Dynamic Drive,
features a working copy of this dynamic HTML effect.

Bonus: Tableizer!
If you want to display a spreadsheet on your site, let Tableizer! transform your data into an
HTML table. Just paste the raw data from Excel, Google Doc, or any other spreadsheet into the
respective field, tweak the table options, and click Tableize It! to receive the HTML output.
Now you can copy the HTML code and add it to your website. Consider editing the background-
colors to make it look a lot cooler.

While this is not really an HTML effect, it’s quite handy.

What Effect Do You Choose?

We’ve shown you seven (mostly) HTML effects you can use to enhance your website. Some are
basic, others come with bells and whistles. All of them are easy to implement.

For more <span> tags ideas, visit HTML Goodies. If you’re interested in dynamic HTML,
check out Dynamic Drive for tons of incredible scripts. Head to Quackit for more pure HTML
codes.

If you’d like to go deeper and write your own HTML, start with these easy to learn and simple
HTML code examples. And when you’re ready for HTML5, we’ve got you covered too.
Finally, when you’re developing your website, keep page speed in mind. And don’t forget
to install a website visitor tracking tool. It will help you improve the website experience for
visitors.

7 Ways to Make Your Website or Blog Load Faster for Visitors 7 Ways to Make
Your Website or Blog Load Faster for VisitorsHere are some top tips to speed up your
site and make sure your visitors stick around.READ MORE

Explore more about: HTML, Web Development, Webmaster Tools.

Arduino Programming for Beginners: Traffic Light Controller Project TutorialHow Codea
Lets You Create Your Own iPad Apps
Enjoyed this article? Stay informed by joining our
newsletter!
Enter your Email
Submit

Read our privacy policy

10 COMMENTSWRITE A COMMENT

Tina Sieber818 articles

Tina has been writing about consumer technology for over a decade. She holds a Doctorate in Natural
Sciences, a Diplom from Germany, and an MSc from Sweden. Her analytical background has helped her excel
as a technology journalist at MakeUseOf, where she's now managing keyword research and operations.

Latest Giveaways!
The One DSLR Accessory You Should Buy: Zhiyun Crane 3 Lab

Soliom S60 Solar Outdoor Security Camera Review

This Magical Device Just Killed Action Cams

Related Articles
DIY PROGRAMMING
Arduino Programming for Beginners: Traffic Light Controller Project Tutorial
INTERNET CREATIVE
The 8 Best Free Font Websites for Free Fonts Online
IPHONE AND IPAD
How to Use Your iPhone as a Webcam: 5 Methods That Work

Latest Videos

Tech Geeks Try British Food | TGTS S2E08

5 Free Alternatives to Microsoft Access

Stitch Monoprice Starter Kit Review

 The Soliom Security Cam Runs Completely on Solar Power

Geeks Try Drawing Tech Logos | TGTS S2E07

How to Install Visual Studio Code on the Raspberry Pi

Latest Deals
The Complete Microsoft & Oracle SQL Certification Bundle
The Complete Micros oft & Or acle SQL

$3289$39

Pay What You Want: The Complete Cyber Security Certification Bundle
Pay What You Want: The C omplete C yber

$2891$1
Pay What You Want: Stress Management Mastery Bundle
Pay What You Want: Stress Manag ement Mas ter y

$1194$1

The 2019 Ethical Hacker Master Class Bundle

The 2019 Ethic al H ac ker Mas ter Cl ass Bundle

$4883$39
Affiliate Disclosure: By buying the products we recommend, you help keep the lights on at MakeUseOf. Read
more. ow to Cr eate a Hos ting-Free Website With Itty Bi tty

How to Create a Hosting-Free Website With Itty Bitty

How to Cr eate a Hos ting-Free Website With Itty Bi tty

Steps to U nderstandi ng Basic H TML C ode

5 Steps to Understanding Basic HTML Code

5 Steps to Understanding Basic HTM L C ode

Free Game Devel opment Software T ools to M ake Your Own Games

5 Free Game Development Software Tools to Make Your Own

Games
5 Free Game D evelopment Softwar e T ools to M ake Your Own Games

0 eBay Sc ams to Be Aware Of

10 eBay Scams to Be Aware Of

10 eBay Scams to Be Aware Of

Mistakes You Shoul dn’t Make When Buildi ng a Web Page

9 Mistakes You Shouldn’t Make When Building a Web Page

9 Mistakes You Shouldn’t M ake When Buil ding a Web Page

es, You Can C ode on the Go: 7 of the Best HTML Editors for Androi d

Yes, You Can Code on the Go: 7 of the Best HTML Editors for
Android
Yes , You C an Code on the Go: 7 of the Best HTM L Editors for Andr oid

he 6 Best PDF Readers for Wi ndows i n 2019

The 6 Best PDF Readers for Windows in 2019

The 6 Best PDF Readers for Wi ndows in 2019

0 Us eful Excel Pr ojec t Management T empl ates for Tr ac king

10 Useful Excel Project Management Templates for Tracking

10 Useful Exc el Proj ect M anag ement Templates for Trac ki ng

© 2019 MakeUseOf. All Rights Reserved.