Single-page app layout with animating transitions

Developer
Andy McFee
Size
4,845 Kb
Views
36,432
  1. Single-page app layout with animating transitions Previews
  2. Single-page app layout with animating transitions HTML Codes
  3. Single-page app layout with animating transitions CSS Codes
  4. Single-page app layout with animating transitions JS Codes

How do I make an single-page app layout with animating transitions?

This is a prototype to test transition of various page elements on a single-page app layout. It SHOULD be 100% jank-free and all transitions should be completely smooth.. What is a single-page app layout with animating transitions? How do you make a single-page app layout with animating transitions? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.

Single-page app layout with animating transitions Previews
IQ Test

Single-page app layout with animating transitions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single-page app layout with animating transitions</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> <div class="container"> <div class="sidebar"> <h2>Sidebar</h2> <button class="toggle-overpane">Toggle Overpane</button> <button class="toggle-pane-left">Toggle Slider</button> <button class="toggle-pane-right">Toggle Pane</button> </div> <div class="main"> <div class="pane--left"> I'm the left pane </div> <div class="main--content"> <h1>A Prototype with moving parts. (100% jank-free!)</h1> <h3>Overview of page components:</h3> <p><strong>Overpane</strong>: an overpane is a full-screen panel that appears over all content.</p> <p><strong>Slider</strong>: a slider slides in and pushes or slides all content with it. Content does NOT change size.</p> <p><strong>Pane</strong>: a pane also slides in and squishes content that it displays. Content DOES change size when a pane appears/disppears.</p> <h3>And now for some filler content!</h3> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> </div> </div> <div class="pane--right"> I'm pane right. </div> <div class="overpane"> I'm the overpane <button class="toggle-overpane big-button">Close Overpane</button> </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>

Single-page app layout with animating transitions - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { height: 100%;
}
body { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 100px; color: #2f2f2f;
}
@media (min-width: 600px) { body { padding-left: 240px; }
}
.container { position: relative; width: 100%; overflow: hidden;
}
.sidebar { position: fixed; z-index: 1000; left: 0; top: 0; height: 100%; background: rgba(13, 166, 242, 0.9); width: 100px; padding: .25rem; background: -webkit-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%); background: linear-gradient(to bottom, #ffa84c 0%, #ff7b0d 100%); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
@media (min-width: 600px) { .sidebar { width: 240px; padding: 2rem; }
}
.main { background: #f3f3f3; position: absolute; z-index: 950; top: 0; left: 0; right: 0; bottom: 0; width: auto; margin: 0; -webkit-transition: 250ms cubic-bezier(0.7, 0, 0.3, 1) all; transition: 250ms cubic-bezier(0.7, 0, 0.3, 1) all; -webkit-transition-delay: 0; transition-delay: 0; min-height: 100%; -webkit-transform: translateX(0); transform: translateX(0);
}
.main--content { overflow: auto; padding: 2rem; height: 100%; width: 100%;
}
.pane--right,
.pane--left { position: absolute; padding: 2rem; width: 400px; z-index: 980; top: 0; bottom: 0; background: #b3e6b3; -webkit-transition: -webkit-transform 250ms cubic-bezier(0.7, 0, 0.3, 1); transition: -webkit-transform 250ms cubic-bezier(0.7, 0, 0.3, 1); transition: transform 250ms cubic-bezier(0.7, 0, 0.3, 1); transition: transform 250ms cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 250ms cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition-delay: 0; transition-delay: 0;
}
.pane--right { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%);
}
.pane--left { left: -400px;
}
.show-pane--left .main { -webkit-transform: translateX(400px); transform: translateX(400px);
}
.show-pane--right .pane--right { -webkit-transform: translateX(0); transform: translateX(0);
}
.show-pane--right .main { right: 400px;
}
.overpane { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(170, 102, 204, 0.9); padding: 2rem; z-index: 2000; -webkit-transition: 250ms cubic-bezier(0.7, 0, 0.3, 1) -webkit-transform; transition: 250ms cubic-bezier(0.7, 0, 0.3, 1) -webkit-transform; transition: 250ms cubic-bezier(0.7, 0, 0.3, 1) transform; transition: 250ms cubic-bezier(0.7, 0, 0.3, 1) transform, 250ms cubic-bezier(0.7, 0, 0.3, 1) -webkit-transform; -webkit-transform: translateY(100%); transform: translateY(100%);
}
.overpane.show { -webkit-transform: translateY(0); transform: translateY(0);
}
button { margin: .5rem 0; width: 100%; background: #0d80f2; border: none; padding: .5rem 0; color: #fff;
}
button.big-button { padding: 2rem 0;
}
button:focus { outline: none; background: #0b73da;
}
button:active { background: #0a66c2;
}

Single-page app layout with animating transitions - Script Codes JS Codes

$('.toggle-pane-right').click(function() { $('.container').toggleClass('show-pane--right') });
$('.toggle-pane-left').click(function() { $('.container').toggleClass('show-pane--left') });
$('.toggle-overpane').click(function() { $('.overpane').toggleClass('show') });
Single-page app layout with animating transitions - Script Codes
Single-page app layout with animating transitions - Script Codes
Home Page Home
Developer Andy McFee
Username andymcfee
Uploaded August 09, 2022
Rating 3.5
Size 4,845 Kb
Views 36,432
Do you need developer help for Single-page app layout with animating transitions?

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!

Andy McFee (andymcfee) Script Codes
Name
Responsive Web App Panel Layout
Whatsizeisthisscreen.com
Flip Card - Bad Rotation
Responsive Boxes without Images
Round Music Player with Official.fm API
CSS Loading Spinners
Flexbox vertcially centered nav text
CSS3 Border Image
BEM Flexbox Nav build for a workshop
Responsive Boxes with CSS3 Columns
Create amazing Facebook ads 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!