Créer une roue de tombola interactive moderne avec HTML, CSS et JavaScript-tutoriel CSS-php.cn

Building a Modern Interactive Raffle Wheel with HTML, CSS, and JavaScript

Présentation

À l'ère numérique d'aujourd'hui, impliquer votre communauté avec des outils interactifs est essentiel pour favoriser la participation et l'enthousiasme. Que vous organisiez un cadeau, meniez un sondage ou organisiez un concours, disposer d'une roue de tombola visuellement attrayante et interactive peut améliorer considérablement l'expérience utilisateur. Dans cet article, je vais vous guider à travers le processus de création de Modern Raffle 2024, une roue de tombola interactive construite avec HTML, CSS et JavaScript. Nous couvrirons tout, de la configuration de la structure à l'ajout d'animations et à l'intégration de fonctionnalités de partage social.

? Technologies utilisées

Pour donner vie à ce projet, j'ai exploité les technologies suivantes :

HTML5 : Pour structurer la page Web et créer des éléments interactifs.
CSS3 : pour styliser l'application avec des principes de conception modernes, notamment le glassmorphisme, les animations et les mises en page réactives.
JavaScript : pour ajouter de l'interactivité, gérer les entrées des utilisateurs et gérer la logique et les animations de la roue de tombola.
API Canvas : Pour dessiner et animer la roue de tombola.
Font Awesome : pour incorporer des icônes vectorielles pour un look soigné.
Google Fonts : utilisation de la police Inter pour une typographie épurée et moderne.
Achetez-moi un café : Intégration d'un bouton de don pour soutenir le projet.

?️ Structure du projet

Le projet est organisé en trois dossiers principaux :

index.html : Contient la structure HTML de l'application.
styles.css : contient tous les styles CSS pour la mise en page et la conception.
script.js : inclut le code JavaScript qui alimente l'interactivité et les animations.

De plus, une section pied de page est incorporée pour promouvoir mon site Web, LinkedIn, Twitter, et comprend un bouton Achetez-moi un café pour obtenir de l'aide.

? HTML (index.html)

La structure HTML configure les principaux composants de l'application de tombola, y compris les sections de saisie pour les participants et les prix, la roue du tirage au sort, un modal pour annoncer les gagnants et un pied de page pour les promotions.

Copier après la connexion

html

Tirage au sort moderne 2024

? Tirage au sort moderne 2024 ?

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

Copier après la connexion

/* Réinitialisation et styles de base */

{ dimensionnement de la boîte : bordure-boîte ; marge : 0 ; remplissage : 0 ; famille de polices : 'Inter', sans empattement ; >

corps {
arrière-plan : dégradé linéaire (135 degrés, # 1e3c72, # 2a5298);
couleur : #ffffff;
affichage : flex ;
direction flexible : colonne ; /* Empiler les enfants verticalement /
justifier-contenu : flex-start ; / Commencer par le haut /
align-items : center;
hauteur min : 100vh ;
/ Supprimer le débordement masqué pour permettre la visibilité du pied de page */
overflow-x : caché ;
>

/* Styles de conteneurs /
.conteneur {
arrière-plan : rgba(255, 255, 255, 0,05);
filtre de toile de fond : flou (10px);
remplissage : 40 px ;
rayon de bordure : 20 px ;
text-align : center ;
largeur : 90% ;
largeur maximale : 900 px ;
box-shadow : 0 8px 32px rgba(0, 0, 0, 0.37);
bordure : 1px rgba solide (255, 255, 255, 0,18);
animation : fadeIn 1s facilité d'entrée ;
flexion : 1 ; / Autoriser le conteneur à grandir et pousser le pied de page vers le bas */
affichage : flex ;
flex-direction : colonne ;
align-items : center;
>

/* Animation en fondu */
@keyframes fadeIn {
de { opacité : 0 ; transformer: traduireY(-20px); >
à { opacité : 1 ; transformer : traduireY(0); >
>

/* Styles de titres */
h1 {
marge inférieure : 30 px ;
taille de police : 3rem ;
poids de la police : 700 ;
texte-ombre : 3px 3px 6px rgba(0,0,0,0.3);
>

/* Sections d'entrée */
.input-section {
marge inférieure : 40 px ;
largeur : 100 % ;
>

.input-section h2 {
marge inférieure : 15 px ;
taille de police : 1,75rem ;
poids de la police : 600 ;
>

/* Groupes d'entrée */
.input-group {
affichage : flex ;
justifier-contenu : centre ;
align-items : center;
écart : 10 px ;
marge inférieure : 15 px ;
>

.input-group entrée {
rembourrage : 12px 20px ;
largeur : 60%;
bordure : aucune ;
rayon de bordure : 30 px ;
arrière-plan : rgba(255, 255, 255, 0.1);
couleur : #ffffff;
taille de police : 1rem;
contour : aucun ;
transition : facilité d'arrière-plan de 0,3 s, facilité d'ombre de boîte de 0,3 s ;
>

.input-group input::placeholder {
couleur : #dddddd;
>

.input-group input:focus {
arrière-plan : rgba(255, 255, 255, 0.2);
box-shadow : 0 0 10px rgba(255, 127, 80, 0.5);
>

Bouton .input-group {
rembourrage : 12px 25px ;
bordure : aucune ;
rayon de bordure : 30 px ;
couleur d'arrière-plan : #ff7f50;
couleur : #fff;
taille de police : 1rem;
poids de la police : 600 ;
curseur : pointeur ;
affichage : flex ;
align-items : center;
écart : 8 px ;
transition : facilité de couleur d'arrière-plan de 0,3 s, facilité de transformation de 0,2 s, facilité d'ombre de boîte de 0,3 s ;
>

Bouton .input-group : survolez {
couleur d'arrière-plan : #ff5722;
transformer : traduireY(-2px);
box-shadow : 0 4px 10px rgba(0,0,0,0.3);
>

/* Liste des utilisateurs */

liste d'utilisateurs {

Copier après la connexion

}

liste d'utilisateurs li {

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

Copier après la connexion

}

/* Prix sélectionné */

Prix sélectionné {

list-style: none;
max-height: 120px;
overflow-y: auto;
text-align: left;
padding: 0 20%;
width: 100%;

Copier après la connexion

}

/*Conteneur à roulettes*/
.wheel-conteneur {
position : relative ;
marge inférieure : 40 px ;
largeur : 100 % ;
affichage : flex ;
flex-direction : colonne ;
align-items : center;
>

.wheel-wrapper {
position : relative ;
largeur : 100 % ;
largeur maximale : 500 px ;
marge : 0 auto 20px ;
>

/* Styles de toile */
toile {
largeur : 100 % ;
hauteur : auto ;
rayon de bordure : 50 % ;
box-shadow : 0 0 20px rgba(0,0,0,0.5);
arrière-plan : #000;
transition : transformation 4s cubique-bézier(0.33, 1, 0.68, 1);
>

/* Styles de pointeur */
.pointeur {
position : absolue ;
haut : -20px ;
gauche : 50%;
transformer : traduireX(-50 %);
taille de police : 2rem;
couleur : #ffeb3b;
animation : rebond 2s infini ;
>

@keyframes rebondissent {
0%, 100% { transform: traduireX(-50%) traduireY(0); >
50% { transformer : traduireX(-50%) traduireY(-10px); >
>

/* Bouton de rotation */

spinBtn {

padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1rem;

Copier après la connexion

}

spinBtn: survoler {

font-size: 1.2rem;
font-weight: 500;
margin-top: 10px;

Copier après la connexion

}

spinBtn : actif {

padding: 15px 35px;
border: none;
border-radius: 50px;
background-color: #32cd32;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
margin: 0 auto;

Copier après la connexion

}

/* Styles modaux */
.modal {
affichage : aucun ;
poste : fixe ;
indice z : 100 ;
gauche : 0;
haut : 0 ;
largeur : 100 % ;
hauteur : 100%;
débordement : automatique ;
couleur d'arrière-plan : rgba(0,0,0,0.8);
animation : facilité fadeInModal 0,5 s ;
>

@keyframes fadeInModal {
de { opacité : 0 ; >
à { opacité : 1 ; >
>

.modal-content {
couleur d'arrière-plan : rgba(30, 30, 30, 0.95);
marge : 10 % automatique ;
remplissage : 30 px ;
rayon de bordure : 15 px ;
largeur : 90% ;
largeur maximale : 600 px ;
text-align : center ;
box-shadow : 0 8px 25px rgba(0,0,0,0.5);
position : relative ;
animation : facilité slideDown 0,5 s ;
>

@keyframes slideDown {
from { transform: traduireY(-50px); opacité : 0 ; >
à { transformer : traduireY(0); opacité : 1 ; >
>

.bouton de fermeture {
couleur : #bbb;
position : absolue ;
haut : 15px ;
à droite : 20 px ;
taille de police : 28 px ;
poids de la police : gras ;
curseur : pointeur ;
transition : couleur 0,3 s facilité ;
>

.close-button:survol,
.close-button:focus {
couleur : #fff;
>

.modal-content h2 {
marge inférieure : 20 px ;
taille de police : 2rem;
poids de la police : 700 ;
>

.modal-content p {
taille de la police : 1,25rem ;
marge inférieure : 25 px ;
>

partagerBtn {

background-color: #28a428;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);

Copier après la connexion

}

shareBtn: survolez {

transform: translateY(0);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);

Copier après la connexion

}

/* Styles de pied de page /
.footer {
arrière-plan : rgba(255, 255, 255, 0,05);
filtre de toile de fond : flou (10px);
remplissage : 20px 0;
border-top : 1px solid rgba(255, 255, 255, 0.2);
largeur : 100 % ;
/ Assurez-vous que le pied de page reste en dessous du contenu */
flex-rétrécissement : 0;
>

.footer-conteneur {
affichage : flex ;
flex-direction : colonne ;
align-items : center;
justifier-contenu : centre ;
largeur maximale : 900 px ;
marge : 0 auto ;
remplissage : 0 20px ;
>

.footer-liens {
affichage : flex ;
écart : 20 px ;
marge inférieure : 15 px ;
>

.footer-links un {
couleur : #ffffff;
taille de police : 1rem;
décoration de texte : aucune ;
affichage : flex ;
align-items : center;
écart : 8 px ;
transition : couleur facilité 0,3 s, transformation facilité 0,2 s ;
>

.footer-links a:hover {
couleur : #ff7f50;
transformer : traduireY(-2px);
>

.footer-links a i {
taille de police : 1,2rem ;
>

.footer-donate {
marge supérieure : 10 px ;
>

/* Conception adaptative pour le pied de page */
@media (largeur min : 600 px) {
.footer-conteneur {
flex-direction : rangée ;
justifier-contenu : espace-entre ;
>

Copier après la connexion

}

/* Styles de barre de défilement pour la liste des utilisateurs */

liste d'utilisateurs ::-webkit-scrollbar {

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

Copier après la connexion

}

liste d'utilisateurs ::-webkit-scrollbar-track {

list-style: none;
max-height: 120px;
overflow-y: auto;
text-align: left;
padding: 0 20%;
width: 100%;

Copier après la connexion

}

liste d'utilisateurs ::-webkit-scrollbar-thumb {

padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1rem;

Copier après la connexion

}

userList::-webkit-scrollbar-thumb:hover {

font-size: 1.2rem;
font-weight: 500;
margin-top: 10px;

Copier après la connexion

}

/* États de focus des boutons pour l'accessibilité */
Bouton .input-group : focus,

spinBtn: focus,

shareBtn:focus {

padding: 15px 35px;
border: none;
border-radius: 50px;
background-color: #32cd32;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
margin: 0 auto;

Copier après la connexion

}

background-color: #28a428;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);

Copier après la connexion

// Sélection des éléments DOM
const addUserBtn = document.getElementById('addUserBtn');
const usernameInput = document.getElementById('username');
const userList = document.getElementById('userList');
const setPrizeBtn = document.getElementById('setPrizeBtn');
const prizeInput = document.getElementById('prize');
const selectedPrize = document.getElementById('selectedPrize');
const spinBtn = document.getElementById('spinBtn');
const gagnantModal = document.getElementById('winnerModal');
const closeBtn = document.querySelector('.close-button');
const gagnantText = document.getElementById('winnerText');
const shareBtn = document.getElementById('shareBtn');

//Variables d'état
laisser les utilisateurs = [];
let prize = "Aucun";
laissez isSpinning = false;

// Configuration des roues
const canvas = document.getElementById('raffleWheel');
const ctx = canvas.getContext('2d');
const wheelRadius = toile.width / 2;
const couleurs = ['#FF5733', '#33FF57', '#3357FF', '#F333FF', '#FF33A8', '#33FFF6', '#FFC300', '#DAF7A6'];
laissez startAngle = 0;
soit arc = 0;

// Initialiser la roue
fonction initializeWheel() {
if (users.length === 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
revenir ;
>
arc = (2 * Math.PI) / utilisateurs.longueur;
drawWheel();
>

// Dessinez la roue de tombola
fonction drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pour (soit i = 0; i < users.length; i ) {
angle const = startAngle i * arc;
ctx.fillStyle = couleurs[i % couleurs.longueur];
ctx.beginPath();
ctx.moveTo(wheelRadius, wheelRadius);
ctx.arc(wheelRadius, wheelRadius, wheelRadius, angle, angle arc, false);
ctx.closePath();
ctx.fill();

Copier après la connexion

}

// Dessinez la flèche du pointeur
fonction drawPointer() {
const pointerSize = 20;
ctx.fillStyle = '#FFEB3B';
ctx.beginPath();
ctx.moveTo(wheelRadius - pointerSize, 0);
ctx.lineTo(wheelRadius pointerSize, 0);
ctx.lineTo(wheelRadius, -pointerSize * 1.5);
ctx.closePath();
ctx.fill();
>

// Ajouter un événement utilisateur
addUserBtn.addEventListener('click', addUser);
usernameInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addUser();
});

// Fonction pour ajouter un utilisateur
fonction addUser() {
const nom d'utilisateur = nom d'utilisateurInput.value.trim();
if (nom d'utilisateur === "") {
showAlert("Veuillez saisir un nom d'utilisateur valide.");
revenir ;
>
if (users.includes(username)) {
showAlert("Ce nom d'utilisateur est déjà ajouté.");
revenir ;
>
utilisateurs.push(nom d'utilisateur);
updateUserList();
nom d'utilisateurInput.value = '';
initializeWheel();
>

// Mettre à jour l'interface utilisateur de la liste d'utilisateurs
fonction updateUserList() {
userList.innerHTML = '';
utilisateurs.forEach(user => {
const li = document.createElement('li');
li.textContent = utilisateur;
userList.appendChild(li);
});
>

// Événement de prix défini
setPrizeBtn.addEventListener('click', setPrize);
prizeInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') setPrize();
});

// Fonction pour définir le prix
fonction setPrize() {
const prizeInputValue = prizeInput.value.trim();
if (prizeInputValue === "") {
showAlert("Veuillez saisir un prix valide.");
revenir ;
>
prix = prixInputValue;
selectedPrize.textContent = Prix sélectionné : ${prize};
prizeInput.value = '';
>

// Événement du bouton de rotation
spinBtn.addEventListener('clic', spinWheel);

// Fonction pour faire tourner la roue
fonction spinWheel() {
si (isSpinning) retourne ;
if (users.length === 0) {
showAlert("Veuillez ajouter au moins un utilisateur.");
revenir ;
>
if (prix === "Aucun") {
showAlert("Veuillez définir un prix.");
revenir ;
>

Copier après la connexion

}

// Fonction pour arrêter la roue et annoncer le gagnant
fonction stopRotateWheel() {
degrés const = startAngle * 180 / Math.PI 90;
const arcd = arc * 180 / Math.PI;
const index = Math.floor((360 - (degrés % 360)) / arcd) % users.length;
const gagnant = utilisateurs[index];
showWinner(gagnant);
isSpinning = faux;
spinBtn.disabled = false;
>

// Fonction d'assouplissement pour une animation fluide
fonction easyOut(t, b, c, d) {
t /= d;
t--;
retourner c * (t * t * t 1) b;
>

// Fonction pour afficher les alertes
fonction showAlert (message) {
alerte(message);
>

// Fonction pour afficher le gagnant en modal
fonction showWinner(gagnant) {
gagnantText.textContent = ${winner} a gagné ${prize} ! ?;
gagnantModal.style.display = "block";
>

// Fermer les événements modaux
closeBtn.addEventListener('click', () => {
gagnantModal.style.display = "aucun";
});
window.addEventListener('clic', (événement) => {
if (event.target === gagnantModal) {
gagnantModal.style.display = "aucun";
>
});

// Partager sur Twitter
shareBtn.addEventListener('click', shareOnTwitter);

// Fonction pour partager le gagnant sur Twitter
fonction shareOnTwitter() {
const text = encodeURIComponent(? Félicitations à ${winnerText.textContent} ! Ils ont gagné ${prize} ! ? #Giveaway #Community);
const url = encodeURIComponent('https://gladiatorsbattle.com');
const twitterUrl = https://twitter.com/intent/tweet?text=${text}&url=${url};
window.open(twitterUrl, '_blank');
>

// Configuration initiale de la roue
initializeWheel();

    <div class="input-section">
        <h2>Add Participants</h2>
        <div class="input-group">
            <input type="text">


<pre class="brush:php;toolbar:false">
? CSS (styles.css)
The CSS file is meticulously crafted to ensure a modern and premium look, incorporating glassmorphism, smooth animations, responsive design, and accessibility features. Below is the complete CSS with detailed explanations of enhancements and fixes.

Copier après la connexion

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!