UNA BARRA DI PROGRESSO
PER IL TUO SITO WEB
Progetto FREE
PRO
DIFFICOLTA' MEDIAMENTE MINIMA SE SI UTILIZANO I BREAK-POINT DEL PROGETTO
RESPONSIVE 100%
CONTRO
CODICE EXTRA DA INSERIRE.
RICHIEDE UN UTENTE AVANZATO NEI CASI IN CUI SI SCELGANO ALTRE CONFIGURAZIONI DI BREAK-POINT.
PIANIFICAZIONE DEL PROGETTO:
Questo esempio si regge come dicevo sopra su un layout pre-impostato per cui se intendi servirti delle mie istruzioni devi avere una impostazione dei break-point come da immagine seguente:
PREPARAZIONE DEI BREAK POINT:
- VAI AL PASSO 2 - MODELLO - ICONA RESPONSIVE DESIGN.
- Realizza una struttura come nell'immagine seguente (devi avere una versione X5PRO per farlo)
- (
OBBLIGATORIA SE VUOI SFRUTTARE QUESTO ESEMPIO ) ►►► SCARICA LA VERSIONE DEL MODELLO LAYOUT CON INCLUSI GIÀ I BREAK-POINT
Bene. Ora che hai impostato i break-point che ti ho suggerito crea la tua pagina per iniziare il progetto.
MATERIALE ED OGGETTI OCCORRENTI
- 2 IMMAGINI A PIACERE CHE DOVRAI VALUTARE DI CARICARE NELLA SIMULAZIONE DEL RESPONSIVE.
- SE VUOI FARE UNA PROVA CON LE IMMAGINI DELL'ESEMPIO SCARICALE SUL TUO PC CON IL TASTO DESTRO.
- UN OGGETTO CONTENT SLIDER
- UN OGGETTO HTML
FASE 1▼
Prendi un oggetto content slider 
e inseriscilo nel progetto - IMPOSTA NELLE SUE OPZIONI UNA ALTEZZA DI 600PX
e inseriscilo nel progetto - IMPOSTA NELLE SUE OPZIONI UNA ALTEZZA DI 600PXestendi ↔ l'oggetto per tutta la riga sia in progetto che in stile riga
imposta i margini dell'oggetto, sia interni che esterni, tutti a zero come da immagine indicativa
- carica le tue immagini o quelle che ti ho messo a disposizione
- Imposta un owerlay di sfondo per le due immagini da 40% su stile riga
- Inserisci un titolo da 72px e uno slogan da 14px. Aggiungi infine il pulsante CONTATTI da 12px che dovrà puntare alla tua vera pagina contatti.
- Tutti gli elementi devo essere centrati quindi non a sinistra ne a destra.
- Scegli i pulsanti di avanzamento delle immagini
- flagga "ATTIVA AUTOMATICAMENTE" e imposta un tempo di intercambio immagine sui 3 secondi.
- Scegli ora tra le opzioni dell'oggetto come impostare la transizione su fade e paralax color o altro. La scelta è solo la tua a seconda dei gusti personali.
- Vai al passo 3 - Mappa - e seleziona la pagina del tuo progetto con un click poi vai su proprietà e fai doppio click
- Ti si aprirà un pannello avanzato per l'inserimento del codice.
- Inserisci PRIMA DELLA CHIUSURA DEL TAG HEAD il codice seguente: Ti ho lasciato in nero l'identificatore da cambiare su tutto il codice con quello della tua pagina.
- Questo identificatore lo trovi aprendo il browser CHROME facendo ispezione codice con il tasto destro del mouse su un punto del content slider.
CODICE DA INSERIRE PRIMA DELLA CHIUSURA DEL TAG HEAD ▼
<style> body {overflow-x:hidden} </style> <style> /* Custom code by Max */ /* Da 959,9px a 720px */ @media (max-width: 959.9px) and (min-width: 721px) { #imObjectContentSlider_26_01 { min-height: 300px; } #imObjectContentSlider_26_01 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title { font-size: 30pt !important; } } /* Da 800px a 600px */ @media (max-width: 800px) and (min-width: 600px) { #imObjectContentSlider_26_01 { min-height: 240px !important; } .slide-title { font-size: 14px !important; } .slide-description { font-size: 10px; } } /* Da 719,9px a 200px */ @media (max-width: 719.9px) and (min-width: 200px) { #imObjectContentSlider_26_01 { min-height: 250px !important; } #imObjectContentSlider_26_01 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title { font-size: 22pt !important; } #imObjectContentSlider_26_01 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button { font-size: 12pt; } #imObjectContentSlider_26_01 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn { width: 40px; height: 40px; } } /* End custom code */ </style> |
Ok hai completato il settaggio del content slider.
Ora dobbiamo inserire la barra progress che simula l'avanzamento delle immagini. Come fare? Molto semplice. Segui lo steep successivo.
INSERIMENTO PROGRESS BAR
- Prendi un oggetto HTML
e mettilo di seguito sotto il content slider . - I due oggetti NON vanno.... ripeto....... NON VANNO agganciati tra loro
- In fase di progetto clicca due volte all'interno dell'oggetto HTML
- Ti si aprirà la consolle per l'inserimento del codice che simulerà la barra.
- Inserisci tutto il codice che segue nella parte CODICE HTML
<div class="container"> <div class="progress"> <div class="progress-bar-red"></div> </div> </div> |
Poi passa su ESPERTO dell'oggetto HTML e completa l'inserimento di quest'altro codice:▼
/*=== progressBar CSS By Max ===*/ .progress { background-color: rgb(229,233,235); height: 0.25em; position: relative; width: 100%; } .progress-bar-red { background-size: 23em 0.25em; height: 100%; position: relative; background-color: #e04542; animation: cssload-width 6s cubic-bezier(0.45, 0, 1, 1) infinite; -o-animation: cssload-width 6s cubic-bezier(0.45, 0, 1, 1) infinite; -ms-animation: cssload-width 6s cubic-bezier(0.45, 0, 1, 1) infinite; -webkit-animation: cssload-width 6s cubic-bezier(0.45, 0, 1, 1) infinite; -moz-animation: cssload-width 6s cubic-bezier(0.45, 0, 1, 1) infinite; } @keyframes cssload-width { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } } |
Ok. Se quasi alla fine. Non ti rimane che provare il risultato che dovrebbe essere identico a quello che vedi in questa pagina come esempio.
COMMENTA ▼
Non sono presenti ancora recensioni.