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 -
À 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
Attributs et paramètres
1. width="nombre/pourcentage"- 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. hauteur = "nombre/pourcentage"- 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="paramètres"- définit la direction de déplacement 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
Exemple d'image en cours d'exécution :
Pourquoi la décision a-t-elle été prise de mettre à jour et de refaire la ligne existante. Le fait est qu'auparavant, pour créer une ligne rampante, on utilisait une balise HTML, qui est désormais considérée comme obsolète et dont l'utilisation n'est pas recommandée, car elle n'existe plus en HTML5.
Les navigateurs le prennent toujours en charge, mais pour combien de temps ? chapiteau sera-t-il traité ? C’est pourquoi, pour ne pas prendre de risques, vous devez l’abandonner et si vous avez encore besoin d’une ligne rampante, vous pouvez la réaliser en utilisant CSS. Le résultat ressemblera à ceci :
Comme vous pouvez le constater, le résultat est le même que lors de l’utilisation de l’ancienne balise marquee. Créer une ligne rampante est très simple. Vous devez enfermer l'élément qui doit se déplacer sur l'écran dans un bloc auquel nous attribuerons une classe chapiteau. Nous enfermons également tout ce qui se trouve à l'intérieur du bloc de sélection dans une balise .
Marquee (largeur : 100 % ; espace blanc : nowrap ; débordement : caché ; ) .marquee span ( couleur : #212121 ; taille de police : 25 px ; affichage : bloc en ligne ; remplissage-gauche : 100 % ; -webkit-animation : chapiteau 10s linéaire infini; animation: chapiteau 10s linéaire infini; ) @-webkit-keyframes chapiteau ( 0%(-webkit-transform: traduire(0, 0);) 100%(-webkit-transform: traduire(-100% , 0);) ) @keyframes marquee( 0%(transform: traduire(0, 0);) 100%(transformer: traduire(-100%, 0)) )
Il y a plusieurs paramètres principaux ici, vous pouvez modifier le reste et ajouter les vôtres. Tout d'abord les styles du bloc parent.
- largeur : 100 % ;- Définissez la largeur de notre bloc de sélection parent.
- espace blanc:nowrap;- nous interdisons le transfert de mots vers une autre ligne.
- débordement caché;- nous coupons tout ce qui dépasse notre bloc avec une ligne courante, pour qu'il n'y ait pas d'incidents.
- display:bloc en ligne ;- faire de notre span un élément de bloc en ligne
- remplissage à gauche : 100 % ;- faire un retrait à gauche sur toute la largeur du bloc parent.
- -webkit-animation et animation- appliquer une animation au bloc. Le temps d'exécution de l'animation est de 10 secondes. Vous pouvez modifier la valeur par la vôtre.
- Marquee @-webkit-keyframes et marquee @keyframes- l'animation elle-même.
Cela concerne les principaux paramètres. Comme je l'ai dit ci-dessus, vous pouvez ajouter tous les autres styles que vous souhaitez.
Pourtant, beaucoup considèrent le ticker comme un élément obsolète. Après tout, avec le développement du HTML et du CSS, de nouvelles opportunités se sont ouvertes et créer une sorte d'animation sur le site est devenu beaucoup plus facile. Le ticker est tout simplement obsolète. Mais néanmoins, beaucoup continuent de l'utiliser et, comme le montre la pratique, ce qui était autrefois revient souvent aux tendances.
C'est tout, merci pour votre attention. 🙂
<
Souvent, lors de la rédaction de votre site Web ou de sa gestion, il est nécessaire d'installer une ligne rampante sur le site. Cet élément de conception attire l'attention des visiteurs sur les sections nécessaires du site, et peut également mettre en évidence certaines informations au premier plan, ce qui permettra de voir en premier le sujet souhaité. 
Ils utilisent le téléscripteur à diverses fins, par exemple pour des messages publicitaires, des actualités, des promotions, des annonces, des images, des émoticônes, des bannières, etc. 
Créer un ticker sur un site Web est aussi simple que décortiquer des poires.
Pour créer une ligne courante, utilisez cette balise spéciale "marquee", qui vous aidera à créer une ligne courante. Au départ, cela ne fonctionnait que dans le navigateur Internet Explorer, mais maintenant dans presque tous les navigateurs (je n'ai pas vérifié uniquement dans Google Chrome), cela fonctionne très bien dans d'autres.
1. L'ENREGISTREMENT STANDARD DES BILLETS est le suivant -:
Texte en cours d'exécution
Insérez un titre, une formule de salutation, une annonce entre ces balises (AU lieu de MES MOTS "TICKING TEXT") et vous obtenez un téléscripteur. Il ressemblera à ceci.
FAIRE UNE LIGNE DE CRUCKING
La ligne courante peut être non seulement du texte, mais aussi une image et un lien vers un site. Il peut s'agir de n'importe quel texte que vous avez créé sur des sites créant de belles inscriptions. Comme par exemple le « texte brûlant » dans le post précédent.
Le texte peut être formaté de la même manière que dans un article. Par exemple, mettons-le en gros, en gras, en couleur, en italique, etc.
Et en faisant preuve d'imagination ou en définissant les objectifs d'utilisation des textes dans votre journal, vous pouvez proposer des options assez incroyables pour écrire des lignes courantes pour vos messages.
Je vais essayer de vous montrer les plus courants.
2. La largeur et la hauteur de la ligne courante peuvent être définies par certains paramètres, c'est-à-dire définir la largeur de la ligne et sa hauteur. Maintenant, la formule ressemblera à ceci.
Tailles de blocs de lignes définies
Où largeur=" "- largeur de bloc pour la ligne
hauteur=" "- hauteur de bloc pour la ligne
Il ressemblera à ceci.
La hauteur et la largeur de la ligne sont précisées.
3. CHANGER LE FOND DE LA LIGNE CRAQUANTE. Changer l'arrière-plan du ROW
L'arrière-plan de la ligne de course peut être défini selon vos besoins. C'est la formule. Il n'est pas nécessaire de définir la taille des lignes. Je les mets dans la première formule, mais pas dans la seconde.
Où bgcolor=" "- attribut définissant le paramètre de couleur d'arrière-plan
Ça ressemble à ça
changer l'arrière-plan du ROW
changer le fond de la LIGNE, sans préciser la largeur et la longueur
4. MOUVEMENT DE GAUCHE À DROITE.
Puisque par défaut la ligne se déplace de droite à gauche, pour faire l'inverse, on utilise cette formule.
Mouvement de gauche à droite
Où gauche- mouvement de droite à gauche (par défaut)
droite- mouvement de gauche à droite
Il ressemblera à ceci
MOUVEMENT DE GAUCHE À DROITE.
5. MOUVEMENT CONSTANT DANS LES DEUX SENS.
Vous pouvez définir le mouvement de la ligne en permanence, c'est-à-dire qu'elle se déplacera alternativement dans les deux sens... Voici la formule.
Où alterner
Il ressemblera à ceci
MOUVEMENT CONSTANT DANS LES DEUX SENS
6. MOUVEMENT DE BAS EN HAUT. >de bas en haut
Une ligne ou une image peut se déplacer non seulement dans différentes directions, mais aussi de bas en haut. Ici, il est préférable de fixer une limite sur la ligne (surtout la hauteur) ou l'image, sinon elle s'étendra sur toute la page et prendra beaucoup de place. C'est la formule.
Où en haut- mouvement de bas en haut
Il ressemblera à ceci
DÉPLACEMENT D'UN POINT OU D'UNE IMAGE DE BAS EN HAUT
7. MOUVEMENT DE HAUT EN BAS. De haut en bas
Vous pouvez faire bouger le texte et vice versa de HAUT EN BAS. C'est la formule.
Où vers le bas- mouvement de haut en bas
Il ressemblera à ceci
DÉPLACEMENT D'UN POINT OU D'UNE IMAGE DE HAUT EN BAS
8. CHANGEZ LA VITESSE POUR UNE VITESSE PLUS LENTE. Changer la vitesse pour ralentir
La vitesse du point peut également être modifiée, rendue plus rapide ou plus lente. Pour ce faire, utilisez la formule suivante.
Où comportement=" "- attribut qui définit le type de point
alterner- mouvement alternatif
direction=" "- attribut qui définit la direction
scrollAmount="1"
Il ressemblera à ceci
VITESSE DE POINT LENTE
9. MOUVEMENT LENT DU POINT DE HAUT EN BAS ET VICE-VERSE. Mouvement lent du texte de bas en haut et vice versa
Vous pouvez également augmenter ou diminuer la vitesse de couture. Pour ce faire, utilisez la formule suivante.
Où alterner- mouvement alternatif
direction=" "- un attribut qui fixe la direction (dans notre cas, de haut en bas et vice versa)
scrollAmount="1"- définit la vitesse de déplacement de la ligne. Le numéro de vitesse peut être modifié.
Il ressemblera à ceci
Mouvement lent du texte de bas en haut et vice versa
11. LIGNE CRAQUANTE AVEC IMAGE.
Comme je l'ai déjà écrit, non seulement une ligne peut bouger, mais aussi n'importe quelle image. Toutes les formules ci-dessus s'appliquent également aux images. Seulement au lieu de MOTS, le code HTML de l'image est inséré. Voici une formule à laquelle vous pouvez ajouter n'importe quel paramètre de mouvement.
Photo originale. 
Ajoutons une formule de téléscripteur et cela ressemblera à CECI
Comme ceux-là exemples simples ligne courante, et si vous utilisez votre imagination, vous pouvez proposer des options assez incroyables pour écrire des lignes courantes pour vos sites Web.
Je vais réécrire TOUTES CES FORMULES, AVEC tous les paramètres. (c'est-à-dire qu'une nouvelle valeur est ajoutée à chaque nouvelle formule, et donc la formule devient de plus en plus longue. Si vous n'avez pas besoin de TOUS LES PARAMÈTRES, alors prenez les formules ci-dessus, chaque paramètre est là séparément)
CHAÎNE SIMPLE - PAR DÉFAUTTAILLES DE RANGÉES SPÉCIFIÉESCHANGER LE FOND DE LA LIGNE CRAQUANTEMOUVEMENT DE GAUCHE À DROITEMOUVEMENT CONSTANT DANS LES DEUX SENS
BAS HAUTDE HAUT EN BASVITESSE DE POINT LENTEDÉPLACEMENT LENT DU TEXTE DE HAUT EN BAS ET VICE VERSELIGNE AVEC LIEN VERS LE SITELIEN VERS LE SITE (NOM)
Vous pouvez supprimer vous-même n’importe lequel de ces paramètres. Par exemple, vous n’avez pas besoin d’un arrière-plan séparé pour chaque ligne, vous effacez simplement soigneusement ce paramètre. 
Ou effacez les tailles de points. N'oubliez pas que la formule doit être dans le coin CITATIONS, alors ne les supprimez pas. 
Essayez avec audace et vous réussirez.
Créer ligne rampante sur le site Web – c’est aussi simple que d’éplucher des poires.
Ils utilisent le téléscripteur à diverses fins, par exemple pour des messages publicitaires, des actualités, des promotions, des annonces, etc.
Pour créer une ligne rampante, utilisez la balise :
Attributs du ticker
width ="..." - largeur du ticker (en pixels ou pourcentages).
Exemple:
height = "..." - la hauteur de la ligne rampante (en pixels ou pourcentages).
Exemple:
bgcolor ="..." - couleur de fond de la ligne rampante (la couleur est spécifiée par code ou mot).
Exemple:
behavior ="..." comportement du ticker. A les significations suivantes :
scroll - défilement normal (par défaut) ;
glisser – la ligne commence son chemin à partir d’un bord et s’arrête à l’autre ;
alterné – la ligne se déplacera d’un bord à l’autre
Exemple:
direction="..." - direction de la ligne rampante. A les significations suivantes :
gauche – mouvement du texte vers la gauche (par défaut) ;
droite – mouvement du texte vers la droite ;
vers le haut – mouvement du texte de bas en haut ;
vers le bas - mouvement du texte de haut en bas
Exemple:
scrollamount ="..." - vitesse de déplacement de la ligne (en pixels).
Exemple:
scrolldelay ="..." - intervalle de temps entre les étapes (en millisecondes).
Exemple:
loop ="..." – combien de fois le ticker sera exécuté. Si la valeur est définie sur « 0 » (par défaut), le téléscripteur fera défiler le texte un nombre infini de fois ; si la valeur est définie sur « 2 », alors le texte défilera 2 fois.
Exemple:
hspace ="..." – retrait à partir des bords gauche et droit de la ligne courante (en pixels).
Exemple:
Si vous mettez tout ensemble, Code téléscripteur HTML ressemblera à ceci :
Image en cours d'exécution
Puisque vous avez déplacé le texte dans la ligne rampante, vous pouvez également déplacer l'image.
Assez entre les balises insérer une image :
Ajout
Vous pouvez définir du texte avec un lien dans la ligne rampante. Pour ce faire, vous devez écrire le code suivant en HTML :
Alors nous avons compris ligne rampante dans le document HTML.
Faites un téléscripteur dans HTML Aussi facile que la tarte. Frontpage en est responsable effet dynamique. Vous n'avez pas besoin d'utiliser de codes ou d'insérer des scripts dans le site pour cela. Le programme fera tout pour vous. Mais avant de passer à la leçon, quelques mots sur le téléscripteur.
Comment faire un ticker en HTML
Vous pouvez souvent voir comment des phrases individuelles, et parfois des phrases entières, sont mises en évidence sur les pages d'un site Web. en gras, par exemple, comme sur ce site. Ceci est fait afin d’attirer l’attention des visiteurs sur des points importants et points clés des articles. Mais souvent, cela ne suffit pas.
Par exemple, vous vendez un large assortiment de types de produits sur votre site Web. MAIS vous devez d’abord en vendre un rapidement. Ou vous souhaitez mettre en avant une offre de prix avantageuse parmi d'autres. Ou vous souhaitez placer une annonce sur votre site Web afin qu'elle attire immédiatement votre attention. Oui, on ne sait jamais à d'autres fins...
Afin de réaliser une telle ligne rampante, nous procédons comme suit :
1 . Écrivez n'importe quel texte que vous souhaitez présenter sous forme de téléscripteur. Définir le texte bonne taille et la couleur de la police. Par exemple, mon ticker a les paramètres suivants : Police - Verdana, Taille - 12, gras, couleur - rouge
Sélectionnez maintenant tout le texte, puis Cliquez sur le bouton "Insérer" sur le panneau en haut et menu contextuel sélectionnez le composant Web
2. La fenêtre « Insérer un composant de site Web » s'ouvrira. Sur le côté gauche de la fenêtre, sélectionnez Effets dynamiques, sur le côté droit, sélectionnez Ticker et cliquez sur Terminé.
3. Vous avez une nouvelle fenêtre "Propriété de la ligne d'exploration". Cette fenêtre contient le texte qui a été écrit et surligné, ainsi que les paramètres de la ligne rampante : Direction, vitesse, comportement Et ainsi de suite. Nous ne changerons rien et laisserons les paramètres par défaut. Cliquez sur OK.
Après avoir ouvert la page dans le navigateur, vous verrez que le ticker se déplace de droite à gauche. Voici à quoi cela ressemblera une fois la page publiée sur Internet.
C'est alors que le téléscripteur vient à la rescousse.
5. Modifions maintenant le mouvement du ticker de gauche à droite. Pour ce faire, sélectionnez le texte et faites un clic droit sur le texte. Dans le menu, sélectionnez « Propriétés du billet »
Dans la fenêtre qui s'ouvre, mettez un point à côté du mot "À droite", Cliquez sur " D'ACCORD" et enregistrez les modifications apportées à la page
Maintenant, nous ouvrons la page dans le navigateur et voyons que la page se déplace déjà dans une direction différente, c'est-à-dire de gauche à droite
6. Si vous souhaitez que la ligne rampante s'écarte du côté et s'arrête, vous devez sélectionner l'option " Changement" , sur presse " D'ACCORD" et enregistrez les modifications apportées à la page .
Maintenant, nous ouvrons la page dans le navigateur et voyons l'effet de quitter la ligne et de s'arrêter.
C'est alors que le téléscripteur vient à la rescousse
7. Et si vous sélectionnez l'option "Alternativement", la ligne rampante se déplacera de gauche à droite et de droite à gauche dans les limites de la cellule dans laquelle la ligne rampante est placée.
Voici comment notre ligne va désormais se déplacer avec cet effet :
C'est alors que le téléscripteur vient à la rescousse
8. Si nécessaire, vous pouvez ajouter un arrière-plan au ticker. Sortons encore par la fenêtre pour ça."Propriété de la ligne de ticket". Cliquez sur "Couleur de fond" et sélectionnez une couleur. Par exemple, jaune. Cliquez sur "OK" et enregistrez les modifications.
Affichez la page à l'aide d'un navigateur. Le ticker a désormais un fond jaune.
C'est alors que le téléscripteur vient à la rescousse
9. Si vous souhaitez supprimer l'arrière-plan, allez dans « Couleur d'arrière-plan » et sélectionnez la couleur « Auto ».
10. Pour supprimer une ligne rampante, sélectionnez-la simplement et appuyez sur "Supprimer" sur le clavier.