Effetto parallasse 
Auteur : Remo D.
Visité 514,
Followers 2,
Partagé 0
Buongiorno KolaSim
ho impostato le immagini di sfondo come da te suggerito e funziona bene, senza riduzione delle stesse, purtroppo in stile righe se attivo effetto parallasse la riduzione automatica immagini non funziona.
Grazie
Posté le
In attesa di KolAsim, purtroppo lo stile righe con il parallasse è di contorno alla pagina del sito con uno sfondo che faccia risaltare testi ed oggetti non per mostrare galleria di immagini, ora non so bene quale sia la tua necessità
... scusami Remo, se puoi postare il LINK della pagina o quella di esempio, per poter valutare...
... in teoria non dovresti incontrare problemi...
.
ciao
.
Auteur
Ciao KolaSim
Penso di aver impostato bene secondo tue istruzioni, perchè quando vedo da browser tutto a posto. Il problema è quando inserisco da stile riga la funzione parallasse che le immagini tornano alla vecchia visualizzazione.
questo è il link:
https://www.prolocomontefaito.it/home-page---copia.html
grazie
.. bravo, ... hai interpretato correttamente...
, ...hai comunque dimostrato l'inciso che per questo tipo di esempio trattato qui per l'aspetto Responsive-Razionale non servono codici EXTRA...
... ma mi viene un dubbio, ... forse non hai esteso il PNG a tutta larghezza della riga come avevo suggerito, ripeto forse!...
... adesso ho finalmente un nuovo PC, e dalla prossima settimana potrò sicuramente sperimentare da solo le mie invenzioni, senza dubbi...
... con il tuo esempio, e ti ringrazio
... per il secondo caso per quanto riguarda il parallasse vero (non fisso), quello che scrolla a velocità differente dallo scroll della pagina, devi considerare che l'immagine deve assumere dimensioni verticali superiori a quelle della luce della finestra in cui deve scorrere, perchè ovviamente se fosse delle stesse misure della finestra scrollerebbe il bianco al suo fondo; ... son cose logiche che bisogna conoscere e saper valutare ed interpretare...
... sulla base di questo, per poter io fare qualche valutazione adesso, devo poter vederne un esempio fatto in questo senso, con stessa precedente struttura, cella unica estesa a tutta larghezza e contenente il solo PNG trasparente...
...
... nel caso ci risentiremo...
.
ciao
.
Auteur
ti confermo Il png è esteso a tutta la riga. Le immagini caricate sono tutte di dimesioni uguali 800x450 compreso il png. A presto
Remo
.... forse non è stata attivata qualche opzione del PNG...
... il PNG in finestra sopa 1200px non si estende...
.
ciao
.
... occhio al logo in alto a sinistra, copre il menu in quella zona, ... e la Sticky Bar mi sembra troppo estesa verticalmente...
.
Questa immagine non si estenderà mai con quelle misure.
NOTE: L'impostazione del parallasse in questo contesto e con questa configurazione farà si che le immagini si distorceranno. Se cerchi questa soluzione non tenere in considerazione questo suggerimento.
@Remo. Se ti interessa invece propio un parallasse responsive fino a risoluzioni 960px fammelo sapere che ti do il link con esempio e codice da inserire.
Auteur
Si mi interessa Grazie. Già è tanto quello che ho realizzato con i vs consigli però inserire il parallasse è visivamente un salto in più.
Prima di smanettare sul sito Smanettoni di software Incomedia (R)
dai una occhiata ai PRO e CONTRO. Spesso ci si dimentica di questo. Sui cellulari e tablet l'effetto è inibito come da prassi.
ESEMPIO DIRETTO
Auteur
Tra le tante soluzioni da Voi proposte ho trovato, rinunciando al parallasse, una soluzione, a mio parere, soddisfacente come da link indicato. Unica cosa se esiste un modo per allargare in altezza la fascia. Grazie
https://www.prolocomontefaito.it/
... sulla base ti quel che ti avevo detto e sulla struttura attuale, esisterebbe e si potrebbe adattare una mia esclusiva invenzione per il Content Slider, (a parte de soliti comuni CSS passo-passo che puoi far da te)....
... il tuo Content Slider non è esteso a tutta larghezza e contiene altri oggetti non posizionati in modo adatto per lo scopo, ma pare non disturbino troppo il layout...
... stando le cose come stanno adesso e senza strafare, con il mio codice EXTRA si potrebbe:
1) - rendere razionale (W/H), nel tuo caso in (16:9), la finestra del Content Slider, all'interno del gioco dei breakpoint che hai impostato, (e quindi non a tutta larghezza che non hai adottato)...
2) - con una mia variante, estendere il Content Slider a tutta larghezza, mantenendo sempre il rapporto razionale (W/H) (16:9) in modo elastico;
3) - con Content Slider esteso da programma a tutta larghezza si potrebbe ottenere lo stesso rapporto razionale elastico come da precedente punto 2);
... a lavorar con criterio, la riga dovrebbe contenere il solo Content Slider...
… quindi, ...se ti interessa procedere in modalità Esperto/EXTRA e comnosci bene il Programma, , ...avvisami, … e io ritornerò qui...
.
Io proprio non ci arrivo (forse a causa dell'età) ma il suggerimento di Kolasim con l'immagine trasparente e poi immagini in sequenza era perfetto. Io avevo suggerito la stessa cosa ma con una immagine più grande. SE lo fai in content slider ci vuole del codice per il responsive o prossimo. Per l'oggetto immagine devi cercare l'immagine con le dimensioni superiori ai 1920 o 1920 ma potrebbe sgranare sulle TV smart. L'oggetto immagine è al 100x100 responsive e si può utilizzare in tanti modi senza alcun inserimento di codice extra.
Le misure se le prende da solo. Non devi fare NULLA se non mettere i margini esterni ed interni a zero e scegliere le immagini giuste. Se pretendi che una immagine da 500x500 si possa vedere su schermi da 32 sei in contromano.
Smanetta ▼
IMMAGINI IN SEQUENZA A TEMPO CON IMMAGINE TRASPARENTE NELL'OGGETTO (Stesso suggerimento di Kolasim)
STESSA PROCEDURA PER UN OGGETTO TESTO
PROCEDURA SU SFONDO RIGA CON IMMAGINI TESTI E SLOGAN
INSERIMENTO IMMAGINE CON OGGETTO SWIPER GRID
NESSUN CODICE DA INSERIRE MA EVITA IL PARALLASSE Tanto sui tablet e cellulari non vedrai mai questo effetto viste le implicazioni che da.
Manca la fantasia per il resto Kolasim ti aveva indicato la strada giusta solo che personalmente io le immagini le faccio più grandi e le ottimizzo.
Auteur
ciao Kolasim
mi puoi dare la modalità esperto/extra. Grazie
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContentSlider[269053] by KolAsim --- **/
ritardoK = 2; // secondi di ritardo;
wK = 16; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 9; // altezza immagine (valore pixel (o rapporto razionale H));
StyleContenSliderK = '<style>#imCell_117,#imCell_117 div,#imCell_114,#imCell_115{'+
'width:100% !important;grid-column:1/100 !important;}</style>';
$("head").append(StyleContenSliderK);
setTimeout(function(){ridimensionaK();}, ritardoK * 1000); //K1> | K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//K2 > | <<
//---------------f K3-----------------------------
function ridimensionaK() {//K3>;
setTimeout(function(){ //K4>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;CShK=hK*ratio;
$("#imCell_117, #imCell_117 div").css('max-height', CShK);
}, 1000); //K4<<;
} //K3<<;
</script>
.
ciao
.
... se ti servissero chiarimenti, ...avvisami ...
.
... il codice lo applichi in un secondo, senza nessuna difficoltà, ed è subito attivo...
... lo devi incollare nelle Proprietà di quella Pagina | sezione Esperto, cioè esattamente in questa sezione:
>> Passo 3 - Mappa > Finestra 'Proprietà Pagina' > Le opzioni della Sezione Esperto >
▪Codice personalizzato: > 3^ opzione > Prima della chiusura del tag HEAD
.
ciao
.
Auteur
Ciao Kolasim.
Ho inserito il codice ma devo aver sbagliato qualcosa. vedi il link
https://www.prolocomontefaito.it/
... ho controllato adesso, ... hai inserito correttamente il mio codice, e ho visto che funziona...
...
... eventualmente in rete aziona Ctrl+F5 per refreschare la cache...
.
ciao
.
Auteur
in modalità visualizzazione desktop all'apertura della pagina appare,prima, una fascia piccola e successivamente grande come da tuo codice. Inoltre ti chiedo se si può ridurre i89n grandezza la nuova visualizzazione mi sembra troppo impattante sempre in modalità desktop.
Grazie
... è perchè appare prima la visione per default della tua pagina, e poi dopo due secondi il mio codice fa il calcolo. ma lo scatto non da fastidio...
... comunque, all'inizio del codice c'è una variabile:
ritardoK = 2; // secondi di ritardo;
... nr. secondi da valutare sulla latenza della pagina...
... prova ad impostare a zero (0), così:
ritardoK = 0; // secondi di ritardo;
... attenzione, ... non toccare o alterare altri controlli o valori nel codice al di fuori dei valori del ritardoK e delle misure wK ed hK...
.
... la logica vorrebbe che le immagini siano congrue allo scopo...
... ma puoi benissimo usare formati panoramici diversi pur con le stesse immagini, per esempio (2:1), o più sottile (5:2), o ancor più sottile (3:1), ...o in definitiva quello che ti piace di più, basta che ragioni con criterio logico...
... mantenendo le stesse attuali tue immagini in (16:9) e modificando il rapporto nel mio codice, di conseguenza le immagini non saranno più incorniciate in cornice razionale, ma assumeranno l'aspetto razionale-responsive in modalità CSS-COVER, cioè si vedranno solo le parti dell'immagine centrata e non eccedenti alla cornice dinamica calcolata nel mio codice...
... puoi capire rivendendo gli esempi che ti avevo già postato in questo mio > Post...
.
... ... ... ... quindi, sulla base di quanto appena detto, puoi benissimo subito provare l'aspetto con un rapporto diverso per esempio in rapporto (2:1), modificando il valore sulle due variabili iniziali wK e hK, in questo modo:
wK = 2; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 1; // altezza immagine (valore pixel (o rapporto razionale H));
... se non vuoi usare i rapporti razionali, come indicato nei commenti puoi usare il valore puro dei pixel delle stesse immagini per avere finestre razionali con queste...
... per esempio, per immagini in (16:9) del tipo con questi valori si può usare questa forma:
wK = 1200; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 675; // altezza immagine (valore pixel (o rapporto razionale H));
... attenzione, ... non toccare o alterare altri controlli o valori nel codice al di fuori dei valori del ritardoK e delle misure wK ed hK...
... fermo restando che il codice è stato adattato alla struttura della tua pagina attuale...
.
ciao
.
......Aggiungo: Dipende dai punti di vista.
Sembra evidente che l'attenzione si sia concentrata solo su un approccio specifico... Ma dato che le immagini non richiedono testi, sarebbe stato sufficiente utilizzare un oggetto immagine con all'interno una classica immagine in formato PNG con trasparenza alfa, margini interni ed esterni a zero, e lasciare che le immagini venissero caricate in sequenza tramite le opzioni colore-immagini. Regolando il rapporto come da te suggerito in uno degli ultimi post, il risultato sarebbe stato comunque funzionale e, a mio parere, più semplice da implementare.
Ovviamente, 'cotto e mangiato' nessuno te lo fornisce: è essenziale che le immagini siano preparate correttamente, almeno rispettando una larghezza coerente con il rapporto 16:9 o di quello che lui troverà come compromesso. Ho osservato l'esempio e, francamente, trovo che la visualizzazione sia eccessivamente grande, ma riconosco che si tratta di una mia opinione personale. In ogni caso, il ridimensionamento è perfetto, su questo punto non si discute. Poi, che le cose si possano affinare e migliorare ulteriormente, lo sappiamo entrambi."
... qui sarebbe un altro discorso, e con criterio si potrebbero usare anche i testi di questo stesso oggetto; ...strade ce ne sarebbero diverse a secondo degli approcci, ...oltre a quello basilare storico (2012) che avevo chiamato "L'uovo di Colombo"...
...
.
Nel 2012 non sapevo neanche che esisteva incomedia
.