Le défilement horizontal vise à augmenter l’expérience utilisateur où le contenu est révélé par les côtés de la fenêtre ou du conteneur. Il peut être obtenu en cliquant et en faisant glisser une barre de défilement horizontale, en glissant latéralement sur un trackpad de bureau ou une souris trackpad, en appuyant sur les touches fléchées gauche et droite ou en glissant latéralement avec le doigt sur un écran tactile.
Catégorie : WEB DESIGN
exercice 7 – hover CSS
La pseudo-classe :hover permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer.
exercice 6 – animations CSS
Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l’animation d’une part et un ensemble d’étapes (keyframes) qui indiquent l’état initial, final et éventuellement des états intermédiaires d’autre part.
motion in figma
Figma a intégré des fonctionnalités de prototypage qui aident à améliorer l’expérience utilisateur du prototype. Elles se regroupent en deux possibilités : Smart Animate, un nouveau type de transition qui anime automatiquement des objets similaires et améliore les transitions existantes Drag, un nouveau type d’interaction qui permet aux utilisateurs de contrôler une transition en faisant […]
prototype Figma
En basculant sur l’onglet « Prototype », vous pouvez animer les différents éléments de votre maquette.
On appelle des déclencheurs, les fonctions d’animation proposées dans le panneau « interactions ».
les bases de Figma
avant de commencer… Figma est une plateforme collaborative en ligne de prototypage de design d’interface (comparable à XD). Vous devez vous créer un compte Figma pour synchroniser l’application et l’interface en ligne. Une fois connecté, il sera nécessaire de télécharger l’application Figma sur votre ordinateur. La communauté de Figma vous permet d’accéder à de […]
intégrer des vidéos
Pour intégrer des vidéos dans votre site WP, vous pouvez utiliser l’une de ces techniques. Mais auparavant, veillez à préparer votre vidéo selon les caractéristiques suivantes : format MP4 (le plus utilisé aujourd’hui) associé au codec H264 définition de 720p (1280 x 720 pixels) peut suffire si la vidéo n’est pas utilisée comme arrière-plan utiliser […]
Plugin Elementor WP
Elementor est un constructeur de page pour WordPress qui se présente sous la forme d’un plugin. Il permet de concevoir des pages complexes sur WordPress sans coder, grâce à l’utilisation de modèles de page tout prêts ou en partant de zéro, à ajouter en glisser déposer dans votre contenu. Tous les changements sont visibles en […]
créer un effet parallaxe avec HTML & CSS
vidéo = créer un parallaxe avec CSS modèles de structure html et CSS Code html du modèle <!doctype html> <html lang=« fr »> <head> <meta charset=« utf-8 »> <title>Parallax Scrolling</title> <!– la balise qui permet le responsive –> <meta name=« viewport » content=« width=device-width, initial-scale=1 » /> <!– Copier le lien Google Fonts –> <link href=« https://fonts.googleapis.com/css?family=Montserrat:200,200i,400,400i,700,700i,900,900i » rel= »stylesheet »> <!– Créer le lien […]
exercice 5 – position display
La displaypropriété spécifie le comportement d’affichage (le type de boîte de rendu) d’un élément. Consultez la documentation proposée par w3schools.com pour recenser les valeurs des propriétés possibles : 3schools.com/CSSref/pr_class_display.asp aligner la navigation sur le logo Sur la balise <header>, la propriété display: flex; place tous les conteneurs les uns à côté des autres ! […]