Scale Site Title on scroll

[Hans Pelle]

Hi

I it possible to scale the Site Tile on scroll?

This is the best example i have:
https://kurppahosk.com/work/dustin/

I would like to do sort of the same animation on the Site Title (VOLGA) on this site:
https://www.volga.nu/info

Best,
Hans

[Richard]

Dear Hans @Hans-Pelle

This is possible but you would have to add a little Custom CSS & jQuery in "Lay Options - Custom CSS & HTML"

The Text has its basic CSS properties but at a certain scroll point it gets a class added - in this case its a class called "stuck"

That Class has its own CSS: So when it gets becomes the class 'Stuck" it also gets new CSS along with it

Before the change its:

.sticky-title {
    vertical-align: text-top;
    transition: all 0.4s !important;
}

Then when the user scroll's CSS is added that overrides the original:

.stuck {
    position: fixed;
    left: calc(20% + .4rem);
    font-size: 1rem;
    z-index: 1;
}

So this is saying - fix the element to the top, calculate the elements position to left-hand of browser, change font-size etc

The ; transition: all 0.4s !important;

Is indeed important - it is what makes the smooth "transition" between the too states - without it, it would just flick from big to small instantly:
https://www.w3schools.com/css/css3_transitions.asp

Look into something like this:
https://stackoverflow.com/questions/12558311/add-remove-class-with-jquery-based-on-vertical-scroll

& remember when adding JS/jquery you need to wrap your code in a newpage event and change '$' to 'jQuery'
https://laytheme.com/documentation.html#custom-javascript

E.g

window.laytheme.on("newpageshown", function(layoutObj, type, obj){

// INSERT YOUR CODE HERE_____

});

Good Luck Hans -Google is out best friend!
Let me know how you go & thank you for using Lay Theme in 2021

Richard

[Hans Pelle]

Hi @Richard-K

Thank you for your answer. I'll try it out, thanks.

Best,
Hans

[Richard]

Dear @Hans-Pelle

Cool :)
Best of luck!

Richard