7 Coole HTML-effecten die iedereen kan toevoegen aan hun website

U wilt uw website Hoe u een website kunt maken: voor beginners Hoe u een website kunt maken: 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 meer om er fantastisch uit te zien, maar je vaardigheden op het gebied van webontwikkeling ontbreken?

Wanhoop niet! U hoeft niet te weten CSS Leer HTML en CSS met deze stap voor stap tutorials Leer HTML en CSS met deze stap voor stap handleidingen Benieuwd naar HTML, CSS en JavaScript? Als je denkt dat je de gave hebt om vanaf nul te leren hoe je websites kunt maken - hier zijn een paar geweldige stap-voor-stap tutorials die het proberen waard zijn. Lees meer of PHP om een ​​chique site te bouwen. Enkele goede oude HTML 5-stappen om de basis HTML-code te begrijpen 5 Stappen om de basis HTML-code te begrijpen Meer lezen en weten hoe te kopiëren en plakken zal 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

Je hebt waarschijnlijk het Parallax-effect gezien Hoe maak je een Parallax-bureaubladachtergrond met regenmeter Hoe maak je een Parallax-bureaubladachtergrond met 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 meer in online-artikelen in fancy-magazine-stijl. 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.

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

Hieronder ziet u een basisversie van het Parallax-effect; een tekstvak beweegt over een statische achtergrond terwijl u scrolt.

Je kunt met het effect spelen en de code kopiëren voor het bovenstaande eenvoudige Parallax-scrolleffect van W3Schools.

In de meest geavanceerde versie is dit effect een combinatie van HTML, CSS en JS.

Ga je gang en haal de codes op voor het bovenstaande Header / Footer Parallax effect van CodePen.

2. Scrollable Text Box

Dit is een eenvoudig maar nuttig HTML-element waarmee u lange tekstfragmenten in een compact formaat kunt inpakken. Op deze manier neemt het niet de volledige ruimte op de pagina in beslag.

HTML-invoer:

Uitvoerdemo:

Uw tekst wordt hier weergegeven. En je kunt naar beneden scrollen om alles te doorlopen. Je hoeft alleen een voldoende hoeveelheid tekst toe te voegen om de schuifbalken weer te geven. Het is duidelijk dat dit niet genoeg is, laten we aannemen dat we iets meer te zeggen hebben. Uiteindelijk zullen de schuifbalken van pas komen. Dat is het! :)

U kunt met de kleuren en de grootte van het tekstvak spelen om het aan uw behoeften te laten voldoen.

Als je iets een beetje liefhebber wilt, kun je ook code ophalen voor een aanpasbaar commentaarveld van Quackit. Ze bieden verschillende sjablonen, maar u kunt ook hun editor gebruiken om uw aangepaste code handmatig te wijzigen en in te stellen (uit te voeren).

3. Markeer Tekst

Met een simpele HTML-tag kun je een heleboel effecten toevoegen aan je tekst of afbeeldingen. Merk op dat ze niet allemaal in browsers werken. De hier genoemde werken in Google Chrome, Microsoft Edge en Mozilla Firefox.

Invoer:

Uw gemarkeerde tekst hier.

Uitvoerdemo:

Uw gemarkeerde tekst hier.

4. Achtergrondafbeelding aan tekst toevoegen

Op dezelfde manier kunt u de kleur van uw tekst wijzigen of een achtergrondafbeelding toevoegen. Deze wordt pas echt spannend als je tekst groot genoeg is, en daarom heb ik ook de lettergrootte vergroot.

Invoer:

MakeUseOf presenteert ...

Merk op dat u ook de stijl- en lettertype-elementen kunt toevoegen aan een tag voor hetzelfde effect, plus vetgedrukte tekst.

Uitvoerdemo:

MakeUseOf presenteert ...

5. Titeltip toevoegen

Er verschijnt een titeltooltip wanneer u met de muis over een stuk gaat “gemanipuleerd” tekst of afbeelding. U kent deze van afbeeldingen of gekoppelde tekst. Hier is hoe je deze kunt toevoegen aan platte tekst.

Invoer:

Beweeg je muis over mij!

Uitvoerdemo:

Beweeg je muis over mij!

6. Maak scrollen of vallende tekst

Wanneer u zoekt naar “selectiekader html” op Google ontdek je een beetje Easter Egg. Zie het aantal gescrollde zoekresultaten? Dat is een effect gemaakt door de nu verouderde selectietag. Hoewel deze HTML-functie verouderd is, ondersteunt de meeste browser dit nog steeds.

Invoer:

Laat het scrollen, schat!

Uitvoerdemo:

Laat het scrollen, schat!

U kunt meer kenmerken toevoegen om het schuifgedrag, de achtergrondkleur, richting, hoogte en meer te regelen. Deze effecten kunnen behoorlijk irriterend worden als je het overdrijft.

Voor een gaaf vallend teksteffect gaat u opnieuw naar Quackit en kopieert u hun zeer aangepaste selectiekadercode.

7. Voeg een menu Switch toe

De meest opwindende HTML-effecten zijn dynamische HTML-effecten. Ze zijn echter vaak op scripts gebaseerd. Hier is een effect voor menu's die ik ben gaan waarderen. Het is een beetje ingewikkelder dan uw gemiddelde HTML-tag, omdat het werkt met een stylesheet en scripts. Het voordeel is dat u geen CSS- of scriptbestand hoeft te uploaden om het te laten werken, u kunt alle benodigde informatie in de gedeelte van uw website.

Invoer:

Voeg de volgende code toe aan de gedeelte van uw pagina:

En deze code gaat overal waar u wilt dat het dynamische menu verschijnt.

Onderwerpen

- Browsers / Addons

- Web Apps

- How-To Tips

- Coole software

… en meer!

Schrijvers van het personeel

- Karl Gechlik

- Tina

- Varun Kashyap

… en meer!

Diversen

- Wat betreft

- Contact

- archief

- ontkenning

Uitvoerdemo:

Helaas kunnen we dit effect hier niet aantonen. Maar de oorspronkelijke bron, Dynamic Drive, bevat een werkkopie van dit dynamische HTML-effect.

Bonus: Tableizer!

Als u een spreadsheet op uw site wilt weergeven, laat u Tableizer! transformeer uw gegevens in een HTML-tabel. Plak de onbewerkte gegevens uit Excel, Google Doc of een andere spreadsheet in het betreffende veld, pas het aan tafel opties, en klik Tableize It! om de HTML-uitvoer te ontvangen.

Nu kunt u de HTML-code kopiëren en toevoegen aan uw website. Overweeg de achtergrondkleuren te bewerken om het er een stuk cooler uit te laten zien.

Hoewel dit niet echt een HTML-effect is, is het wel handig.

Welk effect heeft u?

We hebben je zeven (meestal) HTML-effecten getoond die je kunt gebruiken om je website te verbeteren. Sommige zijn eenvoudig, anderen komen met toeters en bellen. Ze zijn allemaal eenvoudig te implementeren.

Voor meer tags ideeën, bezoek HTML Goodies. Als je geïnteresseerd bent in dynamische HTML, bekijk dan Dynamic Drive voor ongelofelijke scripts. Ga naar Quackit voor meer pure HTML-codes.

Als u dieper wilt gaan en uw eigen HTML wilt schrijven, begint u met deze eenvoudig te leren HTML-codevoorbeelden. En wanneer u klaar bent voor HTML5, zorgen wij ook voor u.

Ten slotte, wanneer u uw website aan het ontwikkelen bent, houd paginasnelheid 7 manieren om uw website of blog sneller te laten laden voor bezoekers 7 manieren om uw website of blog sneller te laten laden voor bezoekers Hier zijn enkele tips om uw site te versnellen en ervoor te zorgen uw bezoekers blijven hangen. Lees meer in gedachten.

Meer informatie over: HTML, Web Development, Webmasterhulpprogramma's.