Construisez une page d'atterrissage par scission animée

Sep 13, 2025

Comment

[dix] [dix] [dix]

[dix]

Votre page d'atterrissage est un élément crucial de votre mise en page . C'est la première opportunité réelle que vous devez introduire votre entreprise ou le produit que vous vendez, de sorte que sa conception est la clé. Les pages d'atterrissage sont conçues avec un objectif unique ciblé appelé appel à l'action (CTA). L'utilisation de couleurs et d'images pour compléter les appels à l'action et le expérience utilisateur est un must.

[dix]

Voir le code de travail pour ce tutoriel

Dans ce tutoriel, nous allons passer à la construction d'une page d'atterrissage engagée pour une marque de mode fictive. Il sera centré autour d'une conception à l'écran divisée avec de grandes images et des transitions animées qui se produisent sur Hover. Cette page aura deux appels clairs aux boutons d'action et nous utiliserons HTML, Toupet Pour le style et une touche de vanille JavaScript qui utilise la syntaxe ES6 (rappelez-vous de vous assurer que votre hébergement Web est adapté aux besoins de votre site Web). Trop compliqué? Créez un site Web sans besoin de code, essayez un simple Générateur de site Web .

01. Get Mise en place

Click the icon in the top right to enlarge the image — Cliquez sur l'icône en haut à droite pour agrandir l'image

Si vous utilisez CodePen, assurez-vous que le CSS est réglé sur 'SCSS' dans les paramètres du stylo. Vous pouvez faire cette modification en cliquant sur l'onglet Paramètres, choisissez "CSS" et modifier le prétraiteur CSS en SCSS dans les options déroulantes.

Ensuite, nous pouvons commencer à ajouter dans notre HTML. Nous allons envelopper une section appelée «gauche» et une section appelée «droite» dans une classe de conteneurs, avec les deux sections données à une classe d'écran.

 & lt; div mas = "conteneur" & gt;
  & lt; classe de section = "écran gauche" & gt;
  & lt; / section & gt;
  & lt; classe de section = "écran droit" & gt;
  & lt; / section & gt;
& lt; / div et gt;

02. Terminer le HTML

Pour finaliser notre HTML, nous ajouterons dans un titre pour chaque section en utilisant un h1 étiqueter. En dessous de ce que nous devrons ajouter dans un bouton, ce qui serait associé à une autre page s'il s'agissait d'un projet réel. Nous allons donner à cela une classe de bouton garder les choses agréables et simples.

[dix]

 & lt; div mas = "conteneur" & gt;
   & lt; classe de section = "écran gauche" & gt;
    & lt; H1 & GT; Mens Fashion & LT; / H1 & GT;
      et lt; bouton et gt;
       & lt; un href = "#" classe = "bouton" & gt; apprendre plus & lt; / a & gt;
      & lt; / button & gt;
    & lt; / section & gt;

    & lt; classe de section = "écran droit" & gt;
       & lt; H1 & GT; Femmes Mode & LT; / H1 & GT;
        et lt; bouton et gt;
          & lt; un href = "#" classe = "bouton" & gt; apprendre plus & lt; / a & gt;
        & lt; / button & gt;
     & lt; / section & gt;

03. Explorez les variables Sass

La seule chose que nous aimons tous sur Sass est l'utilisation de variables. Même si des variables de CSS natives obtiennent plus de soutien, nous garderons les choses en sécurité en utilisant Sass. Nous allons les mettre au sommet de notre .scss et vous pouvez choisir les couleurs que vous voulez, mais utiliser rgba Les valeurs nous donneront plus de flexibilité.

 / ** Variables ** /

$ conteneur-bgcolor: # 444;
$ GAUCHE BGCOLOR: RGBA (136, 226, 247, 0,7);
$ gauche-bouton-glissez: RGBA (94, 226, 247, 0,7);
$ droit-bgcolor: rgba (227, 140, 219, 0,8);
$ bouton droit-hover: rgba (255, 140, 219, 0,7);
$ Hover-largeur: 75%;
$ petite-largeur: 25%;
$ animatespeed: 1000ms;

04. Ajuster le style du corps

Premièrement, nous effacerons tout le rembourrage et la marge par défaut au corps, puis nous allons définir la famille de polices pour ouvrir Sans. Cela n'affectera que le bouton, de sorte que cela n'a pas beaucoup d'importance de la police que nous utilisons. Ensuite, nous allons mettre la largeur et la hauteur à 100% et assurez-vous que tout ce qui débouche sur l'axe X est caché.

 HTML, Corps {
  rembourrage: 0;
  marge: 0;
  Font-famille: 'Open Sans', Sans Serif;
  largeur: 100%;
  Hauteur: 100%;
  Overflow-X: caché;
}

05. Style Les titres de section

Il est temps de choisir une police Google pour les titres de section - nous avons choisi l'affichage Playfair. Puis en utilisant traduire Nous pouvons nous assurer que les titres de section sont toujours centrés sur l'axe X.

h1 {
  Taille de la police: 5REM;
  Couleur: #fff;
  Position: absolu;
  à gauche: 50%;
  TOP: 20%;
  transformer: TRUCLATEX (-50%);
  espace blanc: Nowrap;

  Font-famille: 'Playfair Display', Serif;
}

06. faire démarquer les CTA

Nos boutons agiront comme des appels à l'action. Celles-ci doivent donc être grandes, audacieuses et positionnées où elles sont faciles à cliquer. Les deux boutons auront une bordure blanche et un effet de transition intéressant. Les styles par défaut des deux boutons seront identiques, mais nous allons changer leurs couleurs sur Hover.

 .button {
  bloc de visualisation;
  Position: absolu;
  à gauche: 50%;
  TOP: 50%;
  Hauteur: 2.6rem;
  TOP TOP: 1.2REM;
  largeur: 15rem;
  Texte-Aligner: Centre;
  Couleur blanche;
  frontière: 3px solide #fff;
  Rayon frontalier: 4PX;
  Poids de la police: 600;
  Texte-transformateur: majuscule;
  Texte-Décoration: Aucun;
  transformer: TRUCLATEX (-50%);
  Transition: Tous .2;

Les boutons principaux auront un joli effet de navigation simple et nous utiliserons les variables Sass que nous avons spécifiées pour la couleur, qui sera une couleur similaire à l'arrière-plan de la page.

 .CREEN.LEFT .BUTTON: HOVER {
  Couleur d'arrière-plan: $ bouton de navigation à gauche;
  Couleur de la bordure: $ bouton gauche de gauche;
}

.Creen.Right .Button: Hover {
  Colorie de fond: $ bouton droit de survol;
  Couleur de la frontière: $ bouton droit de survol;

07. Définissez le fond du conteneur et les écrans

La classe de conteneurs agira comme notre enveloppe de page et nous allons définir la position de ceci sur relatif, simplement parce que nous voulons positionner les écrans au positionnement absolu. Nous allons donner au conteneur une couleur d'arrière-plan par défaut, mais bien sûr, cela ne sera pas vu car nous allons définir différentes couleurs sur les deux arrière-plans d'écran.

 .Container {
  Position: relatif;
  largeur: 100%;
  Hauteur: 100%;
  arrière-plan: $ conteneur-bgcolor;
  
    .écran {
      Position: absolu;
      largeur: 50%;
      Hauteur: 100%;
      débordement caché;
    }
}

08. Ajouter des images de fond

Les sections gauche et droite afficheront une image et vous trouverez des images libres de droits de sites Web tels que Malposé , Pixabay ou Peines (que j'ai utilisé dans ce didacticiel). Pour faciliter les choses, j'ai utilisé un service d'hébergement et de partage d'images gratuits appelé ImgBB que nous pouvons créer un lien vers notre CSS.

[dix]

 .creen.left {
  à gauche: 0;
  Contexte: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Centre Centre Centre No-Repeat;
  Taille de fond: couverture;
  
    & amp;: avant {
       Position: absolu;
      teneur: "";
      largeur: 100%;
      Hauteur: 100%;
      CONTEXTE: $ GAUCHE BGCOLOR;
    }
}

Le côté droit de la page affichera également une image d'arrière-plan à l'aide de IMGBB et nous allons définir la couleur d'arrière-plan sur le rose. Encore une fois, nous définissons la taille de l'arrière-plan à couvrir . Cela nous permettra de couvrir l'ensemble de l'élément contenant, qui dans notre cas est le .écran classer.

 .Creen.right {
  droite: 0;
  arrière-plan: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Centre Centre Centre Non-Repeat;
  Taille de fond: couverture;
  
   & amp;: avant {
      Position: absolu;
      teneur: "";
      largeur: 100%;
      Hauteur: 100%;
      Contexte: $ droit-bgcolor;
    }
}

09. Ajouter des transitions et des effets survolez

La vitesse d'animation de notre effet de survol sur les deux écrans sera contrôlée par une transition qui détient la valeur de notre variable. $ animatespeed , qui est 1000ms (une seconde). Ensuite, nous allons terminer en donnant à l'animation une certaine assouplie, ce qui est une facilité d'entrée et de sortie pour nous donner une animation plus douce.

 .CREEN.LEFT, .CREEN.Right, .screen.right: avant, .screen.left: avant {
  Transition: $ animera toute la tranquillité;
}

Ce que nous voulons faire maintenant, c'est que lorsque vous allumez sur l'écran gauche, il y aura une classe ajoutée à cette section à l'aide de JavaScript (que nous écrirons dans une étape ultérieure). Lorsque cette classe est ajoutée, alors cet écran s'étire à la largeur de la variable que nous avons spécifiée - qui sera de 75%, puis le côté droit sera réglé sur la variable de largeur plus petite (25%).

 .Hover-gauche .left {
  largeur: $ wover-largeur;
}

.Hover-gauche .right {
  largeur: $ petite largeur;
}
.Hover-gauche .right: avant {
  z-index: 2;
}

Cela fonctionne exactement la même chose que le côté gauche, où une nouvelle classe sera ajoutée sur la souris HOVER à l'aide de JavaScript, et le bon écran s'étendra en conséquence. Nous devons également nous assurer que le z-index est réglé sur 2 Donc, le bouton CTA devient plus important.

 .Hover-droite .right {
  largeur: $ wover-largeur;
}

.Hover-droite .left {
  largeur: $ petite largeur;
}

.Hover-droite .left: avant {
  z-index: 2;
}

10. Passez à JavaScript

Nous utiliserons une touche de vanille JavaScript pour nous aider à ajouter et à supprimer des classes CSS et nous utiliserons également certaines des nouvelles fonctionnalités ES6. La première chose à faire est de déclarer des variables constantes.

Parce que nous allons utiliser document Plus d'une fois, nous allons définir une variable constante appelée doc et stocker le document dans cela afin que nous puissions garder le mot «document» agréable et court.

 Cons doc = document;

Maintenant, nous devons définir trois autres constantes qui stockeront le .droit , .gauche et .récipient Sélecteurs. La raison pour laquelle nous utilisons des constantes est parce que nous savons que nous ne voulons pas modifier la valeur de ceux-ci, il est donc logique d'utiliser une constance. Avec ceux-ci maintenant, nous pouvons aller de l'avant et y ajouter des événements de la souris.

 const droit = doc.queryselector (". Droite");
const gauche = doc.queryselector (". gauche");
const conteneur = doc.queryselector (". conteneur");

En utilisant le gauche Variable constante Nous avons déclaré lors de la dernière étape, nous pouvons maintenant ajouter un auditeur d'événement. Cet événement sera le souriseur événement et au lieu d'utiliser une fonction de rappel, nous utiliserons une autre fonctionnalité ES6 appelée Fonctions de flèche '(() = & GT;) .

 // ajoute une classe à l'élément de conteneur sur la survolte
de gauche.addeventlistener ("MouseNer", () = & GT; {
  conteneur.classlist.add ("Hover-gauche");
});

11. Ajouter et supprimer une classe

Dans la dernière étape, notre auditeur d'événements a ajouté un souriseur événement qui cible la classe principale du conteneur et ajoute une nouvelle classe appelée flotter-gauche à l'élément de section gauche. Avec cela, nous avons appelé, nous devons maintenant le supprimer lorsque nous allons le survoler. Nous allons faire cela en utilisant le mouseleave événement et le .supprimer() méthode.

 // Supprime la classe qui a été ajoutée sur Hover
gauche.addeventlistener ("Mouseleave", () = & GT; {
  conteneur.classlist.remove ("Hover-gauche");
});

Jusqu'à présent, nous avons tout fait sur l'écran gauche. Nous terminerons maintenant le JavaScript et nous allons ajouter et supprimer des classes sur les éléments de la section de droite. Encore une fois, nous avons utilisé la syntaxe de fonction arrow ici pour garder tout ce qui est beau et bien rangé.

 Droite.addeventlistener ("MouseNer", () = & GT; {
  conteneur.classlist.add ("Hover-droite");
});

droit.addeventlistener ("Mouseleave", () = & GT; {
  conteneur.classlist.remove ("Hover-droite");
});

12. Rendez-le réactif

Aucun projet - Peu importe la taille ou la petite - devrait éviter d'être réactif. Donc, dans cette étape, nous ajouterons des requêtes médiatiques à notre CSS et rendront ce petit projet comme adaptatif aux appareils mobiles de mieux que nous puissions. Ça vaut la peine de vérifier la Codépen original voir comment cela fonctionne.

 @media (max-largeur: 800px) {
  h1 {
    Taille de la police: 2REM; }

  .bouton {
    largeur: 12rem;
  }

Nous nous sommes assurés que lorsque la largeur de notre page est atteinte à 800px, la police et les boutons se réduiront en taille. Donc, pour terminer les choses, nous voulons cibler la hauteur et assurez-vous que nos boutons se déplacent dans la page lorsque la hauteur de la page devient inférieure à 700px.

 @media (max-hauteur: 700px) {
  .bouton {
    TOP: 70%;
}}

Vous voulez enregistrer vos pages? Exportez-les en tant que PDFS et sauvegardez-les en sécurité stockage en ligne .

Événement de conception web Générer London Les déclarations du 19 au 21 septembre 2018, offrant un calendrier emballé des orateurs de premier plan industriel, une journée complète d'ateliers et des possibilités de réseaux précieuses - ne le manquez pas. Obtenez votre billet de génération maintenant .

Cet article a été publié à l'origine dans Net Magazine numéro 305 . Abonnez-vous maintenant .

Lire la suite:

5 nouveaux sites Web sensationnels doivent être inspirés par
Créer un effet de texte 3D animé
19 superbes sites Web de défilement de Parallax

[dix] [dix]

[dix]

Construisez une page d'atterrissage par scission animée

01. Get Mise en place

02. Terminer le HTML

03. Explorez les variables Sass

04. Ajuster le style du corps

05. Style Les titres de section

06. faire démarquer les CTA

07. Définissez le fond du conteneur et les écrans

08. Ajouter des images de fond

09. Ajouter des transitions et des effets survolez

10. Passez à JavaScript

11. Ajouter et supprimer une classe

12. Rendez-le réactif

Comment - Most Popular Articles

44 des meilleurs raccourcis et gestes iPad pour iPados 2020

Construire un portail client avec WordPress

Comment masquer votre code JavaScript à partir de la source de vue

Créer des rayons de Dieu dans V-ray

Gardez le contrôle de la version parfait avec abstrait

Comment sculpter un gobelin à imprimé 3D

Aiguisez vos compétences de peinture nature morte

Demandez à la création avec des portraits et du visage facifest

Catégories