Ciao a tutti.
Scrivo perchè non riesco a far si che le immagini che uso su un sito con effetto Parallax siano anche adattabili ai vari device....
Mi spiego meglio: da qualche mese ho iniziato a studiare le guide qui su html.it per quanto riguarda l'aspetto grafico di una pagina web (css - responsive - bootstrap - parallasse - ecc.....) poi ho deciso di realizzare finalmente la pagina che mi serviva, e ho deciso che la voglio col parallasse, ma le immagini (oltre che il testo ovviamente) le voglio ovviamente responsive.
Per fare questo ho deciso di partire da un template gratuito scaricato da Startbootstrap.com, il link del template se vi può interessare è questo: http://startbootstrap.com/template-overviews/grayscale/ Ormai il sito che ho cmq è ovviamente decisamente modificato sia nella parte grafica, che (per esigenze di parallasse) un poco anche nella struttura html.
La mia struttura html IN BREVE è la seguente:
<body>
<header>
<navbar></navbar>
</header>
<!-- SEZIONE 1 CON IMM BACKGROUND e TESTO "CHI SIAMO" -->
<section id="about-img" class="intro" data-stellar-background-ratio="0.5">
< CONTENUTO COMPOSTO DA IMMAGINE PRINCIPALE CHE FA DA SFONDO A TUTTO SCHERMO ...RICHIAMATA DAL MIO CSS >
<div class="intro-body">
<div class="container">
<div class="row">
< CAROUSEL POSIZIONATO SOPRA L'IMMAGINE DI SFONDO PRINCIPALE >
</div>
</div>
</div>
</section>
<section id="about-content" class="container content-section text-center" data-stellar-background-ratio="0.5">
< TESTO DEL CONTENUTO CHI SIAMO >
</section>
<!-- SEZIONE 2 CON IMM NOSTRI SERVIZI e TESTO "I NOSTRI SERVIZI" -->
<section id="service-img" class="content-section" data-stellar-background-ratio="0.5">
<IMMAGINE larga 1920px DELLA SEZIONE "NOSTRI SERVIZI" RICHIAMATA DAL CSS>
</section>
<section id="service-content" class="container content-section text-center" data-stellar-background-ratio="0.5">
< TESTO DEL CONTENUTO "SERVIZI" >
</section>
<!-- SEZIONE 3 CON IMM NOSTRI PRODOTTI e TESTO "I NOSTRI PRODOTTI" -->
<section id="template-img" class="content-section" data-stellar-background-ratio="0.5">
<IMMAGINE larga 1920px DELLA SEZIONE "NOSTRI PRODOTTI" RICHIAMATA DAL CSS>
</section>
<section id="template-content" class="container content-section text-center" data-stellar-background-ratio="0.5">
< TESTO DEL CONTENUTO "NOSTRI PRODOTTI" >
</section>
<!-- SEZIONE 4 CON IMM CONTATTACI e I FORM PER CONTATTARCI" -->
<section id="contact-img" class="content-section" data-stellar-background-ratio="0.5">
<IMMAGINE larga 1920px DELLA SEZIONE "CONTATTACI" RICHIAMATA DAL CSS>
</section>
<section id="contact-content" class="container content-section text-center" data-stellar-background-ratio="0.5">
< TESTO DEL CONTENUTO "CONTATTACI" >
</section>
e poi gli script, il <footer> ecc...
Come si evince, il codice JS usato per il parallasse è jquery.stellar.js.
Il mio problema sono le immagini, non so come renderle Responsive mantenendo questa impostazione del markup html (INDISPENSABILE PER IL PARALLASSE), perchè se volessi usare SANCHA.IO oppure PICTUREFILL dovrei cambiare la disposizione dei tag e inserire il tag <img> direttamente dal codice (invece io richiamo le immagini dal css..)
Inoltre anche provando a usare il tag <img> e impostando sul css le proprietà:
width: 100%;
max-widht: 100%;
riscontro 2 problemi:
1) il parallasse va a farsi benedire perchè cambia proprio la disposizione visiva dell'immagine
2) cmq l'immagine non viene ridotta al variare della risoluzione, cioè anche testandola su RESIZE per esempio su tablet non si rimpicciolisce ma se ne vede solo una parte.
L'unica soluzione che mi viene in mente è caricare versioni differenti delle immagini per le varie risoluzioni impostate nei miei vari breakpoint....
A parte che a dire anche il parallasse non funziona benissimo, ma magari basterà cambiare qualche impostazione...
per il resto.... SAPRESTE AIUTARMI A RENDERE RESPONSIVE LE IMMAGINI CHE USO PER IL PARALLASSE ??? ....Un pò come avviene su sito di spotify per esempio...
Spero di non avervi fatto confondere e di essere stato chiaro.
GRAZIE IN ANTICIPO A TUTTI
Rispondi quotando
Originariamente inviata da Fandango Visual
