Handige tips

Hoe maak je een kruipende lijn op de site

Pin
Send
Share
Send
Send


Heb je ooit de abrupte beweging van het scrollen van tekst op een website gezien? Heb je je ooit afgevraagd hoe het is gemaakt? U hoeft niet ergens anders naar informatie te zoeken! Deze schuivende tekst wordt een selectiekader genoemd. Het kan in elke kleur worden gemaakt, het kan in elke richting worden gescrold en nog veel meer. Zie stap 1 hieronder om te beginnen!

  1. 1 Open het HTML-document als u dit nog niet hebt gedaan.
  2. 2 Plaats deze code waar u de selectiekader wilt hebben:
  3. 3 Selecteer een achtergrondkleur. U kunt de achtergrond van de kruipende lijn wijzigen door een hexadecimale waarde (HEX) of een RGB-waarde (rood-groen-blauw) op te geven achter het "background-color:" -gedeelte van de code (achtergrondkleur). De standaardwaarde hierboven, # 000080 is marineblauw kleur. Een complete lijst met kleuren en hun betekenis is te vinden.
  4. 4 Stel de schuifrichting in. Wijzig attribuut richting in de code voor een van de volgende opties: rechts (van links naar rechts), links (van rechts naar links (standaard)), omhoog (van beneden naar boven) of omlaag (van boven naar beneden).
  5. 5 Geef het aantal lopende cycli van de kruipende lijn aan. attribuut lus kan naar behoefte worden gewijzigd - het bepaalt hoe vaak de kruipende lijn moet bewegen. Als u wilt dat het continu beweegt, laat het dan zakken.
  6. 6 Geef de tekst op van de kruipende lijn. De tekst in de tag en de tag schuiven door de tekst op de kruipende lijn. Schrijf op wat u wilt weergeven.
  7. 7 Stel de tekstkleur in. Kenmerk toevoegen stijl binnenkomende wijzerplaat
  • Hier is een eenvoudige sluipende regelcode:

Dit is een scrollende scrolllijn.

  • Crawllijnen op sites zijn meestal een beetje vervelend.
  • Wees voorzichtig bij het wijzigen van kruipende lijnkenmerken.

Kruipende lijn op HTML. HTML basics voor beginners. Les nummer 9

Hallo allemaal!
Doorgaan met het leren van de basisprincipes van HTML.
In deze les zal ik het vertellen en onderwijzen hoe een kruipende lijn te maken in een HTML-document. Dit is een soort primitieve animatie op een website zonder het gebruik van grafische editors.
Een kruipende lijn kan worden gebruikt om nieuws, promoties, een reclameboodschap en zelfs voor mooie ontwerpmomenten weer te geven (bijvoorbeeld: een wolk in de lucht beweegt in de kop van een site). Ik denk dat u zelf de toepassing van een lopende lijn op uw site zult vinden, en mijn taak is nu om u te vertellen hoe dit wordt gedaan en hoe het er in de praktijk uitziet.
Gebruik de tag om een ​​kruipende lijn te maken:

* attributen voor kruipende lijn
selectiekader achtergrondkleur
Om de achtergrond van de lopende lijn te kleuren, voegt u het kenmerk "bgcolor" toe aan de tag "selectiekader":

resultaat:
Kruipende lijn

○ hoogte en breedte van een lopende lijn
Om de hoogte en breedte van de kruipende lijn in te stellen, voegt u het kenmerk "breedte" en "hoogte" toe aan de selectiekader:

○ kruipend lijngedrag
Voeg het kenmerk "gedrag" toe aan de selectiekader met de volgende waarden:

bladeren - normaal bladeren (standaard),

schuif - de lijn begint vanaf de ene rand en stopt bij de andere,

afwisselend - de lijn gaat van rand naar rand

normaal scrollen (standaard)

De kruipende lijn kruist vanaf de ene rand en stopt bij de andere

de lijn zal van rand naar rand bewegen

○ kruipende lijnrichting
Voeg het richtingskenmerk met de volgende waarden toe aan de selectiekader:

links - verplaats de tekst naar links (standaard),

rechts - verplaats de tekst naar rechts,

omhoog - tekstbeweging van onder naar boven,

omlaag - tekstbeweging van boven naar beneden

verplaats de tekst naar links (standaard)

tekstbeweging naar rechts

tekstbeweging van onder naar boven

tekstbeweging van boven naar beneden

○ kruipende lijnsnelheid
Om de snelheid van het verplaatsen van de kruipende lijn aan te passen, voegt u het kenmerk scrollamount toe aan de selectiekader:

Hoe groter de waarde, hoe groter de snelheid.

○ kruipende lijnvertraging
Een ander kenmerk waarmee u de snelheid kunt aanpassen. Hoe hoger de waarde, hoe lager de snelheid. Voeg het kenmerk scrolldelay toe aan de selectiekader:

○ aantal teken
Als u een bepaald aantal kruipende lijndoorgangen moet opgeven, voegt u het luskenmerk toe aan de selectiekader:

In het voorbeeld is de waarde "2", wat betekent dat er slechts twee passages zijn.

○ kruipende lijnstreepjes
Als u de inspringing aan de linker- en rechterkant wilt opgeven, voegt u het kenmerk "hspace" toe aan de selectiekader:

Een afbeelding invoegen in een kruipende lijn

Als u een kruipende lijn in een afbeelding wilt invoegen, plaatst u een al bekende tag tussen de tags om de afbeelding weer te geven:


Alle attributen voor de tag zijn ook in dit geval geldig.

Attributen en parameters

1. w - stelt de breedte van de lopende lijn in pixels / procent in. Degenen die bekend zijn met HTML zijn waarschijnlijk bekend met dit kenmerk. Bijvoorbeeld:

  • w - stelt de breedte in op 40% afhankelijk van de breedte van het blok waarin het object zich bevindt,

2. height = "number / percent" - stelt de hoogte van de lopende lijn in pixels / percentage in. Een voorbeeld kan hetzelfde worden gegeven als bij het eerste attribuut. Bijvoorbeeld:

  • height = "400px" - stelt de hoogte in op 400 pixels,
  • height = "30%" - stelt de hoogte in op 30% afhankelijk van de hoogte van het blok waar het object zich bevindt,

Opmerking: als de kruipende lijn uit slechts één lijn bestaat, kan de hoogte worden weggelaten, omdat deze automatisch wordt bepaald afhankelijk van de lettergrootte, die wordt ingesteld door de parameter font-size: Npx.

3. bgcolor = "color" - stelt de achtergrondkleur van de container in. U kunt een kleur op de pagina kiezen: html-kleurcodes. Opmerking: als het kenmerk bgcolor niet is ingesteld, is de achtergrond de achtergrondkleur van de pagina.

4. behavior = "parameter" - dit is een van de belangrijkste kenmerken van de lopende lijn. Het bepaalt het gedrag van de kruipende lijn. Het heeft nogal wat verschillende opties:
• afwisselend - de lopende lijn beweegt cyclisch: van rechts naar links, vervolgens van links naar rechts (loopt tussen de randen). Bijvoorbeeld:

En dus ziet deze lijn er op de site uit:

• scrollen - de kruipende lijn beweegt buiten het gebied in de richting die het richtingskenmerk aangeeft (met de parameter) en herhaalt zich vervolgens in cycli. Naar mijn mening komt deze optie het meest voor. Bijvoorbeeld:

5. direction = "parameters" - stelt de bewegingsrichting van de kruipende lijn in. Het kan de volgende waarden aannemen:
• omlaag - beweging van boven naar beneden. Bijvoorbeeld:

6. hspace = "number" - stelt het horizontale streepje in op andere objecten. De populaire img-tag heeft een soortgelijk kenmerk.

7. vspace = "number" - stelt het verticale streepje in op andere objecten.

8. loop = "number" - hoe vaak u door de inhoud moet bladeren. De parameter geeft een nummer aan dat het aantal herhalingen instelt. Opmerking: -1 betekent een oneindige schuiflus. De standaardwaarde is -1.

9. scrollamount = "number" - de snelheid van de bewegende lijn. Het aantal bepaalt het aantal pixels waarmee het object in een enkele klokcyclus beweegt. Opmerking: de standaardsnelheid is 6 pixels / sec. Bijvoorbeeld:

10. scrolldelay = "number" - stelt de vertraging tussen kruipende lijnstappen in milliseconden in. Bijvoorbeeld:

Uiteindelijk zal ik 2 voorbeelden geven van het gebruik van kruipende lijnen. Voorbeeld met een div-object:

Bekijk de video: Lijnen Teken Animatie - After Effects (Mei 2021).

Pin
Send
Share
Send
Send