Comment utiliser CSS et Vanilla.js pour implémenter des animations interactives montrant les appareils Apple (code source ci-joint)

Le contenu de cet article explique comment utiliser CSS et Vanilla.js pour implémenter des animations interactives pour afficher les appareils Apple (code source ci-joint). Les amis dans le besoin peuvent s'y référer. ça aide.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front-end-daily -défis

Interprétation du code

Définir dom, comprenant 5 sous-éléments, représentant les cinq appareils iphone, mini, ipad, macbook, imac :

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

centré Affichage :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #aaa;
}

Définissez la disposition des éléments enfants dans le conteneur :

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

Définissez les propriétés communes de l'appareil, et le motif de dégradé linéaire sera utilisé comme arrière-plan de l'écran :

.device {
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    background: linear-gradient(120deg, #ddd 30%, #ccc 30%);
}

.device::before,
.device::after {
    content: '';
    position: absolute;
}

iphone, mini et ipad ont des formes similaires. Ils ont tous des caméras supérieures, des ouvertures de capteur et des boutons inférieurs, ces attributs communs peuvent donc être définis ensemble. Utilisez le pseudo ::before. pour dessiner les détails du haut et le pseudo-élément ::after pour dessiner le bas Boutons :

.iphone::before,
.mini::before,
.ipad::before {
    width: 2px;
    height: 2px;
    border-style: solid;
    border-color: #a5adbe;
    border-width: 0 12px 0 2px;
}

.iphone::after,
.mini::after,
.ipad::after {
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
}

Dessinez ensuite les appareils un par un. Dessinez d'abord le contour de l'iPhone :

.iphone {
    width: 59px;
    height: 124px;
    border: #484f5e solid;
    border-width: 18px 4px;
    border-radius: 6px;
}

Positionnez les détails du haut et du bas de l'iPhone :

.iphone::before {
    top: -10px;
}

.iphone::after {
    bottom: -13px;
}

De même, dessinez le mini :

.mini {
    width: 93px;
    height: 138px;
    border: #484f5e solid;
    border-width: 14px 5px;
    border-radius: 10px;
}

.mini::before {
    top: -8px;
}

.mini::after {
    bottom: -11px;
}

Ensuite, dessinez l'iPad :

.ipad {
    width: 134px;
    height: 176px;
    border: #484f5e solid;
    border-width: 18px 13px;
    border-radius: 12px;
}

.ipad::before {
    top: -10px;
}

.ipad::after {
    bottom: -13px;
}

Dessinez ensuite le macbook, dessinez d'abord l'écran :

.macbook {
    width: 234px;
    height: 155px;
    border: 8px solid #484f5e;
    border-radius: 7px 7px 0 0;
}

Utilisez le pseudo-élément ::before pour dessiner l'appareil photo :

.macbook::before {
    width: 294px;
    height: 14px;
    background-color: #e8ebf0;
    top: calc(100% + 8px);
    border-radius: 0 0 14px 14px;
}

Utilisez le pseudo-élément ::after pour dessiner l'hôte :

.macbook::after {
    width: 3px;
    height: 3px;
    background-color: #a5adbe;
    top: -6px;
    border-radius: 50%;
}

Ensuite, dessinez l'imac et dessinez d'abord l'écran. Les bordures noires à gauche, en haut et à droite. de l'écran ne sont pas dessinés avec l'attribut border car la bordure sera au point final. Il reste un biseau, utilisez donc box-shadow à la place :

.imac {
    width: 360px;
    height: 215px;
    border-radius: 10px;
    box-shadow: 
        inset 0 14px #484f5e,
        inset 14px 0 #484f5e,
        inset -14px 0 #484f5e;
    border-bottom: 33px solid #e8ebf1;
    transform: translateY(14px);
}

Utilisez le pseudo-élément ::before pour. dessinez la base du trapèze :

.imac::before {
    width: 90px;
    height: 0;
    top: calc(100% + 33px);
    border: solid transparent;
    border-bottom-color: #e2e4e8;
    border-width: 0 10px 47px 10px;
}

Utilisez le pseudo-élément ::after Dessinez la caméra en haut et les boutons en bas de l'écran. Notez que les boutons sont implémentés avec box-shadow. :

.imac::after {
    width: 4px;
    height: 4px;
    background-color: #a5adbe;
    top: 5px;
    border-radius: 50%;
    box-shadow: 0 191px 0 4px #464e5d;
}

À ce stade, l'ensemble de l'appareil est dessiné.
Supprimez les éléments dom des autres appareils à l'exception de l'iPhone, en ne laissant qu'un seul élément dom. Tous les effets d'animation ultérieurs changeront sur cet élément dom :

<div>
        <div></div>
        <!-- <div class="device mini"></div>
        <div class="device ipad"></div>
        <div class="device macbook"></div>
        <div class="device imac"></div> -->
    </div>

Définissez la taille du conteneur et les éléments enfants seront. Centrée verticalement, la hauteur de l'appareil représente 75% de la hauteur du conteneur :

.container {
    width: 360px;
    height: 350px;
    justify-content: center;
}

.device {
    transform: translateY(-25%);
}

Ajoutez 2 éléments bouton dans le dom, représentés respectivement par .left et .right :

<div>
    <div></div>
    <div>
        <span></span>
        <span></span>
    </div>
</div>

Positionner le bouton :

.buttons {
    position: absolute;
    width: inherit;
    font-size: 30px;
    height: 2em;
    bottom: 0;
    display: flex;
    justify-content: space-around;
}

.buttons > * {
    position: relative;
    width: 4em;
}

Les boutons sont des flèches gauche et droite :

.buttons > *::before {
    position: absolute;
}

.buttons .left::before {
    content: '←';
    right: 0;
}

.buttons .right::before {
    content: '→';
}

Définir le style du bouton sur un cercle :

.buttons > *t::before {
    position: absolute;
    width: 2em;
    height: 2em;
    background-color: #484f5e;
    color: silver;
    text-align: center;
    line-height: 2em;
    border-radius: 1em;
    cursor: pointer;
}

Ajouter une souris survoler l'effet d'arrêt :

.buttons > *::before {
    transition: 0.2s;
}

.buttons .left:hover::before {
    width: 4em;
    content: '⟵';
}

.buttons .right:hover::before {
    width: 4em;
    content: '⟶';
}

Ajouter un effet de clic sur le bouton :

.buttons > *:active {
    transform: scale(0.9);
    filter: brightness(0.8);
}

À ce stade, le bouton est créé et le script d'interaction est ensuite créé.

Définir une fonction pour obtenir des éléments $ :

const $ = (className) => document.getElementsByClassName(className)[0]

Définir un tableau pour stocker les noms d'appareils :

let devices = ['iphone', 'mini', 'ipad', 'macbook', 'imac']

Définir la méthode de traitement des données du comportement des clics , lorsque vous cliquez sur le bouton gauche, l'élément le plus à gauche du tableau est déplacé vers l'extrême droite. Au contraire, lorsque vous cliquez sur le bouton droit, l'élément le plus à droite du tableau est déplacé vers l'extrême gauche, de sorte que 2 La direction fait une boucle. le tableau :

let loop = {
    'left': () => devices.unshift(devices.pop()),
    'right': () => devices.push(devices.shift())
}

Définissez l'événement de clic et changez d'appareil en fonction des changements dans le tableau :

Array.from($('buttons').children).forEach(element =>
    element.addEventListener('click', function(e) {
        loop[e.target.className]()
        $('device').className = 'device ' + devices[0]
    })
)

Enfin, définissez l'effet d'assouplissement du changement d'appareil :

.device,
.device::before,
.device::after {
    transition: 0.4s cubic-bezier(0.5, 1.7, 0.5, 1.2);
}

Fait !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!