U wilt dat uw website er fantastisch uitziet, maar uw vaardigheden op het gebied van webontwikkeling ontbreken? Hoe een website te maken: voor beginners Hoe maak ik een website: voor beginners Vandaag zal ik u begeleiden bij het maken van een complete website vanaf nul. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er bij elke stap doorheen leiden. Lees verder

Wanhoop niet! U hoeft geen CSS of PHP te kennen om een ​​chique site te bouwen. Sommige goede oude HTML  en weten hoe te kopiëren en plakken zullen doen.

We hebben 7 gratis HTML-effect-sjablonen samengesteld. Ze zullen de functionaliteit en gebruikerservaring van uw site verbeteren, zonder de bank te verbreken. En ze kunnen ook wat CSS en PHP bevatten.

Misschien is een van deze dingen waarnaar u op zoek was.

1. Parallax-effect

U hebt waarschijnlijk het Parallax-effect gezien in online-artikelen in de stijl van een fancy tijdschrift. Terwijl u door een artikel bladert, lijkt de achtergrondafbeelding in een ander tempo te scrollen. Wanneer u een ander gedeelte van het artikel invoert, verandert de achtergrondafbeelding. Het is een cool effect dat visuele diepte toevoegt aan de inhoud. Hoe maak je een Parallax bureaubladachtergrond met regenmeter Hoe maak je een Parallax bureaubladachtergrond met een regenmeter Als je een live geanimeerde bureaubladachtergrond wilt, kijk dan eens naar Rainmeter! Hier laten we u zien hoe u een uniek parallax-effect creëert voor uw bureaubladachtergrond van Windows. Lees verder

Omdat dit geen zuiver HTML-effect is, kunnen we alleen geanimeerde GIF's aanbieden om de uitvoer te demonstreren.

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:

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(https://cdn.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:

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:

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

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. 17 Simple HTML Code Examples You Can Learn in 10 Minutes 17 Simple HTML Code Examples You Can Learn in 10 Minutes If you know the following 17 HTML tags (and the extra few that go with them), you'll be able to create a basic webpage from scratch or tweak the code created by an app like... Read More

Wat is je favoriete HTML-effect? En welke voeg je toe aan je website? Deel gerust een link in de commentaren om ons te laten zien wat je hebt gedaan! En als dit artikel je heeft geholpen, deel het dan met je vrienden en volgers op sociale media.