Salutations. Récemment, on m'a demandé comment faire défiler une page en douceur jusqu'à une certaine partie de la page. En général, cela s’appelle suivre un lien d’ancrage. Lorsqu'un visiteur du site clique sur un élément auquel un lien d'ancrage est ajouté, il est automatiquement redirigé vers la partie de la page où l'ancre a été ajoutée.
En règle générale, les ancres sont utilisées sur les pages avec un volume important afin que vous puissiez accéder rapidement à la section souhaitée pour une navigation plus facile. Vous avez probablement vu cela sur de nombreux sites Web.
Pour créer une ancre, vous devez d'abord créer un signet à l'endroit approprié et lui donner un nom en utilisant l'attribut name de la balise. .
Consultez le blog de test pour voir comment cela fonctionne.
Voyons comment suivre les liens d'ancrage dans une page dans Blogger. Tout est assez simple.
Créons un menu simple, où, en tant que paramètre de lien, nous définissons l'identifiant des blocs vers lesquels le défilement se produira. Quelque chose comme ça
Pour ne pas vous tromper encore une fois, je vous donne tout de suite le code complet. Vous pouvez le copier et l'essayer sur votre page dans un blog de test en passant en mode HTML dans l'éditeur de publication. Et voyons ce qui est fait ici
- Où commencer
- Comment faire
- Où obtenir
- Comment mettre en œuvre
Où commencer
Comment faire
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad justo natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic ! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similaire !
Où obtenir
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad justo natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic ! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similaire !
Comment mettre en œuvre
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad justo natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic ! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similaire !
Et le code HTML, ajoutant en conséquence de telles sections de texte
Comment mettre en œuvre
TOUT VOTRE TEXTE SERA ICI
Et ici, je dois simplement attirer votre attention sur ce qui suit
Si vous avez spécifié des ancres lors de l'édition d'un message, ne passez pas à l'onglet "Créer", travaillez et rédigez le message en mode HTML. Les ancres resteront alors dans leur forme originale. Sinon, l'autocorrection se produira simplement (ce sont les aléas de Blogger).
Il y a un nom ici
Ils ressembleront à ça
C'est-à-dire que la transition se fera vers une page inexistante (comme si elle n'était pas publiée).
S'il est encore difficile de travailler en mode HTML et que tout fonctionne correctement dans ce cas, il suffit de modifier un peu le lien pour que la balise d'ancrage ressemble à ceci
Il y a un nom ici
Où https://n-t-b-b.blogspot.com/2019/08/blog-post.html est le lien vers la page qui peut être vue sur le côté droit de l'éditeur de publication dans les paramètres ici
C'est tout simple comme ça. Les blogs sur Wordpress disposent d'un plugin spécial à cet effet. Sur Blogger, cela est facilement implémenté à l'aide du code suivant. Bonne chance à tous.
Bonjour les amis. Et un autre plan du site pour vous aujourd'hui. Il traîne depuis longtemps dans mes « poubelles », puis je suis tombé par hasard sur un ancien oublié. Peut-être que quelqu'un aimera celui-ci. Celui-ci est conçu dans le style accordéon.
Qu'aurons-nous dans une telle carte -
Toutes les étiquettes (titres, sections) sont affichées sur le côté gauche.
Lorsque vous cliquez sur la flèche à droite, tous les messages de ce raccourci s'ouvrent.
Jeu d'étiquettes - nouveau message.
Personnalisation facile du design en fonction de vos styles.
Installation facile sur la page.
Pour voir la version de travail, rendez-vous sur le blog de test.
.table-of-content (couleur d'arrière-plan : #008B8B ; couleur : #444 ; famille de polices : Verdana, Genève, Tahoma, Arial, Sans-serif ; taille de police : 13 px ; poids de police : 400 ; débordement : caché ;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2))
.table-of-content .toc-header (couleur : #444 ; famille de polices : hériter ; poids de la police : 400 ; taille de la police : 14 px ; couleur de l'arrière-plan : #fff ; marge : 0 ; rembourrage : 15 px ; débordement :caché;curseur:pointeur;bordure-bottom:1px solide #ccc;transition:initial)
.table-of-content .toc-header:hover(background-color:#fdfdfd)
.table-of-content .toc-header:before(content:"";width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent ; transition : toutes les facilités de 0,3 s)
.table-of-content .toc-header.active(couleur:#fc4f3f)
.table-of-content .toc-header.active:before(border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg); -ms-transform:rotation(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg))
.table-of-content .loading(display:block;padding:15px;text-decoration:blink)
.table-of-content ol(margin:0;padding:0;list-style:none;transition:initial)
.table-of-content li (hauteur de ligne: normal! important; marge: 0! important; rembourrage: 8px 8px 8px 15px! important; espace blanc: nowrap; texte-align: gauche; débordement: caché; arrière-plan: # 808080 !important;transition:initiale)
.table-of-content a(color:#d9d9d9!important;text-decoration:none;font-size:86%;transition:initial)
.table-of-content a:visited(color:#a2a2a9;transition:initial)
.table-of-content a:hover,.table-of-content a:visited:hover(color:#ffc937!important;text-decoration:none;transition:initial)
.post ol li:avant (affichage:aucun)
var toc_config = (
URL : "https://"+window.location.hostname,
conteneurId : "table des matières",
afficherNouveau : 15,
nouveauTexte : "nouveau",
trier par ordre alphabétique : (
thePanel : vrai,
laListe : vrai
},
maxRésultats : 9999,
panneau actif : 1,
vitesse de glissement : (
vers le bas : 400,
en haut : 400
},
slideEssing : (
vers le bas : nul,
en haut : nul
},
slideCallback : (
vers le bas : fonction() (),
vers le haut : fonction() ()
},
clickCallback : fonction()(),
jsonCallback : "_toc",
!function(e,o)(var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head"),n=;e=function(e)(for(var o,c,i= e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);pour (var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&++g)(l+=""+n[g]+"" ,l+="";for(var _=0,p=i.length;p>_;++_)(o=i[_].title.$t;for(var w=0,u=i [_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel)(c=i[_].link[w].href; break)for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+="
Vous pouvez immédiatement copier l'intégralité du code. Aller à panneau d'administration du blog - onglet page - créer une page. Passez immédiatement en mode HTML dans l'éditeur de page, collez le code copié et publiez.
Voilà, vous n'avez rien d'autre à faire. Ceci est généré via le flux de votre blog. Dans le code, j'ai mis en évidence la couleur générale d'arrière-plan en gris, mais vous pouvez facilement la remplacer par celle souhaitée. Voici les couleurs. Cependant, comme beaucoup d'autres styles - police, bordures, ombres, etc.
Rapide, simple, pratique, beau.
Je vous souhaite à tous bonne chance et à bientôt.
abonnez-vous à de nouvelles aide-mémoire
À l'aide de programmes graphiques comme Photoshop, Gimp et autres, vous pouvez créer des images animées au format GIF. Dans cet article, je souhaite vous montrer comment créer des éléments clignotants à partir de texte et d'images en utilisant CSS3 et Javascript.
Choisir CSS3 est préférable à Javascript, car il ne ralentit pas significativement l'ouverture de la page du navigateur. Ce paramètre peut être intéressant pour mettre en évidence un paragraphe spécifique, ou pour stimuler le clic sur un élément.
Pour plus de clarté, je diviserai l'article en 4 sections :
images clignotantes en utilisant CSS
texte clignotant en utilisant Javascript
image clignotante en utilisant Javascript
Pour des besoins individuels, vous pouvez également ajouter des liens.
rejoignez la page Facebook du blogueur
.blink_text(
animation : clignotant 1s linéaire infini ;
couleur : #00f ;
taille de police : 18 px ;
poids de la police : gras ;
}
.blink_text a (couleur :#f00 ;)
@keyframes clignotant (
0% ( opacité : 1,0 ; )
50 % (opacité : 0,0 ; )
100 % (opacité : 1,0 ; )
}
Modifiez le texte et l'adresse de la page https://www.facebook.com/ViktoriyBarad/ en conséquence.
Ce sont les styles de texte
couleur : #00f ;
taille de police : 18 px ;
poids de la police : gras ;
Le temps d'animation est fixé à 1 seconde (personnalisable)
2. Un exemple d'image clignotante sur CSS
je suis sur Twitter
Code
.blink_text(
animation : clignotant 1s linéaire infini ;
}
@keyframes clignotant (
0% ( opacité : 1,0 ; )
50 % (opacité : 0,0 ; )
100 % (opacité : 1,0 ; )
}
Les paramètres sont similaires - votre adresse et une image au format png.
Voyons maintenant comment implémenter les mêmes effets en utilisant javascript.
1. Texte clignotant en javascript
Abonnez-vous aux aide-mémoire du blogueur function clin_one() ( document.getElementById("blink").style.visibility="visible"; setTimeout("blink_two()",700); ) function clin_two() ( document.getElementById(" clignotant ").style.visibility="hidden"; setTimeout("blink_one()",700); ) clignotant_one();
Remplacez-le par l'adresse de votre flux et rédigez votre texte.
