Ligne rampante sur le site

Lors du développement d’un site Web, une ligne rampante peut devenir un élément de conception intéressant qui attire l’attention. Il est particulièrement pratique de l'utiliser pour publier de brèves nouvelles, des informations sur les remises, les soldes, etc. De plus, un ticker est le moyen le plus simple de créer une animation sur un site Web.

La ligne courante est formée à l'aide de la balise ... (la balise de fermeture est obligatoire). À l'origine, l'étiquette était destinée uniquement à navigateur Internet Explorateur, mais versions modernes d'autres navigateurs le comprennent et le prennent également en charge, bien qu'il ne fasse pas partie de la spécification HTML. De ce fait, la présence d'une balise sur la page entraînera un code invalide, c'est-à-dire une erreur lors de la vérification, mais elle pourra être ignorée. Vous devez également tenir compte du fait que les navigateurs affichent le contenu du ticker différemment. Par conséquent, lors de la création d'un site, assurez-vous de vérifier sa sortie. Comme toujours, Internet Explorer occupe la première place en termes d'imprévisibilité du traitement du code HTML, et la balise ne fait pas exception. Google Chrome n'aime pas non plus cette balise.

Pour créer un site Web, il est particulièrement intéressant que le contenu du conteneur ne se limite pas à un simple texte et vous permette de déplacer tous les éléments de la page Web - images, texte, tableaux, éléments de formulaire, etc.

50% de réduction lors de la commande d'une assurance CASCO via Internet. Service de lavage de voiture gratuit pour chaque client

La longueur de la ligne rampante peut être limitée en définissant l'attribut width (longueur de la ligne) ou hspace (retrait des limites de défilement) en pixels ou en pourcentages. En parlant de navigateurs, dans cet exemple, j'ai dû saisir Espace non-cassant() et set style="letter-spacing: 0em" , car sans cette « chimie », Internet Explorer 7 (Doit mourir !) affichait incorrectement le ticker lorsque l'échelle d'affichage de la page était supérieure à 100 %.

Si vous faites d'un élément du téléscripteur un lien, vous obtenez une astuce intéressante « attrape-moi ! ». Dans notre exemple, pour suivre le lien, vous devez cliquer sur la voiture rouge.

Le mouvement de la ligne rampante peut être spécifié non seulement horizontalement, mais aussi verticalement. Dans ce cas, comme dans le précédent, vous pouvez spécifier les dimensions de la zone dans laquelle le mouvement se produira (respectivement les attributs width et height de la balise) :

Dans cet exemple, pour la ligne verticale, la différence est déjà Navigateurs Firefox 3.5 et Internet Explorer 7 et 8. En plus de la nécessité d'insérer un espace insécable () avant le début de la ligne rampante, l'inscription « casco » y est également affichée de manière décentrée, mais dans Opera, tout va bien. Si vous le souhaitez, vous pouvez vous entraîner à utiliser « mince » Méthodes HTML pour centrer cette étiquette dans les navigateurs spécifiés.

Pour la ligne rampante, vous pouvez définir des paramètres pour les éléments en mouvement, ce qui facilite la création d'effets originaux. Examinons les principaux attributs des balises :

• comportement - type de mouvement des éléments de ligne rampante :
  - faire défiler - d'un bord à l'autre dans une direction (par défaut),
  - glisser - après avoir effectué un nombre spécifié de passes, la ligne reste à gauche ou à droite bords de page,
  - alterné - la direction du mouvement change dans le sens opposé après avoir terminé chaque cycle ;
• bgcolor - couleur de fond de la ligne rampante ;
• direction - direction de déplacement de la ligne rampante :
  - gauche - gauche (par défaut),
  - c'est vrai - c'est vrai,
  - bas bas,
  - haut Haut;
• hauteur - la hauteur de la ligne rampante ;
• hspace - indentation à partir des bordures gauche et droite de la zone de défilement ;
• boucle - le nombre de fois que le ticker est affiché, par défaut - répétition infinie (sans fin) ;
• scrollamount - décalage en pixels par étape ;
• scrolldelay - le délai en millisecondes entre les étapes. Utilisé pour ralentir le mouvement des éléments téléscripteurs ;
• vraie vitesse - valeur minimum délais entre les étapes, par défaut 60 ms ;
• vspace - retrait vertical à partir des limites de défilement ;
• largeur - largeur du ticker.

Le texte et les éléments situés à l'intérieur des balises ... peuvent être formatés comme n'importe quel autre élément d'une page Web.

Note importante: si la longueur de la ligne rampante (texte + images) plus de largeur pages du site, alors assurez-vous de spécifier le paramètre width pour éviter les distorsions de mise en page dans certains navigateurs !

Si la ligne rampante est répétée sur plusieurs pages du site, il est alors pratique de la concevoir comme un encart (inclure), qui peut être rapidement modifié. Toutes les méthodes permettant d'inclure des fragments dans une page de site Web feront l'affaire. L’une des plus simples consiste à utiliser JavaScript. Sur la page, à l'endroit où doit se trouver la ligne rampante, insérez
,
et placez le texte de la ligne rampante elle-même dans un fichier stroka.js séparé, que vous placez dans le même dossier que les pages avec la ligne rampante. Vous trouverez ci-dessous une version d'un tel fichier avec définition de la couleur du texte de sortie :

//Document Java
document.write("Texte du ticket ");

Vérifiez que l'encodage de ce fichier est le même que celui de la page principale. Si vous utilisez Programme Adobe Dreamweaver, puis pour modifier l'encodage, vous devez sélectionner la section de menu Édition - Propriétés de la page - Titre/Encodage. Vous pouvez également modifier l'encodage du script dans Microsoft Word. Pour ce faire, ouvrez le document, définissez l'encodage souhaité s'il n'est pas affiché correctement (voir comment procéder dans l'aide de Word), puis enregistrez-le de la manière suivante : Fichier - Enregistrer sous - Texte brut - Enregistrer. Dans la fenêtre qui s'ouvre, vous pouvez définir l'encodage requis.

Bien entendu, en utilisant JavaScript, vous pouvez créer des effets supplémentaires lors de l'affichage d'un ticker. Par exemple, en ajoutant à l'intérieur de la balise, vous obtiendrez que le ticker s'arrête lorsque vous passez le curseur de la souris dessus et continue de l'afficher lorsque vous éloignez le curseur :

Arrête moi!

Comme indiqué ci-dessus, la balise génère un code invalide. Si vous souhaitez éviter cela, vous pouvez utiliser d'autres méthodes, par exemple : Scripts JavaScript etc. Cette question est discutée en détail sur le site Web a-cto.narod.ru. Il propose également une version intéressante d'une ligne rampante - la sortie de texte lettre par lettre, qui peut être définie pour n'importe quelle ligne du site :

Pour créer cet effet, insérez dans Bon endroit pays le code suivant :

var line="Ligne rampante lettre par lettre";
vitesse variable = 150 ;
var je = 0 ;
fonction impression() (
if(i++ , mais que se passe-t-il si les navigateurs définissent une phrase entourée de ces caractères comme une balise et ne l'affichent donc pas sur le moniteur ? Ou disons que vous avez vraiment besoin d'en écrire dans le texte, mais pas de donner la commande suivante au navigateur, mais pour donner un exemple de la façon dont il est écrit aux visiteurs de la page ?

À ces fins, des caractères dits spéciaux ont été inventés.

Par exemple, un caractère spécial< - будет значить что в этом месте текста нужно поставить знак < а спецсимвол >est indiqué par le symbole >.

Tous les caractères spéciaux commencent à être écrits avec le signe & - esperluette, ce signe indique au navigateur que le nom du caractère spécial suivra et qu'il doit être perçu non pas comme du texte, mais comme une commande. Ici, une autre question se pose : comment mettre effectivement le signe & - esperluette - dans le texte destiné à être affiché à l'écran ?

Le signe & a également son propre caractère spécial - &

C'est là qu'intervient la confusion...

Aussi, peut-être, un caractère spécial mérite-t-il une attention particulière - il s'agit d'un espace insécable, nous l'avons déjà rencontré. Le fait est que lorsque vous écrivez du texte dans un bloc-notes ou éditeur HTML Vous pouvez mettre autant d'espaces « simples » entre les mots que vous le souhaitez, mais lorsque la page est lue par un navigateur, ils sont tous « supprimés » et il n'y aura pas plus d'un espace entre les mots sur la page. Cela conduit souvent à des problèmes avec la conception du texte ; par exemple, il n'y a aucun moyen de créer une ligne rouge... alors les gens ont inventé un caractère spécial ; il est perçu par le navigateur non pas comme un espace, mais comme un signe, seulement invisible à l’œil humain.

Et on l'appelle incassable parce qu'un groupe de tels espaces est perçu comme un mot entier, par conséquent, il n'est pas reporté à la ligne suivante si la phrase correspond aux cadres établis ou au bord de la fenêtre. Ainsi, la fenêtre peut apparaître bande horizontale défilement, si vous n'en avez pas besoin, mettez des espaces réguliers entre eux

Exemple d'utilisation de caractères spéciaux :

exemple dans l'exemple

< /td>

< html> < head> < title>Ma première page< /title> < /head> < body> < center>< h2>Bonjour le monde!!!< /h2>< /center> < br> C'est ma première page ! < /body> < /html>

Un exemple dans un exemple... évoque des pensées philosophiques sur l'infini...

Eh bien, vous savez maintenant approximativement à quoi ressemblent tous ces exemples de « l’autre côté de l’écran ». Au fait, depuis que j'ai commencé à révéler des secrets militaires, cet exemple est un tableau de deux cellules, une fine à gauche remplit une fonction purement décorative. donc si vous êtes confronté à la tâche de dessiner une cellule de tableau sans aucun contenu, insérez-y un caractère espace. Vous vous souvenez de la règle selon laquelle il doit y avoir quelque chose ici ? Le caractère espace spécial est l’une des sorties dans ce cas.

En plus de ce qui précède, il existe toute une série de symboles spéciaux, qui n'existent pas : signes du zodiaque, combinaisons de cartes, bâtons, points, sapins de Noël, cocardes, fractions... Ils ne sont plus destinés à certaines tâches « spéciales ». , mais remplissent simplement leur rôle compte tenu de l'absence de ces caractères sur le clavier. Vous pouvez voir ma « collection » de caractères spéciaux

Ligne horizontale

Simple nouvelle balise trace une ligne horizontale dans la fenêtre, ne nécessite pas de balise de fermeture. Souvent utilisé dans la mise en page comme élément décoratif.

Il possède un certain nombre d'attributs, align - l'alignement avec l'une des trois valeurs (centre, gauche, droite) peut être appliqué si la longueur de la ligne est spécifiée au niveau de l'attribut width en pixels ou en pourcentages. Vous pouvez également définir l'attribut d'épaisseur de ligne - taille , l'attribut de couleur - couleur et, si nécessaire, désactiver l'ombre de ligne noshade .

Ligne horizontale


C'est juste la ligne par défaut :

Voici la ligne sans ombre :

Il s'agit d'une ligne peinte en couleur grue :

Ligne de 250 pixels de long :

Ligne de 250 de long et 5 pixels d'épaisseur :

Ligne 500 de long, 50 d'épaisseur, bleue :

Exemples d'alignement :

À mon avis, c'est assez simple et efficace.

Téléscripteur

La balise fait bouger le texte qui y est placé dans un sens ou dans un autre, en d'autres termes, elle en fait une ligne rampante. La ligne rampante possède un certain nombre de paramètres de défilement, qui sont définis par les attributs suivants :

comportement - détermine le type de défilement, peut avoir les valeurs suivantes :

• alterné - mouvements oscillatoires d'un bord à l'autre
• scroll - défilement du texte. le texte disparaîtra de l'écran et réapparaîtra du côté opposé de celui-ci
• slide - défilement du texte avec un arrêt.

scrollamount - vitesse de défilement de 1 à 10.
loop définit le nombre de fois que le ticker défile.

direction - direction du mouvement du texte. valeurs:

• haut Haut,
• bas bas,
• gauche - gauche,
• à droite - à droite.

bgcolor - couleur de fond de la ligne rampante,
hauteur - hauteur de ligne,
largeur - largeur de ligne.

Téléscripteur


Lignes de course
Ticker par défaut
Ligne courante de gauche à droite
Le ticker s'étend d'un bord à l'autre
Téléscripteur à la vitesse 10
Téléscripteur à la vitesse 1
Cette ligne ne défilera que deux fois
Ligne de course avec arrêt
Ligne rampante avec fond
Ticker avec limitation de la largeur de défilement
Ligne courante de bas en haut
Ligne rampante avec retraits des bordures

Eh bien, je pense que vous découvrirez par vous-même ce que c'est. Essayez d'utiliser diverses combinaisons attributs pour obtenir l’effet dont vous avez besoin. J'ajouterai seulement que vous pouvez faire avec le texte d'une ligne courante la même chose qu'avec un texte ordinaire : changer la taille, la couleur, le style, la police, transformer une phrase d'une ligne en lien... en écrivant les balises nécessaires à l'intérieur de l'étiquette

Dans cet article, je vais expliquer comment créer une ligne rampante sur un site Web à l'aide d'un outil spécial. Balise HTML- . Pour commencer, il convient de noter que l'utilisation d'un ticker comme sorte d'animation sur un site Web n'est plus à la mode depuis longtemps. On dit de ces sites qu'ils datent du siècle dernier.

À mon avis, dans les conditions actuelles, il vaut mieux ne pas utiliser de tickers du tout. Dans des cas extrêmes, ils ne peuvent être utilisés que pour une meilleure visibilité une information important(par exemple, promotions en cours, réductions). Il y en a plein d'autres méthodes modernes comment pouvez-vous le transmettre à l’utilisateur ? informations utiles(animation flash, bannières).

Il convient également de noter qu'il existe une autre façon de créer un ticker en plus de la balise de sélection. Cette méthode est implémentée via JavaScript, mais en raison du caractère inapproprié de son utilisation (elle charge la page), nous ne la considérerons même pas.

Balise HTML

Ainsi, en HTML, il existe une balise spéciale pour créer un ticker : .... Il possède de nombreux attributs avec des options assez simples, il ne devrait donc y avoir aucun problème avec les paramètres. Ci-dessous, j'analyserai en détail tous les attributs et paramètres de la balise de sélection. À propos, il peut contenir non seulement du texte, mais également des images et d'autres éléments du site Web. Par conséquent, cet article répond également à la question de savoir comment créer une image, un objet, etc.

Syntaxe des balises

Objets à déplacer Attributs et paramètres

1. width="number/percentage" - définit la largeur de la ligne rampante en pixels/pourcentage. Ceux qui connaissent le HTML connaissent probablement cet attribut. Par exemple:

• width="240px" - définit la largeur à 240 pixels ;
• width="40%" - définit la largeur à 40 % en fonction de la largeur du bloc dans lequel se trouve l'objet ;

2. height="number/percentage" - définit la hauteur de la ligne rampante en pixels/pourcentage. L'exemple peut être donné de la même manière qu'avec le premier attribut. Par exemple:

• height="400px" - définit la hauteur à 400 pixels ;
• height="30%" - fixe la hauteur à 30 % en fonction de la hauteur du bloc dans lequel se trouve l'objet ;

Remarque : si la ligne rampante n'est constituée que d'une seule ligne, alors la hauteur ne peut pas être spécifiée, car elle sera automatiquement déterminée en fonction de la taille de la police, qui est spécifiée par le paramètre font-size : Npx.

3. bgcolor="color" - définit la couleur d'arrière-plan du conteneur. Vous pouvez choisir une couleur sur la page : codes couleurs html. Remarque : Si l'attribut bgcolor n'est pas défini, l'arrière-plan sera par défaut la couleur d'arrière-plan de la page.

4. behavior="parameter" - c'est l'un des attributs les plus importants du ticker. Il définit le comportement du ticker. A beaucoup diverses options:
. alterné - le ticker se déplace de manière cyclique : de droite à gauche, puis de gauche à droite (se déplace entre les bords). Par exemple:

Et voici à quoi ressemble cette ligne sur le site :

Chaîne avec l'attribut behavior="alternate"

Défilement - la ligne rampante se déplace en dehors de la zone dans la direction indiquée par l'attribut direction (avec un paramètre), puis se répète cycliquement. À mon avis, cette option est la plus courante. Par exemple:

. slide - très similaire au scroll, cependant à la fin la ligne s'arrête et ne se répète pas. Par exemple:

Chaîne avec l'attribut behavior="slide" direction="right"

5. direction="parameters" - définit la direction du mouvement de la ligne rampante. Peut prendre les valeurs suivantes :
. vers le bas - mouvement de haut en bas. Par exemple:

Ligne avec l'attribut behavior="scroll" direction="down"

. vers le haut - mouvement de bas en haut. Par exemple:

Chaîne avec l'attribut behavior="scroll" direction="up"

. gauche - mouvement de droite à gauche. Remarque : la gauche est la valeur par défaut. Par exemple:

Ligne avec l'attribut behavior="scroll" direction="left"

. droite - mouvement de gauche à droite. Par exemple:

Ligne avec l'attribut behavior="scroll" direction="right"

6. hspace="number" - définit l'indentation horizontale de la ligne par rapport aux autres objets. La balise img populaire a un attribut similaire.

7. vspace="number" - définit la distance verticale par rapport aux autres objets.

8. loop="number" - combien de fois vous devez faire défiler le contenu. Le paramètre spécifie un nombre qui spécifie le nombre de répétitions. Remarque : le chiffre -1 signifie cycle sans fin faire défiler. La valeur par défaut est -1.

9. scrollamount="number" - vitesse de déplacement de la ligne rampante. Le nombre spécifie le nombre de pixels dont l'objet se déplacera au cours d'un cycle d'horloge. Remarque : La vitesse par défaut est de 6 pixels/s. Par exemple:

Chaîne avec l'attribut scrollamount="10"

10. scrolldelay="number" - définit le délai entre les étapes du ticker en millisecondes. Par exemple:

Chaîne avec l'attribut scrolldelay="500"

Enfin, je donnerai 2 exemples d'utilisation de lignes rampantes. Exemple utilisant un objet div :

Exécution d'un élément div

Exécution d'un élément div

Exemple d'image en cours d'exécution :