Advertising for home services, such as lawn care, home cleaning, and garden maintenance, isn’t as simple as tossing up an […]
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.
Posted
6 years ago on May 24th, 2020. Last modified on May 26th, 2020
Related To:
How applicant tracking systems are revolutionizing remote recruitment
Gone are the days of traditional recruitment. Applicant tracking systems have been revolutionizing how we hire, and their impact is here to stay. But how is the change happening? Tap to learn more about it.
Check out the New AI Features in FlexClip 5.0
In today's digital era, the importance of video content cannot be overstated. Videos have become an integral part of various […]
Effective Cleaning Tips for Maintaining a Clean and Healthy Home
We’ll explore some practical tips and tricks that will help you establish an effective cleaning routine. You might not realize […]
The Art of Visual Storytelling
How to use visual elements to tell a story Let's start with an interesting fact that will amaze you. Do […]
The Ultimate Guide to Choosing a Great Domain Name for Your Business
Choosing the right domain name for your business is a critical step in building a strong online presence. Your domain […]
6 Mistakes to Avoid When Creating a React-Native App
React Native is a leading cross-platform app development framework that has more than one and half thousand active contributors. The […]
Will Elon Musk Turn Twitter into a Super-App?
Elon Musk envisions a future where mobile apps are consolidated into one-stop shops within a single platform. Will he create a "super app" to rule them all in 2023? Learn about the challenges he faces and the potential impact on companies like Twitter and Apple's App Store.
Revealing footer of a website is a nice effect, we used it on our Web design for startups page. The idea is to reveal the footer section as you reach the bottom of the page. Rather than having it static display.
In this tutorial I'll explain how to simply create this effect of revealing Footer in Oxygen builder.
Let's get started, with step by step. Or jump to tl;dr version.
Table of Contents
Preparing the Inner Content
Generally a web page consist of Header , Inner Content (where you have all the text, images, etc..) and Footer.
We will mainly work with the last section, before the Footer.
In this example we're using a white backgroud with 200px bottom margin.
So the CSS for the section before the Footer is:
background-color: white; margin-bottom: 200px;
The Footer Section
Create the footer section, and apply this CSS code to it.
You can change the height vlaue as you wish.
position: fixed; bottom: 0; z-index: -1; height: 200px;
Final Step
In order for this to work, and the footer in behind all other sections (as we're setting z-index to -1)
You need to make sure all sections have a background, even if it's just plain white, you still have to actually assign a background color.
TL;DR Version:
Step One
Add CSS to the last section (before the footer)
/** change values as suitable **/
background-color: white;
margin-bottom: 200px;
/** change values as suitable **/
background-color: white;
margin-bottom: 200px;
Step Two
Add CSS to the Footer section
/** change height value as suitable **/
position: fixed; bottom: 0; z-index: -1; height: 200px;
/** change height value as suitable **/
position: fixed; bottom: 0; z-index: -1; height: 200px;