Wix Header Change on Scroll - Floating, Shrinking, Scrolling, Animated
This video is new-coder-friendly. If you have NEVER tried Wix Code before, you can start with this video! You will learn the Wix header change on scroll to create a floating, shrinking, scrolling and animated effect.
[ WARNING: WIX REPORTED ERRORS ON THE VIEWPORTIN EVENT IN THE PROPERTIES PANEL ON ALL LIVE WEBSITES. READ OUR TUTORIAL ARTICLE TO LEARN HOW TO FIX THIS.]
Last year the Code Queen released the first Shrinking header video. Wix said it was one of those 'I guess you were lucky' kind of moments because the video was based off of pinning an Anchor to the Header in order to trigger the animation to work. Wix said this was not possible (yet it was captured on video, and still works on her site today)! Some viewers attempted to code the header this way and it worked for only a few people, forcing them to copy & paste an Anchor onto hundreds of pages. Such inefficiency!
Now the Code Queen is going to show you how to accomplish 4 different types of custom header using Wix Code without pinning any Anchor to each Header page.
You will learn how to create a Floating header, where a header starts at the bottom of the page and 'stops' at the top of the page to give it the effect that it was floating.
You will learn how to create an animated header, where the header seems to change colors from light to dark upon scrolling.
You will learn how to create a shrinking header, where the header changes from big to small when a person scrolls down the page.
Some of these headers are also called scrolling header or disappearing header.
Pull up your Wix editor and click on the tutorial links below to access the code to get started!
These are the links you will need to follow the Code Queen video:
Link to Tutorial Sites:
Floating Header - https://codequeen.wixsite.com/floatin...
Shrinking Header - https://codequeen.wixsite.com/new-shr...
Animated Header - https://codequeen.wixsite.com/animate...
Link to Wix API reference codes:
https://www.wix.com/code/reference/wi...
https://www.wix.com/code/reference/$w...
----------------------------------------
Remember to join the Facebook group to participate in Facebook Live Q&A's with the Code Queen!
Join: www.facebook.com/groups/wixcode
Website: www.totallycodable.com
Designers: www.totallycodable.com/forum/featured-designers
Coders: www.totallycodable.com/forum/featured-coders
Code Snippets: https://www.totallycodable.com/forum/...
Contact Code Queen: www.mycodequeen.com
Follow me in Wix Code Forum: https://www.wix.com/code/home/members...
--------------------
Totally Codable Logo by: https://www.mattlowedesign.co.uk
Code Queen logo by: https://www.wix.com/arena/wix-expert/...
Video Intro by: Code Queen
Watch video Wix Header Change on Scroll - Floating, Shrinking, Scrolling, Animated online without registration, duration hours minute second in high quality. This video was added by user Code Queen 03 August 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 41,225 once and liked it 432 people.