Sormontamento - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
CONTENT SLIDER
Simula un sormontamento sullo slider...

Lorem
Veniam

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.




Lorem
Laboris

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.




Strategy and
Prevention

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.




CONTENT SLIDER SORMONTAMENTO IMMAGINI
ADATTATO
Progetto FREE


In questo esempio creiamo un content slider e tre box con l'oggetto testo . Con un trucco possiamo simulare un sormonta-mento delle immagini box con quella del content slider.

Difficoltà:
  • Nulla per un utente avanzato
  • Media per un utente alle prime armi come smanettone
  • Alta per un neofita.

SEI PRONTO? OK! Segui le istruzioni passo passo.
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  ) Altrimenti devi regolare le impostazioni del codice.
  • ► SCARICA UN LAYOUT CON I BREAK-POINT GIÀ PREIMPOSTATI




  • CREA ORA LA TUA PAGINA TEST AL PASSO 3 MAPPA - NUOVA PAGINA
  • CREA UNA IMMAGINE E METTI ALLA BASE UN RETTANGOLO BIANCO CON UNO DEI PROGRAMMI DI GRAFICA ES. ADOBE PHOTOSHOP
  • PER FACILITARTI L'IMPRESA SCARICA L'IMMAGINE CON IL TASTO DX DEL TUO MOUSE E RIPRODUCI LA TUA CON LE STESSE DIMENSIONI DI LAVORO

  • METTI TUTTI I MARGINI A ZERO DEL TUO CONTENT SLIDER ED ESPANDI TUTTO COME NELL'IMMAGINE ▼



  • CREA TRE BOX  TIPO QUELLI DELL'ESEMPIO CHE VEDI E ALLINEALI SOTTO IL CONTENT SLIDER  
  • AGGANCIA TUTTO IN ESTENSIONE RIGA MASSIMA SOLO IN STILE RIGA

  • VAI ORA AL PASSO 3 - CREAZIONE DELLA PAGINA E REGOLA IL SETUP DEL CONTENT SLIDER COME DA IMMAGINE SEGUENTE ▼


  • IL tuo progetto dovrebbe presentarsi come da immagine seguente:▼

  • Come vedi l'immagine non viene inserita nell'oggetto ma viene pescata sulle opzioni a destra IMMAGINI

  • SALVA TUTTO.
  • Ora vai AL PASSO 3 e fai click su proprietà.

  • Aprite l'opzione ESPERTO e prima della chiusura del tag HEAD
  • inserite tutto il codice che segue:

ATTENZIONE: In neretto l'identificatore da cambiare (su tutto il codice) con il vostro ID oggetto tramite ispezione codice.
In verde il codice commentato






CODICE - PRIMA DELLA CHIUSURA DEL TAG HEAD

/* Blocca la barra inferiore *con break-point pari o superiori a 1380 */
<style>
    body {overflow-x:hidden}
</style>

<style>
/* Regola generale per il contenitore dello slider
Fusione del codice di Giancarlo Web, Giuseppe Guida e Max */
#imObjectContentSlider_9_08 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Immagini dello slider */
.content-slider.slide-image-content {
width: 100%;
height: auto;
object-fit: cover; /* Riempie senza deformarsi */
box-sizing: border-box;
}

/* Media Query */

/* Risoluzioni >= 1680px */
@media (min-width: 1680px) {
#imObjectContentSlider_9_08 {
min-height: 700px; /* Altezza standard per risoluzioni alte */
  }
.content-slider.slide-image-content {
object-fit: cover; /* Copre senza tagliare */
  }
.slide-title {
font-size: 28px; /* Font maggiore per risoluzioni grandi */
padding: 10px 20px;
  }
.slide-button {
font-size: 16px;
padding: 10px 20px;
  }
}

/* Da 1679,9px a 1379px */
@media (max-width: 1679.9px) and (min-width: 1380px) {
#imObjectContentSlider_9_08 {
min-height: 700px;
  }
.content-slider.slide-image-content {
object-fit: cover;
  }
.slide-title {
font-size: 24px;
  }
.slide-button {
font-size: 14px;
padding: 8px 16px;
  }
}

/* Da 1378,9px a 1280px */
@media (max-width: 1378.9px) and (min-width: 1280px) {
#imObjectContentSlider_9_08 {
min-height: 650px;
  }
.content-slider.slide-image-content {
object-fit: cover;
  }
.slide-title {
font-size: 22px;
  }
.slide-button {
font-size: 12px;
padding: 6px 14px;
  }
}

/* Da 1279,9px a 1149px */
@media (max-width: 1279.9px) and (min-width: 1150px) {
#imObjectContentSlider_9_08 {
min-height: 550px;
  }
.content-slider.slide-image-content {
object-fit: contain; /* Adatta senza tagliare */
  }
.slide-title {
font-size: 20px;
  }
.slide-button {
font-size: 11px;
padding: 5px 12px;
  }
}

/* Da 1148,9px a 960px */
@media (max-width: 1148.9px) and (min-width: 961px) {
#imObjectContentSlider_9_08 {
min-height: 450px;
  }
.content-slider.slide-image-content {
object-fit: contain;
  }
.slide-title {
font-size: 18px;
  }
.slide-button {
font-size: 10px;
padding: 4px 10px;
  }
}

/* Da 959,9px a 720px */
@media (max-width: 959.9px) and (min-width: 721px) {
#imObjectContentSlider_9_08 {
min-height: 300px;
  }
#imObjectContentSlider_9_08 > .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_9_08 {
min-height: 200px !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_9_08 {
min-height: 150px !important;
  }
#imObjectContentSlider_9_08 > .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_9_08 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
font-size: 12pt;
  }
#imObjectContentSlider_9_08 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
width: 40px;
height: 40px;
  }
}

/* End custom code */
</style>
  • SALVA TUTTO
  • NON ABBIAMO FINITO
  • ORA NEL SCENDERE DI RISOLUZIONE DEVI NASCONDERE I TRE BOX CHE IN PRATICA REGOLANO L'ALTEZZA DEL CONTENT SLIDER
  • CLICCARE SULL'ICONA ► E NASCONDI IL PRIMO AI 720PX, IL SECONDO AI 600 E LASCIA SOLO L'ULTIMO VISIBILE. Regola anche lo spostamento degli oggetti. Per nascondere i tre box alle risoluzioni che ti ho suggerito devi partire sempre dal primo break-point

  • PROVA IL COMPORTAMENTO DELL'OGGETTO ALLE VARIE RISOLUZIONI SU ANTEPRIMA BROWSER RIDUCENDO L'AMPIEZZA . Dato che trattasi di immagini puoi farlo anche da ANTEPRIMA senza aprire un browser dalle opzioni. Se qualcosa non vi quadra dovete agire sui parametri dello style nel codice di esempio.
PRO
  • Se uno è bravo in grafica si possono raggiungere adattamenti vicino o prossimo al responsive

CONTRO
  • Bisogna conoscere il programma in profondità
  • Bisogna avere nozioni avanzate in programmazione
  • Bisogna essere dei bravi grafici
  • Si perde parecchio tempo nel trovare una soluzione accettabile ma una volta trovata è un attimo creare un content slider con un giusto compromesso.
  • Nei Tablet da 800x600 px le immagini potrebbero risultare tagliate in verticale quindi sarà necessario mettere i tablet in orizzontale ma potrebbe anche non verificarsi il problema.
  • Il layout non prende in considerazione device sotto i 320px oramai considerati superati da nuove tecnologie.
COMMENTA ▼
Non sono presenti ancora recensioni.
5 
0
4 
0
3 
0
2 
0
1 
0

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti