Popup Footer
How do I make an popup footer?
Simple popup footer proof of concept for a group website redesign project.. What is a popup footer? How do you make a popup footer? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.
Popup Footer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Popup Footer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Viga', sans-serif; overflow: hidden;
}
.popupfooter { position: absolute; bottom: -200px; color: white; background: black; height: 200px; padding: 20px; transition: all 0.5s ease;
}
.popupfooter.active { bottom: 0;
}
.popupfooter.active .toggle:before, .popupfooter.active .toggle:after { transition: all 0.5s ease;
}
.popupfooter.active .toggle:before { transform: translateX(0) rotateZ(45deg);
}
.popupfooter.active .toggle:after { transform: translateX(0) rotateZ(-45deg);
}
.popupfooter .toggle { position: absolute; width: 40px; height: 40px; right: 20px; top: -40px; background: black;
}
.popupfooter .toggle:before, .popupfooter .toggle:after { content: ''; position: absolute; background: white; display: block; width: 24px; height: 4px; top: 18px; left: 8px; transition: all 0.5s ease;
}
.popupfooter .toggle:before { transform: translateY(-5px) rotateZ(0);
}
.popupfooter .toggle:after { transform: translateY(5px) rotateZ(0);
}
.popupfooter .left, .popupfooter .middle, .popupfooter .right { float: left; width: 25%; padding-right: 20px;
}
.popupfooter .middle { width: 50%;
}
.popupfooter .right { padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="http://fonts.googleapis.com/css?family=Viga" rel="stylesheet" type="text/css"/>
<div class="popupfooter"> <div class="toggle"></div> <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem harum molestiae et consequatur perferendis quas eligendi adipisci dicta hic eius saepe aliquam sequi consequuntur cum ipsa beatae dolor deserunt.</div> <div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nulla voluptatum facere voluptatem similique quas molestiae alias ab libero labore tenetur optio harum sint fuga deleniti. Possimus iure facilis a modi molestiae totam amet autem voluptates consectetur quis excepturi iusto fuga pariatur nesciunt veritatis itaque incidunt odit deleniti tenetur.</div> <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem harum molestiae et consequatur perferendis quas eligendi adipisci dicta hic eius saepe aliquam sequi consequuntur cum ipsa beatae dolor deserunt.</div>
</div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Popup Footer - Script Codes CSS Codes
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Viga', sans-serif; overflow: hidden;
}
.popupfooter { position: absolute; bottom: -200px; color: white; background: black; height: 200px; padding: 20px; transition: all 0.5s ease;
}
.popupfooter.active { bottom: 0;
}
.popupfooter.active .toggle:before, .popupfooter.active .toggle:after { transition: all 0.5s ease;
}
.popupfooter.active .toggle:before { transform: translateX(0) rotateZ(45deg);
}
.popupfooter.active .toggle:after { transform: translateX(0) rotateZ(-45deg);
}
.popupfooter .toggle { position: absolute; width: 40px; height: 40px; right: 20px; top: -40px; background: black;
}
.popupfooter .toggle:before, .popupfooter .toggle:after { content: ''; position: absolute; background: white; display: block; width: 24px; height: 4px; top: 18px; left: 8px; transition: all 0.5s ease;
}
.popupfooter .toggle:before { transform: translateY(-5px) rotateZ(0);
}
.popupfooter .toggle:after { transform: translateY(5px) rotateZ(0);
}
.popupfooter .left, .popupfooter .middle, .popupfooter .right { float: left; width: 25%; padding-right: 20px;
}
.popupfooter .middle { width: 50%;
}
.popupfooter .right { padding: 0;
}
Popup Footer - Script Codes JS Codes
function changebox() { $(".popupfooter").toggleClass("active");
}
$(".toggle").on("click", changebox);
Developer | Mark Thomes |
Username | WithAnEs |
Uploaded | July 04, 2022 |
Rating | 3 |
Size | 3,488 Kb |
Views | 52,624 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sidebar Nav | 3,808 Kb |
Up Arrow | 7,830 Kb |
CSS Birthday Cake | 8,353 Kb |
Sloshing Beaker | 7,223 Kb |
Hiding in a box | 3,138 Kb |
SVG Search... | 7,601 Kb |
Beer Color | 7,886 Kb |
CSS3 Gradient Stripes | 6,259 Kb |
Basic Menu CSS | 2,787 Kb |
Popup Footer | 3,488 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Flower expansion | Sreucherand | 3,425 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Formations | Cantelope | 5,731 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Adding Items | Valhead | 4,008 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!