akyos-animation v1.1.18

Akyos Animation

🚀 Akyos Animation est une librairie JavaScript et CSS légère, modulaire et performante, permettant d'ajouter des animations fluides et personnalisables à vos projets.

🛆 Installation

Installez la librairie via npm ou yarn :

yarn add akyos-animation
# ou avec npm
npm install akyos-animation

🚀 Utilisation

1️⃣ Avec les attributs HTML (AkyosAttributeLoader)

La librairie peut être facilement utilisée en ajoutant des attributs HTML à vos éléments, sans écrire manuellement du JavaScript :

<h1 akyos-animation-name="textOverflow" akyos-animation-duration="1.2" akyos-animation-delay="0.3">
  Bonjour avec une animation !
</h1>

Et dans vos scripts, initialisez simplement l'AkyosAttributeLoader :

import { AkyosAttributeLoader } from "akyos-animation";

// Initialisez le loader
new AkyosAttributeLoader();

2️⃣ Utilisation directe avec JavaScript (paramétrage par code)

Importez la classe souhaitée et appliquez-la à votre élément HTML en passant les options suivantes :

import { AkyosTextOverflow } from "akyos-animation";

// Sélectionnez l'élément à animer
const element = document.querySelector(".my-element");

// Initialisez une animation
const animation = new AkyosTextOverflow(element, {
  duration: 0.8,       // Durée de l'animation : 0.8s
  delay: 0.2,          // Délai avant de commencer : 0.2s
  easing: "power2.out" // Courbe d'accélération
});

🎭 Liste des Animations Disponibles

⚙️ Options Disponibles

Les options suivantes peuvent être passées lors de l'initialisation d'une animation, que ce soit avec du JavaScript ou via les attributs HTML akyos-animation-*.

🌟 Utilisation avec les attributs HTML

Pour simplifier l'intégration dans vos projets, vous pouvez utiliser des attributs HTML sur les éléments que vous souhaitez animer.

Exemple :

<h1 akyos-animation-name="textOverflow" akyos-animation-duration="1.5" akyos-animation-delay="0.3">
  Bonjour Monde !
</h1>
<div akyos-animation-name="textOverflow" akyos-animation-duration="2" akyos-animation-markers="true">
  Une animation avec des marqueurs activés.
</div>

L'attribut akyos-animation-* permet de passer directement les options, et l'animation sera appliquée dynamiquement via AkyosAttributeLoader :

import { AkyosAttributeLoader } from "akyos-animation";

new AkyosAttributeLoader(); // Initialise automatiquement les animations identifiées grâce aux attributs

📁 Fonctionnalités optionnelles

AkyosAttributeLoader

Le AkyosAttributeLoader est une solution clé en main pour appliquer les animations en fonction des attributs HTML. Les paramètres des animations peuvent être définis dans vos templates/descriptions HTML grâce aux propriétés suivantes :

Cela vous permet d'éliminer toute logique JavaScript répétitive.

✍️ Style et SCSS

Importation du style des animations et personnaliser les animations avec vos propres styles.

Import du styles

Ajoutez le style de la librairie pour les animations dans votre fichier SCSS :

@import "akyos-animation/styles";

Vous pouvez également surcharger les classes avec vos propres style :

.akyos-animation-text-overflow {
  font-size: 2rem;
  color: blue;
}

🛠️ Développement Local

Pour contribuer ou tester des modifications locales :

1. Clonez le projet :

git clone https://github.com/akyoscommunication/akyos-animation.git
cd akyos-animation

2. Installez les dépendances :

yarn install

3. Lancez le développement en mode watch :

yarn dev

4. Pour livrer un build de production :

yarn build

📝 À propos

Akyos Animation a été développé en utilisant les dernières technologies modernes comme GSAP et TypeScript, garantissant performance et modularité.

Pour plus d'informations, visitez notre site : Akyos Communication.

🐝 Licence

Cette librairie est distribuée sous la licence MIT. Utilisez-la librement dans vos projets !