Page Transitions - Vertical Sliding
How do I make an page transitions - vertical sliding?
What is a page transitions - vertical sliding? How do you make a page transitions - vertical sliding? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.
Page Transitions - Vertical Sliding - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page Transitions - Vertical Sliding</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> <!-- build:js scripts/vendor/modernizr.js --> <script src="bower_components/modernizr/modernizr.js"></script> <!-- endbuild --> </head> <body> <div class="fake-body"> <div id="plus1" class="container main current" data-position="current"> <nav> <a data-go="next" href="#" class="btn">Next</a> <h1>Main</h1> <a data-go="prev" href="#" class="btn">Back</a> </nav> </div> <div id="bedroom" class="container next bedroom" data-position="next"> <nav> <a data-go="next" href="#" class="btn">Next</a> <h1>+1</h1> <a data-go="prev" href="#" class="btn">Back</a> </nav> </div> <div id="minus1" class="container prev basement" data-position="prev"> <nav> <a data-go="next" href="#" class="btn">Next</a> <h1>-1</h1> <a data-go="prev" href="#" class="btn">Back</a> </nav> </div> </div> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X');ga('send','pageview'); </script> <!-- build:js scripts/main.js --> <script src="bower_components/jquery/jquery.js"></script> <script src="scripts/main.js"></script> <!-- endbuild --> <!-- build:js(.tmp) scripts/coffee.js --> <script src="scripts/hello.js"></script> <!-- endbuild --> <!-- build:js scripts/plugins.js --> <script src="bower_components/sass-bootstrap/js/bootstrap-affix.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-alert.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-dropdown.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-tooltip.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-modal.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-transition.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-button.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-popover.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-typeahead.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-carousel.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-scrollspy.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-collapse.js"></script> <script src="bower_components/sass-bootstrap/js/bootstrap-tab.js"></script> <!-- endbuild -->
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Page Transitions - Vertical Sliding - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ddd; overflow: hidden;
}
.fake-body { position: absolute; background: rgba(0, 0, 0, 0.3); overflow: visible; top: 10px; bottom: 10px; right: 0; left: 0;
}
.overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5);
}
.container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; -webkit-transition: 1s ease-in-out all; transition: 1s ease-in-out all; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; /* &.current { top: 0; bottom: 0; } &.next { top: -100%; bottom: 100%; } &.prev { top: 100%; bottom: -100%; } */
}
.container.current { z-index: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.container.next { z-index: 2; -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
.container.prev { z-index: 2; -webkit-transform: translateY(0); transform: translateY(0);
}
.main { background: #d99d26;
}
.bedroom { background: #9dd926;
}
.basement { background: #d92626;
}
nav { background-color: rgba(255, 255, 255, 0.5); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); display: block; border-radius: 5px; max-width: 400px; width: 80%; text-align: center; padding: 40px; margin-left: auto; margin-right: auto;
}
.btn { background: rgba(0, 0, 0, 0.3); color: #fff; display: block; max-width: 140px; margin: 0 auto; padding: 8px 0; text-decoration: none;
}
.btn:hover { background: rgba(0, 0, 0, 0.5);
}
.no-trans { -webkit-transition: none !important; transition: none !important;
}
Page Transitions - Vertical Sliding - Script Codes JS Codes
(function() { var $btnNext, $btnPrev, $current, $next, $oldCurrent, $oldNext, $oldPrev, $prev; console.log("'Allo from CoffeeScript!"); $btnNext = $('[data-go="next"]'); $btnPrev = $('[data-go="prev"]'); $prev = $('[data-position="prev"]'); $current = $('[data-position="current"]'); $next = $('[data-position="next"]'); $oldPrev = $prev; $oldCurrent = $current; $oldNext = $next; $(function() { var debug, next, prev, pushNext, pushPrev; debug = function() { return $('#newInput').text(newInput); }; next = function() { $oldNext.removeClass("no-trans"); $oldCurrent.toggleClass("prev"); $oldNext.toggleClass("next").toggleClass("current"); $oldPrev.addClass("no-trans").toggleClass("next").toggleClass("prev"); $next = $oldPrev; $current = $oldNext; $prev = $oldCurrent; $oldNext = $next; $oldCurrent = $current; $oldPrev = $prev; return console.log("Next done."); }; prev = function() { $oldPrev.removeClass("no-trans"); $oldCurrent.toggleClass("current").toggleClass("next"); $oldPrev.toggleClass("current").toggleClass("prev"); $oldNext.addClass("no-trans").toggleClass("next").toggleClass("prev"); $next = $oldCurrent; $current = $oldPrev; $prev = $oldNext; $oldNext = $next; $oldCurrent = $current; $oldPrev = $prev; return console.log("Prev done."); }; pushNext = $btnNext.click(function() { return next(); }); return pushPrev = $btnPrev.click(function() { return prev(); }); });
}).call(this);
Developer | Andy McFee |
Username | andymcfee |
Uploaded | August 09, 2022 |
Rating | 3 |
Size | 4,943 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 |
Responsive Boxes with Images | 3,915 Kb |
Pure CSS3 Toggle Switch | 3,475 Kb |
Single-page app layout with animating transitions | 4,845 Kb |
CSS3 Border Image | 2,853 Kb |
Flexbox vertcially centered nav text | 4,011 Kb |
Responsive Boxes with CSS3 Columns | 4,168 Kb |
Flip Card | 4,615 Kb |
CSS Loading Spinners | 3,969 Kb |
A Pen by Andy McFee | 2,034 Kb |
Flip Card - Bad Rotation | 4,440 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 |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Splitted Layout | Hornebom | 2,162 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Masonry | Uriuriuriu | 5,005 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!