Overlay scroll effekt
I designet mitt i Figma hadde jeg laget en overlay scroll effekt. Jeg ville konvertere denne effekten til denne nettsiden i Squarespace. Jeg fant fort ut at dette ikke var et valgalternativ inne i nettsidebyggeren. Et kjapt søk på Youtube ga meg løsningen. Dette måtte gjøres med custom CSS.
Da jeg først la inn koden i Custom CSS ble overlay scolling effekten aktivert på alle sidene. Jeg ønsket kun å ha det på en side. Derfor måtte jeg finne ut hvordan jeg skulle få koden til å kun gjelde på siden jeg ønsket. Et nytt google søk viste meg at jeg da måtte finne ID-en til siden jeg ønsket det skulle gjelde. Jeg lastet da ned Squarespace ID finder i Crome extention.
Limte da inn page ID etterfulgt av koden for overlay scroll effect i Custom CSS. Det funker først ikke. Feilen var at jeg hadde # foran page ID istedet for punktum. Her ser man at en liten feil kan gi hodebry.
Her er koden for overlay scroll effekt, Kopier og bruk:
#page .page-section {position: sticky !important;
top: 0px !important;
}
/* This style will apply globally */
html {
scroll-behavior: smooth;
}
Ønsker du med skygge mellom scrollingen, bruk denne:
#page .page-section {position: sticky!important; top: 0px; box-shadow: 5px 5px 15px rgba(0,0,0,0.8)!important} html {scroll-behavior: smooth}
