Cool Page Split Effect
How do I make an cool page split effect?
What is a cool page split effect? How do you make a cool page split effect? This script and codes were developed by Anthony Adamski on 25 August 2022, Thursday.
Cool Page Split Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool Page Split Effect</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! */ html { overflow-y: scroll;
}
html,body { height: 100%;
}
.top { background-image: url(data:image/png;base64,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); background-color: #3498db; height: 100%; position: absolute; width: 100%; box-shadow: 0 0 12px rgba(0,0,0,.50); top: 0%; transition: .25s top;
}
.bottom { background-color: #ecf0f1; height: 100%; position: absolute; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,.45); top: 0%; transition: .25s top;
}
.wrapper { position: relative; height: 50%; min-height: 200px;
}
.slide-up { top: -50%;
}
.slide-down { top: 50%;
}
.hidden { position: absolute; height: 50%; width: 100%; z-index: -5; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.hidden h2 { height: 20px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-weight: 700; font-family: 'Open Sans', serif; color: #3498db;
}
.btn { margin: auto; position: absolute; top: 100%; left: 0; bottom: 0; right: 0; background: #FFF; height: 55px; width: 205px; padding-top: 40px; border-radius: 5px; text-align: center; font-weight: 700; font-family: 'Open Sans', serif; text-decoration: none; color: #3498db; z-index: 100; transition: .25s all; box-shadow: 0 0 0 4px #3498db,0px 0 0 8px white,0px 0 10px 0 rgba(0,0,0,.5),0px 0 10px 10px rgba(0,0,0,.25); transition: .25s all;
}
.btn:hover { box-shadow: 0 0 0 10px #3498db,0px 0 0 20px white,0px 0 15px 0 rgba(0,0,0,.5),0px 0 10px 20px rgba(0,0,0,.25); transition: .25s all;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="top"> <a class="btn" href="#" id="split-me">Click Me!</a> </div>
</div>
<div class="hidden"> <h2>I like Nachos!</h2>
</div>
<div class="wrapper"> <div class="bottom"></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>
Cool Page Split Effect - Script Codes CSS Codes
html { overflow-y: scroll;
}
html,body { height: 100%;
}
.top { background-image: url(data:image/png;base64,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); background-color: #3498db; height: 100%; position: absolute; width: 100%; box-shadow: 0 0 12px rgba(0,0,0,.50); top: 0%; transition: .25s top;
}
.bottom { background-color: #ecf0f1; height: 100%; position: absolute; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,.45); top: 0%; transition: .25s top;
}
.wrapper { position: relative; height: 50%; min-height: 200px;
}
.slide-up { top: -50%;
}
.slide-down { top: 50%;
}
.hidden { position: absolute; height: 50%; width: 100%; z-index: -5; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.hidden h2 { height: 20px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-weight: 700; font-family: 'Open Sans', serif; color: #3498db;
}
.btn { margin: auto; position: absolute; top: 100%; left: 0; bottom: 0; right: 0; background: #FFF; height: 55px; width: 205px; padding-top: 40px; border-radius: 5px; text-align: center; font-weight: 700; font-family: 'Open Sans', serif; text-decoration: none; color: #3498db; z-index: 100; transition: .25s all; box-shadow: 0 0 0 4px #3498db,0px 0 0 8px white,0px 0 10px 0 rgba(0,0,0,.5),0px 0 10px 10px rgba(0,0,0,.25); transition: .25s all;
}
.btn:hover { box-shadow: 0 0 0 10px #3498db,0px 0 0 20px white,0px 0 15px 0 rgba(0,0,0,.5),0px 0 10px 20px rgba(0,0,0,.25); transition: .25s all;
}
Cool Page Split Effect - Script Codes JS Codes
$('#split-me').click(function(){ $('.top').toggleClass('slide-up'); $('.bottom').toggleClass('slide-down'); });
Developer | Anthony Adamski |
Username | anthonyadamski |
Uploaded | August 25, 2022 |
Rating | 4.5 |
Size | 6,128 Kb |
Views | 38,456 |
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 |
Cropped Background Images | 1,693 Kb |
Work In Progress | 225,703 Kb |
Single page concept | 5,640 Kb |
A Pen by Anthony Adamski | 8,174 Kb |
Jquery Snippets | 2,221 Kb |
Live CSS Blur | 2,648 Kb |
Menu Overflow | 2,280 Kb |
Live resume concept | 4,567 Kb |
Video Test | 1,835 Kb |
Simple CSS3 Slider | 2,839 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 |
Two column of responsive height | Fixie | 2,908 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Welcome | Nakome | 6,076 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
A Pen by Miro Olma | Programiro | 2,342 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!