interface Web
js tutoriel
Utilisez impressionner.js pour créer des astuces slideshows_javascript
Utilisez impressionner.js pour créer des astuces slideshows_javascript
La semaine dernière, j'ai vu un ami créer un diaporama zoom très sympa. Peut-être parce que je n'y connaissais pas grand-chose, j'ai mis beaucoup de temps à trouver plusieurs outils de diaporama Web. Après filtrage, j'ai décidé d'utiliser Impress.js de Geek.
impress.js est un outil de diaporama émergent. Son effet est similaire à Prezi, mais il a des fonctions 3D. C'est vraiment une bonne nouvelle pour les personnes ayant une certaine base en développement web ! Utilisez simplement quelques commandes HTML et chargez impression.js pour créer un magnifique diaporama zoom.
Lors de sa création, vous devez d'abord écrire un en-tête, qui est le même que celui du Web ordinaire, mais le corps est différent. Étant donné qu'impress.js ne prend actuellement en charge que les navigateurs modernes tels que Chrome, Firefox et Safari (touchez IE...), un message de secours est nécessaire.
<body class="impress-not-supported"> <div class="fallback-message"> <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p> <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p> </div>
Ensuite, commencez à écrire le corps réel, la partie impressionner. Cette section doit être entièrement entourée de "< div id="impress" >".
La première diapositive est la diapositive étape par étape, qui est très similaire à une diapositive ordinaire, page par page. Vous pouvez l'ajouter en utilisant la méthode suivante
<div id="page1" class="step slide" data-x="-1000" data-y="-1500"> <q>第一页的幻灯片</q> </div>
Ce que vous devez écrire est id, data-x et data-y. id est un nom et data-x et data-y sont des coordonnées. En fait, impressionner.js vous offre une grande scène, et tout ce dont vous avez besoin est d'y lancer les diapositives et de les placer au bon endroit. Il sera ensuite affiché dans l'ordre dans lequel vous l'avez lancé. En fait, il existe une autre coordonnée, qui est data-z. Cette coordonnée peut vous amener dans l'effet 3D et zoomer.
Un autre type de slide est appelé step. Contrairement au précédent qui avait un cadre rigide, ce genre de slide supprime complètement le cadre qui vous restreint et écrit directement sur le fond. Veuillez regarder l'exemple suivant :
<div id="title" class="step" data-x="0" data-y="0" data-scale="4"> <span>你看到的幻灯片由</span> <h1>impress.js</h1> <span>给你呈现</span> </div>
La particularité ici est qu'il y a une échelle de données, indiquant la taille de cette diapositive. Vous pouvez créer une page très grande ou très petite pour fournir un contraste de mise à l'échelle. Il existe également une fonction de rotation :
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"> <p>这是一个 <strong>presentation tool</strong> <br/> 作者从 <a href="http://prezi.com">prezi.com</a> 得到灵感<br/> 利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p> </div>
Les données de rotation ci-dessus représentent l'angle de rotation.
Enfin, vous pouvez fournir un indice pour indiquer à l'utilisateur qu'il doit utiliser les touches fléchées du clavier pour contrôler l'ensemble du processus de lecture. Si l'utilisateur clique simplement sur la diapositive et qu'il n'y a pas de réponse, cette invite apparaîtra automatiquement.
<div class="hint"> <p>请用方向键控制</p> </div>
À la fin de la page, vous devez charger Ensure.js. Je cite ici directement la page de l'auteur, mais s'il s'agit d'un affichage hors ligne, il est recommandé de le télécharger et de l'utiliser. Il ne suffit pas de charger js, vous devez également utiliser Ensure().init() pour le démarrer.
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script> <script>impress().init();</script>
En fait, cet outil a de nombreuses fonctions, je viens d'apprendre certaines des fonctions les plus basiques. La suggestion sur le site officiel est de regarder directement l'index.html fourni par celui-ci. Il contient des commentaires détaillés pour vous indiquer ses fonctions. J'ai créé une page et je l'ai modifiée à partir de l'index.html fourni par l'auteur. Bien que ces choses soient très simples, elles suffisent pour créer des diapositives pour un discours. La page que j'ai créée est placée sur Gist, et le code global se trouve à la fin de cette page.
Bien sûr, des outils similaires ne peuvent que mentionner Prezi, qui est la première mise en œuvre de cette idée, mais on dit qu'il ne prend pas en charge le chinois. Tencent AlloyTeam domestique a également développé un outil appelé iPresst, qui peut être considéré comme un bon outil pour les imbéciles, mais comme il s'agit d'un réseau social, il est un peu privé. Le plus gros défaut d'impress.js est qu'il est trop geek. S'il existe un outil de développement WYSIWYG, il sera certainement popularisé.
impress.js 尝试 你看到的幻灯片由impress.js
给你呈现这是一个 presentation tool
作者从 prezi.com 得到灵感
利用现代浏览器CSS3 transforms and transitions的力量将你的想法视觉化
请看impress.js
开放的幻灯工具<script> if ("ontouchstart" in document.documentElement) { document.querySelector(".hint").innerHTML = "<p>请用方向键控制</p>"; } </script> <script src="http://bartaz.github.io/impress.js/js/impress.js"></script> <script>impress().init();</script>请用方向键控制
Le contenu ci-dessus est ce que je partage avec vous sur l'utilisation d'Impress.js pour créer des diaporamas. Le code est très simple. J'espère qu'il sera utile à tout le monde.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
