Slide Down Page

Developer
ULRIKA PAN
Size
3,093 Kb
Views
16,192
  1. Slide Down Page Previews
  2. Slide Down Page HTML Codes
  3. Slide Down Page CSS Codes
  4. Slide Down Page JS Codes

How do I make an slide down page?

What is a slide down page? How do you make a slide down page? This script and codes were developed by ULRIKA PAN on 14 November 2022, Monday.

Slide Down Page Previews
IQ Test

Slide Down Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide Down Page</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Quicksand:500,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slide_down_page"> <button class="btn close">CLOSE</button>
</div>
<div class="content"> <header> <h1>SLIDE DOWN PAGE</h1> <h3>Design by Ulrika Pan</h3> <button class="btn open">OPEN</button> </header>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slide Down Page - Script Codes CSS Codes

* { padding: 0px; margin: 0px; font-family: "Quicksand", sans-serif;
}
.slide_down_page { height: 100vh; width: 100%; background-color: #09A599; position: absolute; top: -100vh;
}
.content { height: 1000px; position: relative;
}
.btn { width: 100px; height: 45px; font-size: 25px; background-color: #FEB026; border: 0px; color: white; cursor: pointer;
}
.btn:hover { background-color: #fea302;
}
.close { right: 0px; background-color: #fff; color: #09A599; position: fixed; z-index: 100;
}
.close:hover { background-color: #eee;
}
.open { bottom: 10%; left: 50%; transform: translateX(-50%); position: absolute;
}
header { height: 500px; position: relative; text-align: center; color: #09A599;
}
header h1 { padding: 20% 0px 0px 0px; font-size: 3em;
}

Slide Down Page - Script Codes JS Codes

$('.btn').on('click',function(e){ if ($(this).hasClass('open')){ $('.slide_down_page').animate({'top': '0px'},500); $('.content').animate({'margin-top':'100vh'},500); $(document).scrollTop(0); }else if ($(this).hasClass('close')){ $('.slide_down_page').animate({'top':'-100vh'},500); $('.content').animate({'margin-top':0},500); $(document).scrollTop(0); };
});
$(document).on('scroll',function(){ var slideDownPage = $('.slide_down_page'); if($(this).scrollTop()> slideDownPage.height() && slideDownPage.css('top') =='0px'){ $('.slide_down_page').css({'top': '-100vh'}); $('.content').css({'margin-top': '0px'}); $(this).scrollTop(0); };
});
// $(window).scroll(function(e){
// // var pageTop = $('.slide_down_page').offset().top;
// // if ($(this).offset().Top()< pageTop){
// // var contentTop = $('.content').offset().top;
// console.log($(document).scrollTop());
// // };
// });
Slide Down Page - Script Codes
Slide Down Page - Script Codes
Home Page Home
Developer ULRIKA PAN
Username ulrikapan
Uploaded November 14, 2022
Rating 3
Size 3,093 Kb
Views 16,192
Do you need developer help for Slide Down Page?

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!

ULRIKA PAN (ulrikapan) Script Codes
Name
SVG basic
SVG social icon
SVG Animate
Image center and RWD method
Facebook Profile -UI Practice
Weather Box
Brand Style Guideline
Mobile Profile UI
Neon text 01
Wave button
Create amazing art & images with AI!

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!