Aujourd'hui, nous allons terminer notre didacticiel en deux parties.
Pour ceux qui ne le savent pas, Cu3er est un formidable curseur d’image 3D facile à utiliser et à configurer.
Cette section examinera comment ajuster votre diaporama en utilisant certaines des nombreuses options de personnalisation de Cu3er. Nous allons surtout éditer une page XML, mais ne vous inquiétez pas du fait qu'elle devienne trop techie. Même si vous ne savez pas ce qu'est XML, c'est assez simple et facile à comprendre.
Précédemment sur Design Shack
Dans la première partie du didacticiel Cu3er, nous avons téléchargé Cu3er et modifié la page d'exemple pour voir à quel point il est facile d'incorporer le diaporama à vos conceptions.
Avant de commencer, vous souhaiterez peut-être consulter la démo et télécharger les fichiers source.
Le fichier de configuration
Si vous avez suivi la dernière fois, votre fichier config.xml ne doit pas être modifié du fichier d'origine que nous avons téléchargé sur le site Web de cu3er.
La démo et les fichiers associés ci-dessus ont été légèrement modifiés pour inclure une fonctionnalité de démarrage automatique. Aujourd'hui, nous revenons au fichier par défaut pour que tout soit clair.
Préparez votre exemple et ouvrez le fichier de configuration et nous commencerons! Il ne doit y avoir que deux sections dans ce fichier: les paramètres et les diapositives. Par défaut, la section des paramètres ne contient que le code des boutons précédent et suivant pour naviguer dans le diaporama. N'hésitez pas à jouer ou à éliminer vous-même ces paramètres, mais nous les laisserons tels quels car j'aime avoir la possibilité de naviguer manuellement dans le diaporama.
Démarrage automatique
Par défaut, le diaporama de Cu3er est statique et ne modifiera pas les images tant que vous n’aurez pas cliqué sur le bouton Suivant. Cependant, il existe de nombreuses instances dans lesquelles vous voudrez peut-être que le diaporama soit automatiquement lancé lors du chargement de la page.
Pour ce faire, copiez et collez le code suivant de la documentation de Cu3er dans la section des paramètres de votre fichier XML.
La première partie de ce code contrôle la durée d'affichage du minuteur et son apparence. Vous avez deux options ici: linéaire ou circulaire. L'option circulaire est un graphique à secteurs qui se remplit progressivement et l'option linéaire est un rectangle avec un balayage horizontal. Le temps est le nombre de secondes pendant lesquelles la diapositive sera affichée avant de continuer.
La partie interpolation est un principe d’animation et concerne la linéarité de la vitesse de l’animation dans le temps. Les valeurs les plus importantes ici sont les coordonnées x, y, qui vous permettent de définir la position du chronomètre, la hauteur et la largeur, de définir la taille du chronomètre et la teinte, qui vous permet de contrôler la couleur du chronomètre.
Donc, si nous voulions un minuteur circulaire, d’une durée de deux secondes, avec une taille de 50 px et une couleur bleue, nous utiliserions le code suivant:
Personnalisation des diapositives
L'ajout de diapositives est très facile. Allez simplement dans la section slides, copiez et collez une portion de code entre les balises de slide et changez le nom de l'image en nom de votre jpg.
Si vous vouliez placer une image appelée sunrise.jpg, le code ressemblerait à ceci:
Ajout de liens aux diapositives
Utilisez l'extrait de code suivant pour ajouter un lien afin que, lorsqu'un utilisateur clique sur une diapositive, le lien soit ouvert (remplacez le lien par le vôtre).
Ajout de descriptions aux diapositives
Cu3er vous permet d'ajouter un titre et un paragraphe à chaque diapositive. Cette description peut éventuellement avoir un lien associé différent de celui lié à la diapositive.
L'extrait de code permettant d'accomplir cela vient juste après l'URL de la diapositive.
Cela donnera un résultat similaire à celui ci-dessous.
Personnalisation de la zone de description
Pour personnaliser les paramètres de description, insérez le code suivant dans la zone des paramètres et ajustez-le selon vos préférences.
Vous pouvez y affecter des polices, une taille de texte, une couleur de texte et une marge de texte pour l'en-tête et le paragraphe. Les informations d'interpolation vous permettent de positionner la zone contenant le texte et de définir sa hauteur, sa couleur et ses propriétés d'animation. Comme mes diapositives ont une largeur de 600 pixels, je règle ma valeur x et ma largeur de sorte que x fois deux plus la largeur égale 600 (150 * 2 + 300) afin de centrer la description horizontalement sur la diapositive.
Ces paramètres me donnent les résultats suivants:
Définir la transition 3D
Le dernier attribut personnalisable que nous allons aborder est le plus amusant: les transitions 3D. Cu3er vous donne un contrôle complet sur la nature de ces transitions. Pour illustrer cela, examinons le code suivant:
Comme vous pouvez le constater, nous avons placé ici des attributs de transition entre deux diapositives. Tout d'abord, nous disons à Cu3er combien de tranches nous voulons dans la transition. Cela peut être le nombre que vous voulez, mais gardez à l'esprit que l'animation commence à être agitée vers 30 ans. Vous pouvez également décider si vous souhaitez découper l'image verticalement ou horizontalement. Si verticalement, vous choisissez si vous voulez que la direction soit vers le haut ou vers le bas. Si horizontalement, vous choisissez une direction gauche ou droite.
Le shader est également présenté ci-dessus. Les options ici sont aucune, plate et phong, la dernière d'entre elles constituant une sorte de vignette.
Vous pouvez également définir la couleur du cube (0x333333), sa durée (en secondes) et son délai (en secondes) pour chaque transition. N'oubliez pas de toujours placer les propriétés de transition entre deux diapositives et non dans une diapositive.
Conclusion
Espérons que vous pouvez désormais facilement insérer un diaporama Cu3er dans une page Web et personnaliser la plupart de ses paramètres. Pour plus d'informations sur le réglage du diaporama, veillez à passer à la page de documentation.
Cu3er est le produit phare et est utilisé dans un certain nombre de thèmes les plus vendus sur ThemeForest.Travailler cela dans votre portefeuille d'offres est un moyen simple et efficace d'impressionner vos clients potentiels.
Faites-nous savoir s'il y a d'autres plugins ou jouets Web brillants que vous voudriez nous voir aller plus loin. Nous sommes toujours à la recherche de nouvelles technologies pour apprendre et partager!