Come creare una pagina stub. Lascia le tue informazioni di contatto

Uno stub è una pagina che viene inserita in un sito quando non è disponibile per un motivo o per l'altro. Ad esempio, quando stai finalizzando o modificando il design del sito e in questo momento non è disponibile o viene visualizzato in qualche modo in modo errato. Sarebbe opportuno creare in questo momento una pagina stub, sulla quale sarà scritto che il sito è in manutenzione.

Quindi iniziamo...

Creeremo un semplice segnaposto con un'immagine di sfondo e un testo in formato .

Creiamo una cartella sul computer in cui posizioneremo tutti i file necessari per il nostro stub.

In questa cartella creeremo un'altra cartella chiamata immagini. In esso posizioneremo la nostra immagine di sfondo ed, eventualmente, altre immagini che potrebbero essere necessarie durante il lavoro.

Apri il programma Notepad++ (o uno simile, ad esempio Blocco note). Noi creiamo nuovo documento. Successivamente - File - Salva con nome, seleziona la nostra cartella con lo stub e salva il documento con il nome index.html

Questo è ciò che ora dovrebbe essere nella nostra cartella:

Apri il file index.html nel nostro editor (dopo averlo salvato dovrebbe essere aperto). Ora dobbiamo assicurarci che la codifica di questo file sia impostata correttamente. Per fare ciò, vai alla voce di menu “Codifiche” e fai clic su “Converti in UTF-8″

Per non perdere accidentalmente il risultato ottenuto durante il lavoro, consiglio di salvare periodicamente il documento durante il lavoro. Questo può essere fatto nel menu "File" o con la scorciatoia da tastiera "Ctrl + S".

Scriviamo il seguente codice nell'editor:

Qualsiasi pagina web è composta da questi tag.

Ora aggiungiamo un titolo alla nostra pagina, perché non sarà molto carino quando qualcuno la apre e vede index.html nel titolo della scheda del browser (puoi aprire la pagina nel browser e vedere cosa succede). Per fare ciò, aggiungi il seguente codice tra e:

Il sito è in manutenzione

Immagine di sfondo

Ora selezioniamo un'immagine di sfondo per il nostro segnaposto e poi torniamo a modificare la pagina.

Per fare ciò, vai su Google Immagini e cerca un'immagine interessante che possa fungere da sfondo per la nostra pagina. È importante selezionare un'immagine con una larghezza di almeno 1920 pixel in modo che la nostra pagina abbia un bell'aspetto su schermi di grandi dimensioni. sono entrato barra di ricerca e scelse una delle foto.

Apri l'immagine a grandezza naturale e salvala nella cartella delle immagini. Quindi lo rinominiamo. Chiamiamolo bg (non dimenticare il formato dell'immagine, nel mio caso è jpg).

Ecco cosa ho raccolto. Questa è una foto della città di Chicago. Secondo me, è abbastanza adatto per l'immagine di sfondo del sito.

Alleghiamo un'immagine di sfondo alla pagina utilizzando gli stili CSS:

Il sito è in manutenzione

Il testo sarà composto da un titolo e, appunto, da un paragrafo di testo.

Il sito è in manutenzione

Ecco cosa è successo:

Ora aggiungeremo i nostri contatti in modo che i visitatori possano contattarci immediatamente e non aspettare fino al completamento dei lavori sul sito.

Aggiungiamo 3 blocchi contenenti il ​​telefono, E-mail e Skype.

Il sito è in manutenzione Il sito è in manutenzione, torna più tardi!

Il sito è attualmente in fase di opere di ingegneria. Ti invitiamo a tornare più tardi oppure a contattarci in uno dei seguenti modi:

Tel.: 333-33-33

E-mail: [e-mail protetta]

Skype: admsite_ru

Non resta che lavorare con gli stili.

Ingrandiamo il titolo, allineiamolo al centro e abbassiamolo più vicino al centro dello schermo.

Aumentiamo il carattere del paragrafo di testo a venti pixel e creiamo un piccolo rientro dall'intestazione. Realizzeremo anche un bordo in fondo al testo, che lo separerà dai contatti.

Creiamo blocchi con contatti in 3 colonne, aumentiamo il carattere, allineiamo ogni blocco al centro e cambiamo il colore del testo.

Il sito è in manutenzione Il sito è in manutenzione, torna più tardi!

Il sito è attualmente in fase di lavoro tecnico. Ti invitiamo a tornare più tardi oppure a contattarci in uno dei seguenti modi:

Tel.: 333-33-33

E-mail: [e-mail protetta]

Skype: admsite_ru

Di conseguenza, abbiamo una pagina segnaposto che possiamo utilizzare quando il sito è sottoposto a lavori tecnici.

Quando un sito è in attesa di lancio o è in fase di ristrutturazione, è necessario avvisare i visitatori del sito che sta per aprire. E la soluzione perfetta a questo problema è creare pagina di destinazione con opportuno preavviso.

Man mano che i moderni strumenti di sviluppo web si sono evoluti, pagine come queste si sono evolute da pagine semplici con il testo in soluzioni più interessanti.

La creazione di un segnaposto di questo tipo per il sito aumenta il livello di aspettativa dei visitatori, creando così interesse tra loro. Oltre alla semplice notifica, è anche possibile raccogliere informazioni sugli utenti interessati inserendo moduli di iscrizione e feedback.

In questo tutorial, creeremo proprio uno stub per un sito, che conterrà un modulo di iscrizione e un timer per il conto alla rovescia, implementato utilizzando un plugin jQuery di Keith Wood.

Materiali necessari per la lezione:

• Qualsiasi immagine di sfondo
• Tempo e pazienza.

index.html: file di progetto principale

Cartella “js” – cartella con script JavaScript/JQuery

cartella “img” - cartella con le immagini del progetto

Cartella “css” – cartella con i fogli di stile del progetto (file css)

Iniziamo

La prima fase di lavoro riguarderà la connessione al file html principale dei fogli di stile e delle librerie jquery.
Includiamo i file all'interno del tag head.

Prossimamente con Counter

HTML

Creiamo markup per il nostro documento html. Tutti gli elementi della pagina saranno all'interno di un tag div con l'identificatore “contenitore”. All'interno di questo blocco avremo intestazioni, un contatore, un modulo di feedback e un piè di pagina (il blocco inferiore con copyright).

Il nostro sito web sarà presto disponibile CI SCUSIAMO PER IL DISAGIO

DEVI ASPETTARE...

INVIAMI I DETTAGLI A RIGUARDO

Diritto d'autore - 1stwebdesigner.com - 2014

Nota che abbiamo lasciato vuoto il div con l'ID "contatore". Successivamente utilizzeremo questo identificatore per associarlo al nostro plugin jquery e aggiungervi stili CSS.

CSS

Ora creiamo un file css per il nostro progetto, che conterrà tutti gli stili. Innanzitutto aggiungiamo gli stili per gli elementi principali: body, h1, h2 e il blocco con identificatore “contenitore”. Per il blocco “contenitore”, specifichiamo la larghezza in percentuale in modo che cambi a seconda della dimensione della finestra del browser.

Per il tag h1, applica una trasformazione CSS3, che gli consentirà di ruotare di 360 gradi lungo l'asse X. Puoi leggere ulteriori informazioni su questa proprietà.

Corpo ( colore: #dadada; altezza linea: 1.75; larghezza: 100%; sfondo: url(../img/ background.jpg)centro; famiglia di caratteri: "Open Sans"; ) h1,h2( colore: # fff; altezza della riga: 1.16667; trasformazione del testo: maiuscolo; ombra del testo: 2px 2px 2px rgba(150,150,150,1) -peso: 700; bordo: 2px tratteggiato #fff; imbottitura: 10px; 8s facilità; : tutti .8s facilità; transizione: tutti .8s facilità; ) h1:hover ( -webkit-transform: ruotaX(360°); -moz-transform: ruotaX(360°); -ms-transform: ruotaX(360°) ; -o -transform: ruotaX(360deg); trasforma: ruotaX(360deg); ) h2 ( dimensione carattere: 30px; peso carattere: 300; margine superiore: 30px; ) .container ( larghezza: 58%; margine: 40px auto 0 ; ) .details ( margine superiore: 30px; colore: #fff; allineamento testo: centro; ombra testo: 2px 2px 2px rgba(150,150,150,1); )

Pulsante, input, area di testo (dimensione carattere: 16px; larghezza massima: 100%; margine: 0; raggio bordo: 0; allineamento verticale: linea di base; -webkit-box-dimensionamento: border-box; -moz-box -dimensionamento: border-box; box-dimensionamento: border-box; ) textarea ( overflow: auto; allineamento verticale: top; ) input, textarea ( background: #6e6e6e; background: rgba(169,169,169,0.3); border: 1px solido #f4f4f4; colore: #fff; spaziatura lettere: 1px; trasformazione testo: maiuscolo; ) input: focus, textarea: focus ( contorno: 0; ) pulsante: hover:focus,input:focus,input:hover ( sfondo : #ff8721; colore: #fff; contorno: 0; ) pulsante,input ( -webkit-aspetto: pulsante; cursore: puntatore; ) pulsante,input ( sfondo: #ffab00 ; -webkit-transizione: tutti .5s; -moz -transizione: tutti .5; transizione: tutti .5;

Il passaggio successivo consiste nel creare uno stile cross-browser per il campo di testo.

::-webkit-input-placeholder ( colore: #fff; ) ::-moz-placeholder ( colore: #fff; opacità: 1; ) ::-ms-input-placeholder ( colore: #fff; opacità: 1; ) .segnaposto ( colore: #ff; )

Ora creiamo stili per il nostro contatore. Ti ricordo che in un documento html si trova in un blocco div con l'identificatore “contatore”.

#counter (margine superiore: 28px;) .countdown_section (colore: #dadada; display: blocco in linea; dimensione carattere: 12px; allineamento testo: centro; larghezza: 25%; spaziatura lettere: 1px; bordo sinistro : 1px tratteggiato #dadada; colore del bordo: rgba(218,218,218,0.8); riempimento: 42px 12px 28px; shadow: 2px 2px 2px rgba(150,150,150,1); trasformazione del testo: maiuscolo; .countdown_section:first-child ( border-left: 0; ) .countdown_amount ( colore: #fff; display: block; font-family: "Apri Sans"; dimensione carattere: 60px; spaziatura tra lettere: normale;

Ora aggiungiamo gli stili per il modulo di feedback. La larghezza massima del modulo sarà 610px e imposteremo il posizionamento relativo per questo modulo (position:relative). Posizioniamo il pulsante per inviare un messaggio a destra del blocco di testo e impostiamo il suo posizionamento assoluto (position:absolute).

#subscribe (larghezza massima: 610px; posizione: relativa; margine: 20px auto 0;) #subscribe-form .form-field (margine-destro: 180px;) #subcribe_email (border-right: 0;) #subscribe-form .form-submit ( altezza: 50px; posizione: assoluta; destra: 0; superiore: 0; larghezza: 180px; ) #subcribe_email,#subscribe_submit ( larghezza: 100%; display: blocco; altezza: 55px; )

E alla fine aggiungeremo le proprietà per gli elementi del blocco footer.

Piè di pagina ( dimensione carattere: 13px; allineamento testo: centro; margine superiore: 25px; trasformazione testo: maiuscolo; ombra testo: 2px 2px 2px rgba(150,150,150,1); ) piè di pagina a ( colore: #fff; )

Per rendere la nostra pagina reattiva, aggiungeremo query multimediali. Puoi leggere di più su questa proprietà (inglese)

Schermo solo @media e (larghezza massima: 720px) ( footer(margin-bottom: 40px; ) ) Schermo solo @media e (larghezza massima: 680px) ( .countdown_amount ( dimensione carattere: 48px; ) ) Solo @media schermo e (larghezza massima: 540px) ( .one-half ( larghezza: 100%; ) .countdown_section (imbottitura: 28px 6px 20px; ) #subcribe_email(border: 1px solid #fff;) #subscribe-form .form-submit ( margine: 0 automatico; destra: automatico; posizione: statico; ) #subscribe-form .form-field ( margine: 0 0 14px; ) ) @media solo schermo e (larghezza massima: 480px) ( h1 ( dimensione carattere : 30px; ) h2(dimensione carattere: 25px;) .countdown_section ( bordo: nessuno; riempimento: 20px 20px; dimensione carattere: 13px; allineamento testo: centro; ) .countdown_amount ( dimensione carattere: 40px; riempimento: 0 0 10px 0; ) #counter(larghezza: 30%; margine:0 auto;) ) Schermo solo @media e (larghezza massima: 360px) (h2(dimensione carattere: 22px;).countdown_section (imbottitura: 21px 26px 21px 15px; ) .countdown_amount ( dimensione carattere: 36px; ) )

Se controlli la visualizzazione della pagina nel browser, dovrebbe apparire così:

JQuery

Tieni presente che non mostriamo un contatore. Per farlo apparire, è necessario aggiungere il seguente codice prima del tag body di chiusura. Ma prima, scarica il file del plugin, specificando il percorso del file.

Quindi aggiungi il seguente codice per visualizzare il nostro contatore. Puoi modificare la data sul contatore secondo i tuoi desideri. E' sufficiente specificare la data desiderata all'interno del parametro “launchdate”.

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

Conclusione

Congratulazioni! Hai appena creato una fantastica pagina per il conto alla rovescia. Questa pagina ti permetterà di informare il tuo visitatore sulla data di lancio del tuo sito e di non perderlo.

Spero che questa lezione ti sia piaciuta. Lasciate i vostri commenti e domande, sono sempre felice di rispondervi.

Se stai pianificando una riprogettazione del tuo sito web, eseguendo la manutenzione ordinaria o lanciando una nuova risorsa web, è molto importante che i visitatori non vengano accolti con una pagina vuota. Le persone che visitano il sito si perderanno nei misteri di ciò che sta accadendo, e questo non è molto positivo. È meglio prendersi cura degli utenti e informarli della prossima apertura o ripresa del sito utilizzando un'apposita pagina HTML. Nel linguaggio comune una pagina di questo tipo viene chiamata “stub”. La sua importanza difficilmente può essere sopravvalutata, soprattutto se vuoi parlare del tuo sito e promuoverlo un po’. Esistono due tipi di stub: o è una pagina statica che comunica agli utenti le informazioni di cui hanno bisogno, oppure una pagina che suscita curiosità e costringe il visitatore, ad esempio, a iscriversi alle notifiche. FreelanceToday porta alla tua attenzione 10 modelli HTML gratuiti per creare attraenti segnaposto per i tuoi siti web.

Heartbeat è un modello HTML semplice ed elegante. La netta immagine di sfondo monocromatica e il timer per il conto alla rovescia rendono questo plugin ideale per i siti Web aziendali.

Il modello Moon è ottimo per le PR del sito web. Ci sono diversi punti nella pagina in cui è possibile posizionare Informazioni importanti e timer per il conto alla rovescia. La pagina è reattiva, è stata creata utilizzando HTML5 e CSS3, viene visualizzata nella maggior parte dei browser e ha un bell'aspetto dispositivi mobili.

Layla è uno dei migliori modelli HTML gratuiti per creare un segnaposto elegante. Buona combinazione di colori, maglia corretta ed elegante aspetto rendono questo modello ideale per l'uso su siti Web di moda.

Un ottimo modello cross-browser per creare uno stub rigoroso. Facile da personalizzare e visualizzare bene sui dispositivi mobili. C'è un timer per il conto alla rovescia e la possibilità di collegare una melodia.

Questo modello è pulito e design moderno. Pro: design adattivo, modulo di contatto, compatibilità cross-browser. Il modello è stato creato utilizzando le risorse, tutte le immagini sono incluse.

Un buon segnaposto che sarebbe appropriato sui siti web turistici. Caratteristiche del modello: 8 combinazioni di colori, convalida W3C HTML/CSS, conto alla rovescia, modulo di contatto e possibilità di iscriversi alle notifiche, effetto parallasse sullo sfondo, barra di navigazione.

Una spina che ha funzionalità serie. Il modello è facile da personalizzare e compatibile con la maggior parte dei browser. Pro: Google Maps, conto alla rovescia, sezione in cui puoi pubblicare informazioni sulla tua squadra, piè di pagina con le informazioni di contatto.

Il modello UX è adatto alla maggior parte dei siti Web. La presa ha un timer animato, modulo di contatto, icone social networks. Il modello è facile da personalizzare e non richiede una conoscenza particolare di HTML/CSS. Il modello è reattivo e cross-browser.

Spina elegante e allo stesso tempo funzionale. Caratteristiche: design reattivo al 100%, compatibilità multibrowser, Google Maps, integrazione Twitter, due stili di intestazione con effetto parallasse e cursore. C'è anche un timer per il conto alla rovescia in cui puoi correggere rapidamente la data di lancio del sito.

Un elegante template HTML adatto a siti web di vari argomenti. La spina non ha campanelli e fischietti particolari, ma ha tutto ciò di cui hai bisogno: timer, centrale blocco di testo Per messaggio informativo, icone dei social network. Il modello è reattivo e viene visualizzato perfettamente sui dispositivi mobili.

Ultimamente, su Internet sono apparse molte nuove risorse: alcune sono state lanciate di recente, altre stanno per iniziare e alcune hanno appena iniziato a sviluppare un negozio online o un altro progetto e pensano di lanciarlo tra sei mesi o un anno.

È possibile utilizzare alcuni elementi di marketing ancor prima che nasca il progetto con tutte le sue funzionalità? Indubbiamente! Una delle prime fasi del marketing è la comunicazione con il visitatore di un sito non ancora funzionante utilizzando stub page o le cosiddette splash page.

Non molte persone utilizzano le pagine Splash, quindi la loro presenza sul sito offre un vantaggio e un primo impulso allo sviluppo. Tuttavia, non tutte le prese funzioneranno in modo altrettanto efficace. Di seguito sono riportati alcuni suggerimenti su come creare la giusta landing page e lanciare un progetto in futuro, avendo già un pubblico potenziale.

Principi di una pagina segnaposto efficace

I segnaposto sono essenzialmente pagine di destinazione e ad esse si applicano molti dei principi di pagine di destinazione efficaci. Diamo uno sguardo più da vicino a quelli più importanti e facciamo alcuni esempi.

1. Conoscere i limiti per semplificare una pagina

Da un lato, la pagina dovrebbe essere il più semplice possibile. Ma sarebbe un errore lasciare solo il messaggio che il sito è in fase di sviluppo.

Il visitatore ha una domanda logica: dove sono finito e perché devo eseguire questa o quell'azione che mi viene chiesto di fare (ad esempio contattare telefonicamente). Aggiungi qualche informazione in più alla pagina, rendendola il più utile possibile sia per il visitatore che per te.

2. Fornisci informazioni su di te

Mostra al visitatore che è esattamente dove deve essere. Digli dove sta usando un breve testo e elenco puntato. È la prima volta che incontri una persona, da dove inizi di solito?

3. Puoi fare una revisione video

Alcuni siti si esercitano a pubblicare recensioni video. Questo buon modo raccontare sempre più chiaramente come puoi essere utile al visitatore.

Le revisioni video sono un buon strumento, ma non esagerare. Sarebbe un errore infastidire il tuo visitatore attivando automaticamente effetti video o audio, a meno che, ovviamente, il tuo futuro sito non sia dedicato ai giochi online.

4. Utilizza un logo o altre immagini associate al tuo settore

Le immagini che utilizzi sul sito dovrebbero essere associate all'area di attività dell'azienda o all'argomento del progetto. Le donne e i gatti sono fantastici, ma non sempre appropriati. Ecco come potrebbe apparire una pagina stub per un sito web radiofonico:

E qui la creatività del designer dà ben mostra, anche se non è subito chiaro se il sito sarà dedicato al design.

5. Dicci cosa aspettarci

È positivo che tu esista e preveda di avvicinarti agli utenti di Internet, ma dicci anche perché le persone dovrebbero tornare sul tuo sito in seguito? Quali sono i tuoi piani per il progetto o la sua funzionalità? O forse qualcos'altro?

Aggiungi intrigo per suscitare curiosità. Ad esempio, un messaggio può essere utilizzato per intrigare che il tuo servizio rappresenterà una svolta tecnologica o che l'azienda fornirà sconti o omaggi ai primi clienti registrati. Servizi aggiuntivi. Di seguito è riportato un esempio di come i ragazzi di Netpeak hanno creato intrighi prima di organizzare la conferenza 8p, suonando alla tanto discussa fine del mondo nel 2012. Questa idea è sembrata creativa a molti e hanno condiviso il collegamento alla pagina stub con i loro amici sui social network.

Non devi creare intrighi, incoraggia semplicemente la persona a tornare più tardi. Una landing page non dovrebbe solo informare il visitatore, ma anche incoraggiarlo a condividere la pagina con i suoi amici e a ritornare in futuro.

6. Lascia le tue informazioni di contatto

A seconda dell'argomento del futuro sito, a volte è opportuno lasciare solo un indirizzo e-mail, in altri casi - informazioni più dettagliate, compreso l'indirizzo fisico dell'ufficio e i suoi orari di apertura.

In futuro dovrai creare una comunità. Fallo subito utilizzando strumenti già pronti: i social network. Oltre al fatto che la presenza di questi collegamenti aumenterà la fiducia nell'azienda e nel futuro sito, le persone incluse nella tua comunità saranno sempre a conoscenza delle novità sulle fasi di sviluppo o di lancio della risorsa.

Tuttavia, non farlo profili social vuoti, riempili con contenuti utili in modo che il tuo pubblico target abbia qualcosa a cui iscriversi. Le persone non apprezzano o non seguono account con autorità bassa, account con autorità zero o profili con avatar standard (come un uovo su Twitter).

8. Inserisci un modulo di iscrizione per gli aggiornamenti

Oltre a utilizzare i social network, collega le newsletter via email. Raccogliere indirizzi email il tuo potenziale pubblico ora. Puoi inviare loro un messaggio solo quando il sito viene lanciato, oppure puoi farlo regolarmente, informandoli in quale fase si trova lo sviluppo o qualche altro messaggio importante nel tuo argomento e, ovviamente, utile per quelle persone che si affidano a te i loro contatti, aspetti .

Oltre al modulo per l'invio di e-mail, puoi utilizzare altri canali di comunicazione con i clienti/pubblico, ad esempio un blog, aggiungendolo a un sottodominio o sottocartella e installando lì WordPress standard. Forse questo blog in futuro non solo avrà un impatto positivo come strumento di inbound marketing, ma aiuterà anche ad aumentare l'autorità della risorsa agli occhi dei motori di ricerca.

9. Aggiungi un invito all'azione

Il tuo primo obiettivo è creare un pubblico iniziale e convincere le persone a tornare una volta che il sito è attivo. Invitando l'utente all'azione, comunichi le tue intenzioni e ricordi al visitatore le sue opzioni. “Iscriviti”, “Guarda prima”, “Torna”, “Contattaci”, “Leggi di più su di noi”, “Seguici sui social network”, ecc. Utilizza uno o più inviti all'azione a seconda delle dimensioni della pagina stub. Se scrivi semplicemente che il sito è in costruzione, pochi dei tuoi attuali visitatori vi torneranno in futuro.

Nell'esempio seguente, la call to action si trova in alto a destra con una freccia, e sempre in fondo alla pagina, insieme al modulo di iscrizione alla notifica.

10. Non ottimizzare le pagine stub per i motori di ricerca

Naturalmente, le pagine stub sono utili anche per la SEO, poiché puoi iniziare a promuovere un sito senza nemmeno averne uno. Come minimo, la risorsa sarà già nell'indice, al massimo puoi già pubblicare collegamenti ad essa sia sui forum o sui social network, sia sulla carta stampata.

E sebbene le pagine stub possano essere utilizzate per la SEO, hanno più uno scopo di marketing. Si consiglia vivamente di non rovinare la prima impressione di una risorsa con testo SEO.

Spero che questi suggerimenti ti aiutino a compilare subito le specifiche tecniche per i programmatori. Di seguito sono riportati altri due esempi di motivazione. :)

Vieni con la tua idea e crea una pagina stub oggi, in modo che quando lanci il tuo sito, non devi cercare un pubblico, ma continuare a lavorarci!

Un bel sito web rimane nella memoria del visitatore per molto tempo, e questo è senza dubbio meraviglioso. Oggi vorremmo parlare di un meraviglioso plug-in per il tuo sito, ovvero una pagina animata interattiva che sarà costantemente in movimento, oltre a rispondere al cursore del mouse ed eseguire azioni. L'idea è quella di creare una terra e un aereo che planerà costantemente; quando il cursore si sposta, l'aereo cambierà posizione; Questo tipo di interattivo sembra molto interessante e piacevole.

FONTI

Questa pagina può essere utilizzata come sfondo di un sito web, una pagina con un piccolo messaggio di testo o un segnaposto su una pagina in ogni caso, non puoi sbagliare; Questo effetto è ottenuto grazie alla libreria 3D jQuery-Three.js.

Passaggio 1.HTML

Il nostro markup e i nostri stili saranno abbastanza semplici, poiché Three.js farà tutto il lavoro e i parametri che abbiamo specificato in JS, tutto ciò che dobbiamo fare è chiamare queste funzioni assegnando id="world":

Anche gli stili sono abbastanza semplici, quindi non ci soffermeremo su di essi e passeremo direttamente al passaggio successivo.

Passaggio 2.JS

Tutta l'elaborazione degli eventi verrà eseguita da JS e Three.js. Per implementare tale layout, impostiamo i seguenti valori per l'evento casuale in loop.

Var Colors = (rosso: 0xf25346, giallo: 0xedeb27, bianco: 0xd8d0d1, marrone: 0x59332e, rosa: 0xF5986E, marrone scuro: 0x23190f, blu: 0x68c3c0, verde: 0x458248, viola: 0x551A8B, verde chiaro: 65, ); var scena, fotocamera, fieldOfView, rapporto d'aspetto, NearPlane, farPlane, ALTEZZA, LARGHEZZA, renderer, contenitore; function createScene() ( // Ottieni la larghezza e l'altezza dello schermo // e usale per regolare le proporzioni // della telecamera e le dimensioni del renderer. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Crea la scena. scena = new THREE .Scene(); // Aggiungi un effetto nebbia alla scena. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); 10000; fotocamera = nuova THREE.PerspectiveCamera(fieldOfView,spectRatio, NearPlane, farPlane); // Posizione della fotocamera camera.position.x = 0; camera.position.z = 100; nuovo THREE.WebGLRenderer(( // Crea il sfondo trasparente, prestazioni antialias alpha: true, antialias: true )); // imposta la dimensione del renderer su schermo intero renderer.setSize(WIDTH, HEIGHT); il Renderer al DOM e agli eventi DIV = document.getElementById("world"); contenitore.appendChild(renderer.domElement); //Reattività window.addEventListener("resize", handleWindowResize, false); ) //Reattività delle funzioni function handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, ombraLuce; function createLights() ( // Colore gradiente di luce cielo, terra, intensità hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Raggi paralleli shadowLight = new THREE.DirectionalLight(0xffffff, .9); shadowLight.position. set(0, 350, 350); shadowLight.castShadow = true; // definisce l'area visibile dell'ombra proiettata shadowLight.shadow.camera.left = -650; shadowLight.camera.top; .shadow.camera.bottom = -650; shadowLight.shadow.camera.far = 1000; // Dimensione della mappa ombra shadowLight.shadow.mapSize.width = 2048; scena scena.add(emisferoLuce); scena.add(ombraLuce); Terra = funzione() ( var geom = nuovo TRE. GeometriaCilindro(600, 600, 1700, 40, 10); //rotazione lungo l'asse x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //crea un materiale var mat = new THREE.MeshPhongMaterial(( color: Colors.lightgreen, shading: THREE.FlatShading, )); //crea una mesh dell'oggetto this.mesh = new THREE.Mesh(geom, mat); //ricevi ombre this.mesh.receiveShadow = true; ) Orbita = funzione() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Sole = function() ( this.mesh = new THREE.Object3D( var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( colore: Colors.giallo, ombreggiatura: THREE.FlatShading, )); ; sun.receiveShadow = false; this.mesh.add(sun) Cloud = function() ( // Crea contenitore vuoto per il cloud this.mesh = new THREE.Object3D(); // Geometria e materiale del cubo var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math.random() * 3); per (var i = 0; i

Di conseguenza, otteniamo un meraviglioso plug-in del sito con reattività e adattabilità.