Vue de l’ordre de défilement: Ajouter & # 39; Faire défiler toute la page d’animation vers WordPress

Ce et anime sans Code pour contrôler le comportement du contenu. Honnêtement, sans éléments visuels, la plupart des fonctions sont difficiles à décrire, alors passons directement à la partie pratique! Maintenant, allons sur le terrain et je vais vous montrer l’effet de créer votre propre séquence d’animation en utilisant scrollsequence. 1. Pour créer une nouvelle page, allez à la séquence de défilement → ajouter une nouvelle séquence de défilement. Scrollsequence utilise un type de post personnalisé pour stocker les séquences, donc vous verrez l’éditeur WordPress familier:
La première étape consiste à ajouter une page. Dans scrollsequence, une page vous aide à diviser l’animation en séquences logiques. Vous pouvez créer une séquence en utilisant une seule page. Alternativement, pour une animation plus longue, vous pouvez diviser la séquence en plusieurs pages. Chaque page a ses propres images, contenus, paramètres et animations (c’est ce que vous allez ajouter dans les prochaines étapes). Si vous ajoutez plus de pages, vous les verrez ajoutées en tant que nouveaux onglets. Vous pouvez également copier des pages existantes, ce qui vous permet d’économiser du temps au travail: Je commence par une page. 2. Ajouter une image ensuite, vous devez ajouter l’image à la page. Le plug – in recommande au moins 50 – 100 images comme point de départ – c’est pourquoi il vous permet de créer des effets d’animation fantastiques lorsque les visiteurs défilent vers le bas. L’effet est en fait \
Si vous souhaitez utiliser une séquence de défilement sur votre bureau et votre appareil mobile, sélectionnez le format carré. Vous pouvez également créer des séquences séparées pour le Bureau et les visiteurs mobiles, et optimiser les images pour chaque séquence. Vous devriez maintenant utiliser le Code pour afficher la bonne version pour chaque type de visiteur, mais les développeurs ont
Ajoutez – le en tant que fonctionnalité intégrée. L’article se poursuit comme suit: Je pense qu’il serait utile d’avoir une page de documentation décrivant la meilleure façon de créer cette série d’images, car je ne l’ai pas immédiatement réalisé. Après une recherche Google rapide, j’ai décidé d’utiliser cet outil de conversion vidéo en JPG qui divise les fichiers vidéo courts que j’ai téléchargés en images séparées.
Remarque: après avoir écrit ce commentaire, le développeur a lu mes idées et a ajouté un tutoriel utile ici. Si vous voulez exporter autant de cadres que possible, ils vous recommandent d’utiliser VLC ou ffmpeg parce que les outils que j’utilise ne convertissent qu’un petit nombre de cadres. J’ai téléchargé une vidéo de 18 secondes et réglé le taux d’image à 5 FPS. Ceci convertit ma vidéo de 18 secondes en 94 images JPG distinctes, qui sont les images que j’utilise dans la séquence de défilement. Voici ma page avec les 94 images ajoutées. Si nécessaire, vous pouvez réorganiser les images en les faisant glisser et en les déposant ou en les supprimant.
Une bonne caractéristique ici est que l’ordre des images peut être inversé par lots. Pour une raison ou une autre, mes images sont placées dans l’ordre inverse (même si elles sont numérotées correctement) et le réarrangement Manuel des 94 images peut être difficile. C’est un problème avec wordpress uploader, pas avec le plug – in lui – même (parce que j’ai rencontré le même problème en téléchargeant des fichiers directement dans la médiathèque WordPress). Note: les développeurs affirment que cette fonctionnalité est déjà sur leur feuille de route, donc espérons qu’elle sera bientôt disponible.
Lorsque vous sélectionnez une image pour une page, vous obtenez un nouvel éditeur où vous pouvez ajouter du contenu à la page. Il s’agit d’un éditeur WordPress classique, très pratique
Parce que c’est une interface très familière: Ce contenu est affiché au – dessus de l’image dans cette partie de la séquence. Si vous voulez voir un ensemble de contenu différent, une autre page est créée. Vous pouvez également ajouter plusieurs lignes de texte et les animer différemment afin qu’elles s’affichent à des moments différents (plus tard). Vous pouvez également ajouter du HTML, du Code court, des oembed, etc. Dans l’éditeur, cela vous donne beaucoup de flexibilité. C’est – à – dire que vous pouvez ajouter plus que du texte.
L’article se poursuit comme suit: Ajouter de l’animation (facultatif) pour ajouter de l’animation au contenu, vous devez ajouter un sélecteur CSS au contenu que vous souhaitez animer. C’est la partie la plus technique du processus, mais elle reste très simple. Dans l’éditeur de contenu, il est recommandé d’aller à l’onglet texte. Ensuite, ajoutez un ID à chaque morceau de texte que vous souhaitez animer. Dans mon exemple, c’est un Et a :

Ensuite, faites défiler vers le bas dans la section animation du contenu de la configuration de la page et cliquez sur Ajouter une animation. Nous vous recommandons maintenant d’ajouter un ID CSS comme sélecteur. Vous pouvez ensuite sélectionner le numéro d’image que l’élément est visible et caché à nouveau. Le plug – in peut facilement les numéroter dans la liste des séquences d’images, ce qui facilite la saisie des nombres.
Ensuite, utilisez les boîtes d’animation et d’animation pour sélectionner le type d’animation à ajouter et la durée. Vous avez quatre options: l’opacité d’entrée \/ sortie s’efface vers \/ depuis l’offset horizontal vers \/ depuis l’échelle de l’offset vertical vers \/ depuis vous pouvez également ajouter plusieurs animations à la fois. Voici les scénarios possibles:

Vous pouvez répéter le processus pour animer plus de contenu. Par exemple, vous pouvez faire apparaître le Sous – titre après le titre principal. Cela vous permettra de diviser le contenu sans créer d’autres pages. 5. Diverses configurations. Pour compléter la configuration de la page, vous pouvez configurer
Pena va charger la première image, qui va encore créer un temps rapide ou le plus grand contenu de peinture pour la première peinture, qui est vraiment l’attraction des visiteurs humains. Une fois que la première image a été téléchargée et que les visiteurs peuvent voir le contenu, scrollsequence continue de télécharger les autres images nécessaires en arrière – plan. Vous devez encore vous assurer que l’image téléchargée est optimisée pour charger rapidement la première image. Mais vous n’avez pas à vous soucier de la façon dont scrollsequence charge le contenu qui pourrait ruiner l’expérience des visiteurs. Le prix de scrollsequence est disponible en deux versions gratuites sur WordPress. Org a plus de fonctionnalités que les versions avancées. La version gratuite vous permet de créer des animations accrocheuses, mais avec des limites quant aux options d’animation et au nombre d’images que vous pouvez inclure sur la page. Si vous voulez une version Premium, c’est pratique maintenant, car les 100 premières licences sont à prix réduit: Vous pouvez acheter une licence d’un an ou une licence à vie: un site: 19,99 $par an, 59,99 $à vie. Cinq sites Web: 49,99 $par année et 149,99 $à vie. Dix sites Web: 89,99 $par année et 269,99 $à vie. Vous pouvez également tester les fonctionnalités avancées sans carte de crédit avec un essai gratuit de 14 jours. Les séquences d’animation que scrollsequence vous aide à créer sont indéniablement fascinantes, et c’est l’effet que vous voyez sur de nombreux sites, en particulier dans l’espace créatif. Avant d’écrire ce commentaire, je ne savais pas comment produire un tel effet. Mais avec scrollsequence, je trouve ça très simple. Je suis prêt, j’ai terminé ma première séquence en moins de 30 minutes et je n’ai trouvé aucun défaut ou défaut. En résumé, si vous êtes intéressé par la création de q
Pour ce faire, essayez un essai gratuit de 14 jours de fonctionnalités avancées (sans carte de crédit) ou Voyez si la version gratuite a suffisamment de fonctionnalités pour répondre à vos besoins. Obtenez la version Premium obtenez la version gratuite avez – vous des questions sur notre revue scrollsequence? Posez des questions dans la section commentaires!