CSS3 Animation Transition On Page Scroll

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
protectourlands
 
 
Posts: 782
Joined: Sat May 24, 2008 2:16 am
Contact:

CSS3 Animation Transition On Page Scroll

Post by protectourlands » Tue Jan 23, 2018 3:45 pm

I have an image I want to sick top center of the page at all times. I have applied it as the background of a sticky layer > center top. I also set the Size property to 100% 100% because I need to be able to adjust the size of the image through the breakpoints. Perfect.

I also need the image to transform to .6 size on page scroll. I used CSS3 Transition > Scroll > Scale .6. Almost perfect - the problem is the layer shrinks to its center so it no longer stays at the top - Y:0. I can apply the difference to the translate Y of the transition settings and this moves it back to the absolute top while it is resizing - almost perfect, but the new problem is that the translate Y setting works for the default view but is too much for the narrower breakpoints where the object is smaller and requires less translate Y to get it back to top - Y:0. So the object locates -y and gets cut off.

Is there another transition I can apply to keep the object at Y:0 during transition scroll scale? Or another solution?

User avatar
Pablo
 
Posts: 20641
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CSS3 Animation Transition On Page Scroll

Post by Pablo » Tue Jan 23, 2018 4:24 pm

The only thing solution I can think of is using a different image object.
If you use the same image file then this will not have impact on the page weight.

User avatar
protectourlands
 
 
Posts: 782
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: CSS3 Animation Transition On Page Scroll

Post by protectourlands » Tue Jan 23, 2018 4:48 pm

Yes that will work. I'll just hide and clone in each breakpoint. Same image just a different layer id. Brilliant! Thank you Pablo!

User avatar
protectourlands
 
 
Posts: 782
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: CSS3 Animation Transition On Page Scroll

Post by protectourlands » Tue Jan 23, 2018 6:35 pm

Works great on its own page, but ran into a problem when applying it in a master objects. The transitions work fine on the host page but the sticky layer locates to the right of center instead of center and acts more like a relative position layer. I'm guessing some of the layer attributes are getting lost in using it in a master objects on another page? Is there a fix for this?

User avatar
Pablo
 
Posts: 20641
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CSS3 Animation Transition On Page Scroll

Post by Pablo » Tue Jan 23, 2018 6:51 pm

A sticky layer should be a direct child element of the page, otherwise it cannot be 'sticky'.

User avatar
protectourlands
 
 
Posts: 782
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: CSS3 Animation Transition On Page Scroll

Post by protectourlands » Tue Jan 23, 2018 7:15 pm

Makes sense. Thank you Pablo. I actually got it to work as a docking layer in the master objects instead. Just had to assign exact dimensions for each breakpoint in the Size option (390px 250px) etc. :D

Post Reply

Who is online

Users browsing this forum: No registered users and 13 guests