Intersection Observer API di Javascript ci permette in sostanza di identificare quando un componente diventa visibile nella pagina ed effettuare un'operazione.
In questo articolo vediamo come usarla per animare i componente che vengono visualizzati nella pagina quando eseguiamo lo scroll.
Non c'è necessità di componenti esterni / plugin; ma solo di Javascript e CSS.
In questo articolo vediamo come fare in modo che un div segua il mouse usando Javascript.
Il codice dovrebbe funzionare anche per i device touch; come vedrete c'è una funzione apposita per fare questo controllo.
Infine, metteremo anche un pò di CSS.
Sto lavorando su un template basato su Bootstrap 5.
Per la maggior parte dei componenti ho una regola CSS custom.
Ma non sulla freccia dell'accordion, che continuava ad essere blu.
Con l'avvento di HTML 5, e con il miglioramento di Javascript stesso, è stato possibile fare molte cose senza l'uso di librerie esterne.
Una di queste è il drag and drop!
In questo articolo vediamo come impostarlo e come intercettare i vari eventi.
La proprietà CSS shape-outside ci permette di controllare come i contenuti vengo visualizzati attorno ad un elemento floated.
In pratica possiamo usarlo anche vicino alle immagini per visualizzarci vicino un testo.
Una cosa che prima richiedeva un pò di lavoro, adesso può essere fatto in poche righe.
Quello che vogliamo ottenere è un bordo gradient (quindi "sfumato" con diverse colorazioni) senza usare immagini o Javascript.
Ma solo usando CSS.