Comment créer une page de garde. Laissez vos coordonnées

Un stub est une page placée sur un site lorsqu'elle n'est pas disponible pour une raison ou une autre. Par exemple, lorsque vous finalisez ou modifiez la conception du site et qu'à ce moment-là, il n'est pas disponible ou ne s'affiche pas correctement. Il serait conseillé de mettre en place à ce moment une page souche, sur laquelle il sera écrit que le site est en maintenance.

Alors, commençons...

Nous allons créer un espace réservé simple avec une image d'arrière-plan et un texte .

Créons un dossier sur l'ordinateur dans lequel nous placerons tous les fichiers nécessaires à notre stub.

Dans ce dossier, nous allons créer un autre dossier appelé images. Nous y placerons notre image d'arrière-plan et, éventuellement, d'autres images qui pourraient être nécessaires pendant le travail.

Ouvrez le programme Notepad++ (ou un programme similaire, par exemple Notepad). Nous créons nouveau document. Suivant - Fichier - Enregistrer sous, sélectionnez notre dossier avec le stub et enregistrez le document sous le nom index.html

Voici ce qui devrait maintenant se trouver dans notre dossier :

Ouvrez le fichier index.html dans notre éditeur (après enregistrement, il devrait être ouvert pour vous). Nous devons maintenant nous assurer que l'encodage de ce fichier est correctement défini. Pour ce faire, allez dans l'élément de menu « Encodages » et cliquez sur « Convertir en UTF-8 »

Afin de ne pas perdre accidentellement le résultat obtenu pendant le travail, je recommande de sauvegarder périodiquement le document pendant le travail. Cela peut être fait dans le menu "Fichier" ou avec le raccourci clavier "Ctrl + S".

Nous écrivons le code suivant sous l'éditeur :

Toute page Web est constituée de ces balises.

Ajoutons maintenant un titre à notre page, car ce ne sera pas très agréable lorsque quelqu'un l'ouvrira et verra index.html dans le titre de l'onglet du navigateur (vous pouvez ouvrir la page dans le navigateur et voir ce qui se passe). Pour ce faire, ajoutez le code suivant entre et :

Le site est en maintenance

Image d'arrière-plan

Sélectionnons maintenant une image d'arrière-plan pour notre espace réservé, puis revenons à l'édition de la page.

Pour ce faire, allez sur Google Images et recherchez une image intéressante qui pourrait servir d'arrière-plan à notre page. Il est important de sélectionner une image d'une largeur d'au moins 1920 pixels pour que notre page s'affiche bien sur les grands écrans. je suis entré dans barre de recherche et j'ai choisi l'une des photos.

Ouvrez l'image en taille réelle et enregistrez-la dans votre dossier images. Ensuite, nous le renommons. Appelons-le bg (n'oubliez pas le format de l'image, dans mon cas c'est jpg).

Voici ce que j'ai retenu. Ceci est une photo de la ville de Chicago. À mon avis, il convient tout à fait à l’image de fond du site.

Nous attachons une image de fond à la page en utilisant les styles CSS :

Le site est en maintenance

Le texte sera constitué d'un titre et, en fait, d'un paragraphe de texte.

Le site est en maintenance

Voici ce qui s'est passé :

Nous allons désormais ajouter nos contacts afin que les visiteurs puissent nous contacter immédiatement, et ne pas attendre que les travaux sur le site soient terminés.

Ajoutons 3 blocs contenant le téléphone, E-mail et Skype.

Le site est en maintenance Le site est en maintenance, revenez plus tard !

Le site est actuellement en cours travaux d'ingénierie. Veuillez revenir plus tard ou contactez-nous de l'une des manières suivantes :

Tél. : 333-33-33

E-mail: [email protégé]

Skype : admsite_ru

Il ne reste plus qu'à travailler avec les styles.

Agrandissons le titre, alignons-le au centre et abaissons-le plus près du centre de l'écran.

Augmentons la police du paragraphe de texte à vingt pixels et faisons un petit retrait par rapport au titre. Nous ferons également une bordure en bas du texte, qui le séparera des contacts.

Créons des blocs avec des contacts sur 3 colonnes, augmentons la police, alignons chaque bloc au centre et changeons la couleur du texte.

Le site est en maintenance Le site est en maintenance, revenez plus tard !

Le site est actuellement en travaux techniques. Veuillez revenir plus tard ou contactez-nous de l'une des manières suivantes :

Tél. : 333-33-33

E-mail: [email protégé]

Skype : admsite_ru

De ce fait, nous disposons d’une page fictive que nous pouvons utiliser lorsque le site est en travaux techniques.

Lorsqu'un site est en attente de lancement ou en rénovation, il est nécessaire d'informer les visiteurs du site qu'il est sur le point d'ouvrir. Et la solution parfaite à ce problème est de créer page de destination avec un préavis approprié.

À mesure que les outils de développement Web modernes ont évolué, des pages comme celles-ci ont évolué de pages simples avec du texte dans des solutions plus intéressantes.

La création d'un tel espace réservé pour le site augmente le niveau d'attente des visiteurs, suscitant ainsi leur intérêt. En plus de la simple notification, il est également possible de collecter des informations sur les utilisateurs intéressés en insérant des formulaires d'abonnement et retour.

Dans ce didacticiel, nous allons créer un tel stub pour un site, qui contiendra un formulaire d'abonnement et un compte à rebours, implémenté à l'aide d'un plugin jQuery de Keith Wood.

Matériel nécessaire pour le cours :

• N'importe quelle image d'arrière-plan
• Du temps et de la patience.

index.html - fichier principal du projet

Dossier « js » – dossier avec les scripts JavaScript/JQuery

dossier « img » - dossier avec les images du projet

Dossier « css » – dossier avec les feuilles de style du projet (fichiers CSS)

Commençons

La première étape du travail consistera à se connecter au fichier html principal des feuilles de style et des bibliothèques jquery.
Nous incluons les fichiers dans la balise head.

Bientôt disponible avec Counter

HTML

Créons un balisage pour notre document HTML. Tous les éléments de la page seront à l'intérieur d'une balise div avec l'identifiant « conteneur ». À l'intérieur de ce bloc, nous aurons des en-têtes, un compteur, un formulaire de commentaires et un pied de page (le bloc du bas avec copyright).

Notre site Web sera bientôt disponible. NOUS NOUS EXCUONS POUR LA INCONVENANCE

VOUS DEVEZ ATTENDRE...

ENVOYEZ-MOI DES DÉTAILS À CE SUJET

Droit d'auteur - 1stwebdesigner.com - 2014

Notez que nous avons laissé le div avec l'ID "compteur" vide. Nous utiliserons plus tard cet identifiant pour l'associer à notre plugin jquery et y ajouter des styles css.

CSS

Créons maintenant un fichier CSS pour notre projet, qui contiendra tous les styles. Tout d'abord, ajoutons des styles pour les éléments principaux : body, h1, h2 et le bloc avec l'identifiant « conteneur ». Pour le bloc « conteneur », nous précisons la largeur en pourcentage afin qu'elle change en fonction de la taille de la fenêtre du navigateur.

Pour la balise h1, appliquez une transformation CSS3, qui lui permettra de pivoter à 360 degrés le long de l'axe X. Vous pouvez en savoir plus sur cette propriété.

Corps ( couleur : #dadada ; hauteur de ligne : 1,75 ; largeur : 100 % ; arrière-plan : url(../img/background.jpg)center ; famille de polices : "Open Sans" ; ) h1,h2( couleur : # fff ; hauteur de ligne : 1,16667 ; transformation du texte : majuscule ; ombre du texte : 2px 2px 2px rgba(150,150,150,1) -poids : 700 ; bordure : 2px en pointillés #fff ; Facilité 8s ; : facilité de 0,8 s ; transition : facilité de 0,8 s ; ; -o -transform : rotateX(360deg); transform : rotateX(360deg ) h2 ( taille de police : 30px ; poids de police : 300 ; marge supérieure : 30px ; ) .container ( largeur : 58 % ; marge : 40px auto 0 ; ) .details ( marge-haut : 30px ; couleur : #fff ; alignement du texte : centre ; ombre du texte : 2px 2px 2px rgba(150,150,150,1); )

Bouton, entrée, zone de texte (taille de police : 16 px ; largeur maximale : 100 % ; marge : 0 ; rayon de bordure : 0 ; alignement vertical : ligne de base ; -webkit-box-sizing : bordure-boîte ; -moz-box -dimensionnement : border-box ; box-sizing : border-box ; ) zone de texte (débordement : auto ; alignement vertical : top ; ) entrée, zone de texte (arrière-plan : #6e6e6e ; arrière-plan : rgba(169,169,169,0.3); bordure : 1px solide #f4f4f4 ; couleur : #fff ; espacement des lettres : 1px ; transformation du texte : majuscule ; ) entrée : focus, zone de texte : focus ( contour : 0 ; ) bouton : survol : focus, entrée : survol (arrière-plan : #ff8721; couleur : #fff ; contour : 0 ; ) bouton d'entrée ( -webkit-apparence : bouton ; curseur : pointeur ; ) bouton d'entrée (arrière-plan : #ffab00 ; -webkit-transition : tous les .5 s ; -moz -transition : tous les .5 ; transition : tous les .5 ;

L'étape suivante consiste à créer un style multi-navigateur pour le champ de texte.

::-webkit-input-placeholder ( couleur : #fff; ) ::-moz-placeholder ( couleur : #fff ; opacité : 1 ; ) ::-ms-input-placeholder ( couleur : #fff ; opacité : 1 ; ) .placeholder ( couleur : #ff; )

Créons maintenant des styles pour notre comptoir. Je vous rappelle que dans un document html il se trouve dans un bloc div avec l'identifiant « compteur ».

#counter (marge en haut : 28 px ; ) .countdown_section ( couleur : #dadada ; affichage : bloc en ligne ; taille de la police : 12 px ; alignement du texte : centre ; largeur : 25 % ; espacement des lettres : 1 px ; bordure gauche : 1px en pointillés #dadada ; couleur de la bordure : rgba(218,218,218,0.8); remplissage : 42px 12px 28px ; -webkit-box-sizing : border-box ; shadow: 2px 2px 2px rgba(150,150,150,1); text-transform: majuscule; .countdown_section:first-child ( border-left : 0; ) .countdown_amount ( couleur : #fff ; affichage : bloc ; font-family : "Ouvrir Sans" ; taille de police : 60 px ; espacement des lettres : normal ;

Ajoutons maintenant des styles pour le formulaire de commentaires. La largeur maximale du formulaire sera de 610px et nous définirons le positionnement relatif de ce formulaire (position:relative). Plaçons le bouton pour envoyer un message à droite du bloc de texte et définissons son positionnement absolu (position:absolute).

#subscribe ( largeur maximale : 610px ; position : relative ; marge : 20px auto 0 ; ) #subscribe-form .form-field ( marge-droite : 180px ; ) #subcribe_email ( border-right : 0; ) #subscribe-form .form-submit ( hauteur : 50px ; position : absolue ; droite : 0 ; haut : 0 ; largeur : 180px ; ) #subcribe_email,#subscribe_submit ( largeur : 100 % ; affichage : bloc ; hauteur : 55px ; )

Et à la fin, nous ajouterons des propriétés pour les éléments du bloc de pied de page.

Pied de page ( taille de police : 13 px ; alignement du texte : centre ; marge supérieure : 25 px ; transformation du texte : majuscule ; ombre du texte : 2px 2px 2px rgba(150,150,150,1); ) pied de page a ( couleur : #fff; )

Pour rendre notre page réactive, nous ajouterons des requêtes multimédias. Vous pouvez en savoir plus sur cette propriété (anglais)

Écran @media uniquement et (largeur maximale : 720 px) ( footer(margin-bottom : 40px; ) ) Écran @media uniquement et (largeur maximale : 680px) ( .countdown_amount ( taille de police : 48px; ) ) @media uniquement écran et (largeur maximale : 540 px) ( .one-half (largeur : 100 % ; ) .countdown_section ( padding : 28px 6px 20px; ) #subcribe_email(border: 1px solid #fff;) #subscribe-form .form-submit ( marge : 0 auto ; droite : auto ; position : statique ; ) #subscribe-form .form-field ( marge : 0 0 14px ; ) ) @media uniquement écran et (largeur maximale : 480px) ( h1 ( taille de police : 30px; ) h2(taille de police: 25px;) .countdown_section ( bordure: aucune; remplissage: 20px 20px; taille de police: 13px; alignement du texte: centre; ) .countdown_amount ( taille de police: 40px; remplissage: 0 0 10px 0; ) #counter(width: 30%; margin:0 auto;) ) @media uniquement écran et (max-width: 360px) ( h2(font-size: 22px;).countdown_section ( padding: 21px 26px 21px 15px; ) .countdown_amount ( taille de police : 36px; ) )

Si vous vérifiez l'affichage de la page dans le navigateur, elle devrait ressembler à ceci :

JQuery

Veuillez noter que nous n'affichons pas de compteur. Pour le faire apparaître, vous devez ajouter le code suivant avant la balise body de fermeture. Mais avant cela, téléchargez le fichier du plugin en précisant le chemin d'accès au fichier.

Ajoutez ensuite le code suivant pour afficher notre compteur. Vous pouvez modifier la date sur le compteur selon vos souhaits. Il suffit de préciser la date souhaitée à l’intérieur du paramètre « launchdate ».

$(document).ready(function() ( var launchdate = new Date(2014, 6 - 1, 7); $("#counter").countdown(( jusqu'à: launchdate )); ))(jQuery);

Conclusion

Toutes nos félicitations! Vous venez de créer une page de compte à rebours sympa. Cette page vous permettra d'informer votre visiteur de la date de lancement de votre site et de ne pas le perdre.

J'espère que vous avez apprécié cette leçon. Laissez vos commentaires et questions, je serai toujours heureux d'y répondre.

Si vous envisagez de repenser votre site Web, d'y effectuer une maintenance de routine ou de lancer une nouvelle ressource Web, il est très important que les visiteurs ne soient pas accueillis avec une page blanche. Les personnes qui visitent le site se perdront dans les mystères de ce qui se passe, et ce n'est pas très bon. Il est préférable de prendre soin des utilisateurs et de les informer de l'ouverture ou de la reprise prochaine du site à l'aide d'une page HTML spéciale. Dans le langage courant, une telle page est appelée un « stub ». Son importance ne peut guère être surestimée, surtout si vous souhaitez parler de votre site et en faire un peu la promotion. Il existe deux types de stub : il s'agit soit d'une page statique qui indique aux utilisateurs les informations dont ils ont besoin, soit d'une page qui attise la curiosité et oblige le visiteur, par exemple, à s'abonner aux notifications. FreelanceToday vous propose 10 modèles HTML gratuits pour créer des espaces réservés attrayants pour vos sites Web.

Heartbeat est un modèle HTML simple et élégant. L’image d’arrière-plan monochrome et le compte à rebours rendent ce plugin idéal pour les sites Web professionnels.

Le modèle Moon est idéal pour les relations publiques de sites Web. Il y a plusieurs points sur la page où vous pouvez placer une information important et compte à rebours. La page est réactive, elle a été créée en HTML5 et CSS3, s'affiche dans la plupart des navigateurs et s'affiche bien sur appareils mobiles.

Layla est l'un des meilleurs modèles HTML gratuits pour créer un espace réservé élégant. Bonne palette de couleurs, maillage correct et élégant apparence rendent ce modèle idéal pour une utilisation sur les sites Web de mode.

Un excellent modèle multi-navigateurs pour créer un stub strict. Facile à personnaliser et à afficher correctement sur les appareils mobiles. Il y a un compte à rebours et la possibilité de connecter une mélodie.

Ce modèle est propre et Design moderne. Avantages : conception adaptative, formulaire de contact, compatibilité entre navigateurs. Le modèle a été créé à l'aide de ressources, toutes les images sont incluses.

Un bon espace réservé qui serait approprié sur les sites Web touristiques. Caractéristiques du modèle : 8 jeux de couleurs, validation W3C HTML/CSS, compte à rebours, formulaire de contact et possibilité de s'abonner aux notifications, effet parallaxe sur l'arrière-plan, barre de navigation.

Une prise qui a de sérieuses fonctionnalités. Le modèle est facile à personnaliser et compatible avec la plupart des navigateurs. Avantages : Google Maps, compte à rebours, section où vous pouvez publier des informations sur votre équipe, pied de page avec les coordonnées.

Le modèle UX convient à la plupart des sites Web. La prise dispose d'une minuterie animée, d'un formulaire de contact et d'icônes réseaux sociaux. Le modèle est facile à personnaliser et ne nécessite aucune connaissance particulière en HTML/CSS. Le modèle est réactif et multi-navigateur.

Prise élégante et en même temps fonctionnelle. Caractéristiques : design 100 % réactif, compatibilité entre navigateurs, Google Maps, intégration Twitter, deux styles d'en-tête avec effet parallaxe et curseur. Il existe également un compte à rebours qui vous permet de corriger rapidement la date de lancement du site.

Un modèle HTML élégant adapté aux sites Web sur divers sujets. La prise n'a pas de fonctionnalités particulières, mais elle a tout ce dont vous avez besoin : minuterie, centrale bloc de texte Pour message d'information, icônes de réseaux sociaux. Le modèle est réactif et s'affiche parfaitement sur les appareils mobiles.

Dernièrement, de nombreuses nouvelles ressources sont apparues sur Internet : certaines ont été lancées assez récemment, d'autres sont sur le point de démarrer, et certaines viennent de commencer à développer une boutique en ligne ou un autre projet et envisagent de le lancer dans six mois ou un an.

Est-il possible d’utiliser certains éléments marketing avant même la naissance du projet avec toutes ses fonctionnalités ? Indubitablement! L'une des premières étapes du marketing est la communication avec le visiteur d'un site qui ne fonctionne pas encore à l'aide de pages stub ou de pages dites de démarrage.

Peu de gens utilisent les pages Splash, leur présence sur le site donne donc un avantage et une impulsion précoce pour le développement. Cependant, toutes les prises ne fonctionneront pas de la même manière. Vous trouverez ci-dessous quelques conseils sur la façon de créer la bonne page de destination et de lancer un projet à l'avenir, en ayant déjà une audience potentielle.

Principes d'une page d'espace réservé efficace

Les espaces réservés sont essentiellement des pages de destination, et de nombreux principes de pages de destination efficaces s'y appliquent. Examinons de plus près les plus importants et regardons quelques exemples.

1. Connaître les limites de la simplification d'une page

D'une part, la page doit être aussi simple que possible. Mais ce serait une erreur de laisser uniquement un message indiquant que le site est en cours de développement.

Le visiteur se pose une question logique : où suis-je arrivé et pourquoi dois-je effectuer telle ou telle action qu'on me demande de faire (par exemple, contacter par téléphone). Ajoutez un peu plus d'informations à la page, la rendant aussi utile que possible pour le visiteur et pour vous.

2. Fournissez des informations sur vous-même

Montrez au visiteur qu’il est exactement là où il doit être. Dites-lui où il se trouve en utilisant un court texte et liste à puces. C’est la première fois que vous rencontrez une personne, par où commencez-vous habituellement ?

3. Vous pouvez faire une critique vidéo

Certains sites s’entraînent à publier des critiques vidéo. Ce bonne façon dites de plus en plus clairement comment vous pouvez être utile au visiteur.

Les critiques vidéo sont un bon outil, mais n’en faites pas trop. Ce serait une erreur d’ennuyer votre visiteur en activant automatiquement des effets vidéo ou audio, à moins bien sûr que votre futur site soit dédié aux jeux en ligne.

4. Utilisez un logo ou d'autres images associées à votre secteur d'activité

Les images que vous utilisez sur le site doivent être associées au domaine d'activité de l'entreprise ou au thème du projet. Les femmes et les chats sont formidables, mais pas toujours appropriés. Voici à quoi pourrait ressembler une page de talon pour un site Web de radio :

Et ici, la créativité du designer est bien affichée, même s’il n’est pas immédiatement clair si le site sera dédié au design.

5. Dites-nous à quoi vous attendre

C'est bien que vous existiez et que vous envisagez de vous rapprocher des internautes, mais dites-nous aussi pourquoi les gens devraient revenir sur votre site plus tard ? Quels sont vos projets pour le projet ou sa fonctionnalité ? Ou peut-être autre chose ?

Ajoutez de l'intrigue pour éveiller la curiosité. Par exemple, un message peut être utilisé pour intriguer selon lequel votre service constituera une avancée technologique ou que l'entreprise offrira des réductions ou des cadeaux aux premiers clients enregistrés. Des services supplémentaires. Vous trouverez ci-dessous un exemple de la façon dont les gars de Netpeak ont ​​créé l'intrigue avant d'organiser la conférence 8p, jouant au bout du monde tant discuté en 2012. Cette idée a semblé créative à beaucoup, et ils ont partagé le lien vers la page de stub avec leurs amis. sur les réseaux sociaux.

Vous n'êtes pas obligé de créer une intrigue, encouragez simplement la personne à revenir plus tard. Une page de destination doit non seulement informer le visiteur, mais également l'encourager à partager la page avec ses amis et à revenir dans le futur.

6. Laissez vos coordonnées

Selon le sujet du futur site, il convient parfois de laisser uniquement une adresse e-mail, dans d'autres cas - des informations plus détaillées, notamment l'adresse physique du bureau et ses horaires d'ouverture.

À l’avenir, vous devrez créer une communauté. Faites-le dès maintenant en utilisant des outils prêts à l'emploi : les réseaux sociaux. Outre le fait que la présence de ces liens augmentera la confiance dans l'entreprise et le futur site, les personnes faisant partie de votre communauté seront toujours au courant de l'actualité des étapes de développement ou de lancement de la ressource.

Cependant, ne Profils sociaux vides, remplissez-les de contenu utile afin que votre public cible ait quelque chose à quoi s'abonner. Les gens n'aiment pas et ne suivent pas les comptes à faible autorité, les comptes sans autorité ou les profils avec des avatars standards (comme un œuf sur Twitter).

8. Placez un formulaire d'abonnement pour les mises à jour

En plus d'utiliser les réseaux sociaux, connectez-vous aux newsletters par e-mail. Collecter adresses mail votre public potentiel maintenant. Vous pouvez leur envoyer un message uniquement au lancement du site, ou vous pouvez le faire régulièrement, en les informant du stade de développement ou d'autres points importants dans votre sujet et, bien sûr, utile pour les personnes qui vous font confiance. leurs contacts, aspects .

En plus du formulaire d'envoi d'e-mails, vous pouvez utiliser d'autres canaux de communication avec les clients/audience, par exemple un blog, en l'ajoutant à un sous-domaine ou un sous-dossier et en y installant WordPress standard. Peut-être que ce blog à l'avenir aura non seulement un impact positif en tant qu'outil d'inbound marketing, mais contribuera également à accroître l'autorité de la ressource aux yeux des moteurs de recherche.

9. Ajoutez un appel à l'action

Votre premier objectif est de créer une audience initiale et d’inciter les gens à revenir une fois le site en ligne. En appelant l'utilisateur à l'action, vous communiquez vos intentions et rappelez au visiteur ses options. « Abonnez-vous », « Regardez d'abord », « Revenez », « Contactez-nous », « En savoir plus sur nous », « Suivez-nous sur les réseaux sociaux », etc. Utilisez un ou plusieurs appels à l’action en fonction de la taille de la page de stub. Si vous écrivez simplement que le site est en construction, peu de vos visiteurs actuels y reviendront à l'avenir.

Dans l'exemple ci-dessous, l'appel à l'action se situe en haut à droite avec une flèche, et également en bas de la page, avec le formulaire d'abonnement aux notifications.

10. N'optimisez pas les pages de stub pour les moteurs de recherche

Bien entendu, les pages stub sont également utiles pour le référencement, puisque vous pouvez commencer à promouvoir un site sans même en avoir un. Au minimum, la ressource sera déjà dans l'index ; au maximum, vous pourrez déjà publier des liens vers elle aussi bien sur les forums ou sur les réseaux sociaux que dans la presse écrite.

Et bien que les pages de stub puissent être utilisées à des fins de référencement, elles servent davantage à des fins marketing. Il est fortement recommandé de ne pas gâcher la première impression d'une ressource avec du texte SEO.

J'espère que ces conseils vous aideront dès maintenant à remplir les spécifications techniques pour les programmeurs. Vous trouverez ci-dessous deux autres exemples de motivation. :)

Trouvez votre idée et créez une page de talon aujourd'hui, afin que lorsque vous lancez votre site, vous n'ayez pas à chercher une audience, mais continuez à travailler avec elle !

Un beau site Internet reste très longtemps dans la mémoire du visiteur, et c’est sans aucun doute merveilleux. Aujourd'hui, nous aimerions parler d'un merveilleux plug pour votre site, à savoir une page animée interactive qui sera constamment en mouvement, en plus de répondre au curseur de la souris et d'effectuer des actions. L'idée est de créer un terrain et un avion qui seront constamment en vol plané ; lorsque le curseur bouge, l'avion changera de position. Ce genre d'interactivité a l'air très cool et agréable.

SOURCES

Cette page peut être utilisée comme arrière-plan d’un site Web, comme page avec un petit message texte ou comme espace réservé sur une page dans tous les cas, vous ne pouvez pas vous tromper ; Cet effet est obtenu grâce à la bibliothèque 3D jQuery-Three.js.

Étape 1. HTML

Notre balisage et nos styles seront assez simples, puisque Three.js fera tout le travail, et les paramètres que nous avons spécifiés dans JS, tout ce que nous avons à faire est d'appeler ces fonctions en attribuant id="world" :

Les styles sont également assez simples, nous ne nous y attarderons donc pas et passerons directement à l’étape suivante.

Étape 2. JS

Tout le traitement des événements sera effectué par JS et Three.js. Pour implémenter une telle disposition, nous définissons les valeurs suivantes pour l'événement aléatoire en boucle.

Var Colors = ( rouge : 0xf25346, jaune : 0xedeb27, blanc : 0xd8d0d1, marron : 0x59332e, rose : 0xF5986E, marron foncé : 0x23190f, bleu : 0x68c3c0, vert : 0x458248, violet : 0x551A8B, vert clair : 65, ); var scène, caméra, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, moteur de rendu, conteneur ; function createScene() ( // Obtenez la largeur et la hauteur de l'écran // et utilisez-les pour ajuster // le rapport hauteur/largeur de la caméra et la taille du rendu. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Créer la scène. scene = new THREE .Scene(); // Ajoute un effet de brouillard à la scène. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Crée un aspectRatio = WIDTH / HEIGHT; 10000; camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Position de la caméra camera.position.x = 0; camera.position.z = 100; arrière-plan transparent, performances d'anti-aliasing alpha : true, antialias : true )); // définit la taille du rendu sur plein écran renderer.setSize(WIDTH, HEIGHT); // active le rendu des ombres ; / Ajoutez le moteur de rendu au DOM et aux événements DIV containers = document.getElementById("world"); conteneur.appendChild(renderer.domElement); //Réactivité window.addEventListener("resize", handleWindowResize, false); ) //Réactivité des fonctions fonction handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemisphereLight, ombreLumière ; function createLights() ( // Ciel lumineux dégradé de couleur, sol, intensité hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Rayons parallèles shadowLight = new THREE.DirectionalLight(0xffffff, .9); shadowLight.position. set(0, 350, 350); shadowLight.castShadow = true; // définit la zone visible de l'ombre projetée shadowLight.shadow.camera.left = -650; .shadow.camera.bottom = -650; shadowLight.shadow.camera.far = 1000; // Taille de la carte d'ombre shadowLight.shadow.mapSize.width = 2048; scène scene.add(hemisphereLight); scene.add(shadowLight); Land = function() ( var geom = new TROIS. CylindreGéométrie (600, 600, 1700, 40, 10) ; //rotation le long de l'axe x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //créer un matériau var mat = new THREE.MeshPhongMaterial(( color: Colors.lightgreen, shading: THREE.FlatShading, )); //crée un maillage de l'objet this.mesh = new THREE.Mesh(geom, mat); //recevoir les ombres this.mesh.receiveShadow = true; ) Orbite = fonction() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Sun = function() ( this.mesh = new THREE.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( couleur : Couleurs.jaune, ombrage : THREE.FlatShading, ) ); ; sun.receiveShadow = false; this.mesh.add(sun) Cloud = function() ( // Créer boite vide pour le cloud this.mesh = new THREE.Object3D(); // Géométrie du cube et matériau var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( couleur: Colors.white, )); var nBlocs = 3 + Math.floor(Math.random() * 3); pour (var je = 0; je

En conséquence, nous obtenons un merveilleux plugin de site avec réactivité et adaptabilité.