Comment créer des animations avec GreenSock et TailwindCSS (Partie 1)

Prenez l'habitude d'écrire ensemble ! C'est le 13ème jour de ma participation au "Nuggets Daily New Plan · April Update Challenge",Cliquez pour voir les détails de l'événement。

La plateforme d'animation GreenSock (GSAP) permet d'animer tout ce que JavaScript peut manipuler (propriétés CSS, SVG, React, canvas, objets génériques, etc.), tout en résolvant des problèmes de compatibilité sur différents navigateurs, et elle est extrêmement rapide (20 fois plus rapide que jQuery ). Environ 10 millions de sites et de nombreuses grandes marques utilisent GSAP.

L'animation modifie en fait la valeur d'attribut d'un élément plusieurs fois par seconde, et l'élément semble se déplacer, comme un fondu enchaîné, une rotation, un déplacement, etc. Alors que GSAP capture une valeur de départ et une valeur de fin, puis interpole entre elles 60 fois par seconde.

Techniquement parlant, GSAP devrait en fait s'appeler le "GreenSock Property Manipulator" (GSPM).

Aperçu des articles

Cet article se compose des parties suivantes :

Comment monter un projet
balisage d'écriture
Introduction au GSAP
Ajouter une animation à la page
en conclusion

Comment monter un projet

Avant de commencer à créer votre page de destination, vous devez préparer quelques éléments.

Dans cette section, vous allez :

Définissez le répertoire où se trouve votre projet.
Configurez GSAP et TailwindCSS.
Importer des polices.
Configurez un serveur de développement simple.

Comment définir le répertoire du projet

Exécutez d'abord la commande suivante dans un terminal :

mkdir gsap-landing
cd gsap-landing
mkdir build src
mkdir build/assets build/static
复制代码

Le code doit créer une arborescence de dossiers qui ressemble à ceci :

gsap - structure d'atterrissage

Structure du répertoire du projet

Comment configurer GSAP

Pour installer GSAP, créez un fichier appelé build dans build index.htmlet insérez-y le code suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script>
    <title>Orfice</title>
</head>
<body>
    
</body>
</html>
复制代码

Cela créera un document HTML de base et l'importera dans GSAP via la balise de script dans l'en-tête.

Comment configurer TailwindCSS

Pour installer TailwindCSS, assurez-vous d'être dans le répertoire racine de votre projet, puis exécutez la commande suivante dans un terminal :

npm install tailwindcss
npx tailwind init
复制代码

Cela devrait créer trois nouveaux fichiers à la racine de votre projet : package.json, package-lock.jsonet tailwind.config.js.

srcCréez ensuite un fichier dans un dossier nommé input.csset insérez-y le code suivant :

@tailwind base;
@tailwind components;
@tailwind utilities;
复制代码

Revenez au répertoire racine du projet et remplacez le contenu de ce tailwind.config.jsqui suit par :

module.exports = {
  content: [
  "./build/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
复制代码

Après cela, ouvrez votre package.jsonfichier et remplacez son contenu par ce qui suit :

{
  "scripts": {
    "build-css": "npx tailwindcss -i ./src/input.css -o ./build/static/output.css --watch"
  },
  "dependencies": {
    "tailwindcss": "^3.0.23"
  }
}
复制代码

Maintenant, ouvrez votre terminal et exécutez les commandes suivantes :

npm run build-css
复制代码

Cette commande s'occupe de créer et de mettre à jour le fichier : build/static/output.css, qui est l'endroit où se trouvent vos styles de page de connexion, vous devez donc le laisser fonctionner dans votre propre fenêtre de terminal jusqu'à ce que vous ayez terminé ce didacticiel.

build/index.htmlEnsuite, associez le CSS à votre page de connexion en ajoutant le code suivant au-dessus de la balise de script importée par GSAP :

<link rel="stylesheet" href="static/output.css">
复制代码

Ceci conclut la configuration de TailwindCSS.

Comment importer des polices

Remplacez l'en-tête par ce build/index.htmlqui suit :

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="static/output.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script>
	<title>Orfice</title>
</head>
复制代码

Maintenant, appliquez la police à votre CSS.

Ouvrez src/input.css-le et ajoutez le code suivant à la fin :


@layer base {
    body {
        @apply overflow-hidden h-screen;
        font-family: 'Be Vietnam Pro', sans-serif;
    }
}
复制代码

Comment configurer le serveur

Pour configurer votre serveur de développement, ouvrez une nouvelle fenêtre de terminal, accédez au répertoire racine de votre projet et exécutez le code suivant :

npm install --save-dev live-server
复制代码

Voici ce que vous devez faire ! Pour démarrer le serveur, exécutez la commande suivante dans un terminal :

live-server build
复制代码

Tant que live-serverla commande est en cours d'exécution, build/index.htmlellehôte local : 8080service et actualise automatiquement la page lorsque vous apportez des modifications au projet.