Material Design - Animations

Developer
Lorenzo D'Ianni
Size
9,001 Kb
Views
12,144
  1. Material Design - Animations Previews
  2. Material Design - Animations HTML Codes
  3. Material Design - Animations CSS Codes
  4. Material Design - Animations JS Codes

How do I make an material design - animations?

What is a material design - animations? How do you make a material design - animations? This script and codes were developed by Lorenzo D'Ianni on 29 September 2022, Thursday.

Material Design - Animations Previews
IQ Test

Material Design - Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design - Animations</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <app> <header> <h1>MY AWESOME APP</h1> </header> <main start-page="home"> <section page="home"> <div class="container"> <h2>Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur nulla error praesentium commodi ipsum est modi, et molestias id nisi possimus explicabo accusamus, sed repudiandae minus rem harum nobis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem obcaecati, vel, quod exercitationem, accusantium suscipit, illo culpa fugiat perspiciatis architecto excepturi. Ducimus est quo nihil consectetur porro architecto doloribus voluptates, impedit optio dolor maxime culpa quod illo aspernatur quibusdam fugiat molestias corporis praesentium fuga ipsum consequuntur quaerat voluptas, accusantium minus iure. Provident error exercitationem laborum doloribus, deserunt animi? Vel mollitia beatae modi impedit rerum. Facere, nisi, cumque? Cumque accusamus beatae ratione soluta ab ullam molestias libero eius vero maxime iusto rerum, at delectus pariatur, explicabo deserunt eligendi blanditiis architecto fugiat nostrum aperiam facilis corporis! Numquam omnis, amet ad. Adipisci, dicta.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur nulla error praesentium commodi ipsum est modi, et molestias id nisi possimus explicabo accusamus, sed repudiandae minus rem harum nobis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem obcaecati, vel, quod exercitationem, accusantium suscipit, illo culpa fugiat perspiciatis architecto excepturi. Ducimus est quo nihil consectetur porro architecto doloribus voluptates, impedit optio dolor maxime culpa quod illo aspernatur quibusdam fugiat molestias corporis praesentium fuga ipsum consequuntur quaerat voluptas, accusantium minus iure. Provident error exercitationem laborum doloribus, deserunt animi? Vel mollitia beatae modi impedit rerum. Facere, nisi, cumque? Cumque accusamus beatae ratione soluta ab ullam molestias libero eius vero maxime iusto rerum, at delectus pariatur, explicabo deserunt eligendi blanditiis architecto fugiat nostrum aperiam facilis corporis! Numquam omnis, amet ad. Adipisci, dicta.</p> </div> </section> <section page="works"> <div class="container"> <h2>Works</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem obcaecati, vel, quod exercitationem, accusantium suscipit, illo culpa fugiat perspiciatis architecto excepturi. Ducimus est quo nihil consectetur porro architecto doloribus voluptates, impedit optio dolor maxime culpa quod illo aspernatur quibusdam fugiat molestias corporis praesentium fuga ipsum consequuntur quaerat voluptas, accusantium minus iure. Provident error exercitationem laborum doloribus, deserunt animi? Vel mollitia beatae modi impedit rerum. Facere, nisi, cumque? Cumque accusamus beatae ratione soluta ab ullam molestias libero eius vero maxime iusto rerum, at delectus pariatur, explicabo deserunt eligendi blanditiis architecto fugiat nostrum aperiam facilis corporis! Numquam omnis, amet ad. Adipisci, dicta.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur nulla error praesentium commodi ipsum est modi, et molestias id nisi possimus explicabo accusamus, sed repudiandae minus rem harum nobis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores non porro, debitis dicta voluptas itaque omnis adipisci. Distinctio recusandae quae autem dolorum voluptatum corporis possimus, ad impedit labore ex nam accusantium mollitia quod officia molestiae hic a totam fuga, sed eos odit cupiditate accusamus! Consequuntur soluta animi earum aperiam nihil laborum autem, voluptate vitae rem deleniti quisquam odio nam unde, ratione nobis quia. Itaque aperiam atque impedit praesentium maxime commodi iure quasi repellendus repudiandae! Totam velit, consequatur alias accusamus inventore. Neque illum dolorum obcaecati minima alias iste excepturi ea nulla, odit ab, asperiores molestiae doloremque at iusto aspernatur incidunt necessitatibus doloribus voluptas. Repudiandae placeat neque adipisci rem voluptatibus, aspernatur magnam, sint labore illo voluptas iusto ex veniam explicabo! Nobis accusantium iure in, maxime quibusdam atque consequatur ducimus hic dolores neque nemo est quia, praesentium minus ex nihil maiores alias similique necessitatibus molestiae incidunt eaque vero. Id fuga eius quae unde perspiciatis omnis assumenda, asperiores sunt amet. Blanditiis amet reiciendis error, tempora doloribus enim eius iste fugit maxime facere suscipit, magni consectetur sapiente officiis dolorum commodi at nam hic quae omnis eveniet alias quibusdam beatae! Voluptatibus cum temporibus molestias placeat ab quam excepturi, ad, obcaecati aspernatur cupiditate earum error laudantium tempora!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur nulla error praesentium commodi ipsum est modi, et molestias id nisi possimus explicabo accusamus, sed repudiandae minus rem harum nobis.</p> </div> </section> <section page="about"> <div class="container"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur nulla error praesentium commodi ipsum est modi, et molestias id nisi possimus explicabo accusamus, sed repudiandae minus rem harum nobis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem obcaecati, vel, quod exercitationem, accusantium suscipit, illo culpa fugiat perspiciatis architecto excepturi. Ducimus est quo nihil consectetur porro architecto doloribus voluptates, impedit optio dolor maxime culpa quod illo aspernatur quibusdam fugiat molestias corporis praesentium fuga ipsum consequuntur quaerat voluptas, accusantium minus iure. Provident error exercitationem laborum doloribus, deserunt animi? Vel mollitia beatae modi impedit rerum. Facere, nisi, cumque? Cumque accusamus beatae ratione soluta ab ullam molestias libero eius vero maxime iusto rerum, at delectus pariatur, explicabo deserunt eligendi blanditiis architecto fugiat nostrum aperiam facilis corporis! Numquam omnis, amet ad. Adipisci, dicta.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequuntur nulla error praesentium commodi ipsum est modi, et molestias id nisi possimus explicabo accusamus, sed repudiandae minus rem harum nobis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem obcaecati, vel, quod exercitationem, accusantium suscipit, illo culpa fugiat perspiciatis architecto excepturi. Ducimus est quo nihil consectetur porro architecto doloribus voluptates, impedit optio dolor maxime culpa quod illo aspernatur quibusdam fugiat molestias corporis praesentium fuga ipsum consequuntur quaerat voluptas, accusantium minus iure. Provident error exercitationem laborum doloribus, deserunt animi? Vel mollitia beatae modi impedit rerum. Facere, nisi, cumque? Cumque accusamus beatae ratione soluta ab ullam molestias libero eius vero maxime iusto rerum, at delectus pariatur, explicabo deserunt eligendi blanditiis architecto fugiat nostrum aperiam facilis corporis! Numquam omnis, amet ad. Adipisci, dicta.</p> </div> </section> <section page="contacts"> <div class="container"> <h2>Contacts</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere excepturi porro doloremque velit ipsum cumque nobis quidem aperiam voluptates sed numquam ex, omnis alias distinctio rerum reprehenderit optio esse! Natus sed tenetur dicta hic laborum temporibus esse quod aperiam rerum et iste ipsa in accusantium numquam recusandae error suscipit, voluptates deleniti quasi quis officia. Nisi deleniti, suscipit molestias. Harum repellat unde suscipit ratione aperiam odio qui minus! Quaerat, distinctio, voluptatum laudantium aliquid aut corporis. Magni quibusdam tempora sint deleniti quod repellat assumenda laudantium voluptate saepe eveniet praesentium reiciendis, distinctio ratione asperiores in voluptates amet architecto temporibus doloremque recusandae voluptas maiores nobis! Culpa perferendis, nobis, reprehenderit dolores est voluptatibus aperiam! Distinctio qui non illum labore molestias perferendis voluptas, veniam, eius quam quas alias incidunt! Odit vero quisquam minus vel tenetur quo numquam quod alias voluptatum quas porro excepturi a, perferendis ab placeat ipsam ex veniam architecto libero dolorum totam fugit. Maiores saepe ipsum odit doloribus deleniti, nobis dolorum vel eos, aliquid itaque aliquam ea. Expedita dolor, natus tenetur commodi quasi numquam totam! Ut modi temporibus eius nisi eos dolore quia adipisci magni error veniam architecto perspiciatis in tenetur, nostrum, fugit iure quam consequuntur praesentium suscipit dignissimos eveniet aut itaque autem ab. Corrupti consequuntur maiores, natus ipsa suscipit qui nihil. Officia provident, veritatis ex. Ea quasi consequuntur ab dolores animi harum quos est ut laudantium, voluptas incidunt illo mollitia? Culpa ad quis at sint ut. Dolores recusandae laboriosam debitis fuga excepturi vero, asperiores, eaque voluptas, iure eos voluptates facilis voluptatem. Adipisci quasi repudiandae veritatis, unde alias totam illum culpa cupiditate! Molestiae voluptates vitae natus obcaecati laudantium earum, ab maiores cumque modi minus debitis sint neque quo laboriosam enim maxime, molestias libero a tempora quis mollitia. Repudiandae soluta vero amet, officia a maxime aut officiis, praesentium! Dolores velit sequi molestiae officia veniam nihil ducimus, aperiam at illum adipisci, culpa sed nemo veritatis expedita libero, labore cumque nobis. Deleniti architecto nesciunt eius aliquid ex dolores quia voluptas quidem minus suscipit consequuntur aut illum quaerat ipsam, cupiditate consectetur mollitia culpa atque fuga recusandae facilis expedita eaque earum vitae. Ipsam aspernatur similique libero quia, accusantium beatae adipisci. Quasi dignissimos commodi laudantium voluptate eveniet consequatur sit culpa, nemo, incidunt voluptatem sed obcaecati magni minus dolorum. Animi, suscipit consequatur placeat tenetur nulla eaque quia! Atque rem vitae veniam incidunt explicabo quam, assumenda cupiditate! Aut quaerat autem animi magni optio! Omnis atque provident nobis veniam ipsum assumenda similique mollitia, odit ipsa. Dolorem voluptatum minus modi dolor unde ipsam porro esse officiis? Veritatis ducimus sed, voluptatem facere ut iste asperiores adipisci, voluptatibus pariatur, commodi temporibus blanditiis recusandae repellendus laborum. Veniam cumque maxime perferendis similique, sed rem nobis reiciendis quam quasi dignissimos voluptas repellendus sapiente suscipit, repellat molestiae quod eaque voluptate possimus id, quos iusto eos magnam laborum. Vero iste repellendus natus ipsam dolores, minima sequi minus laboriosam facere delectus itaque tenetur quod tempore quia sed ipsum recusandae obcaecati? Laboriosam quis beatae voluptatum omnis blanditiis adipisci, soluta repellendus, quaerat dignissimos reiciendis odio laborum expedita minus eum facilis veniam incidunt! Alias fuga nam magnam deserunt, eum qui praesentium nemo obcaecati veritatis enim ipsam facere voluptatem dolor delectus eaque ad modi dignissimos iure assumenda, culpa, velit quibusdam officiis numquam. Nostrum autem inventore, modi ducimus voluptatum eaque quia deleniti optio praesentium hic aut numquam ab eos omnis veritatis quidem vero. Culpa cupiditate accusamus eos dolor perferendis eveniet blanditiis, magnam, quia sunt recusandae vero, quasi sapiente totam inventore, consequatur deleniti necessitatibus eaque quibusdam. Doloribus impedit dolorum optio earum enim minima quibusdam voluptatibus nostrum reprehenderit dicta animi ut ex dolor, harum autem numquam voluptatum iure. Reiciendis at, saepe sint neque hic a itaque dolorum facere error, est temporibus magnam provident nam nisi natus aperiam dolore rerum obcaecati mollitia nostrum animi eveniet vel accusamus quam suscipit. Natus repudiandae facilis reiciendis consectetur dolor delectus iure quisquam sunt, assumenda officiis enim quaerat, deserunt ab dolore eligendi, hic odio quas repellendus minus itaque officia! Perspiciatis, reiciendis, recusandae sit, adipisci debitis molestiae consectetur nisi illum quis molestias dolorem praesentium doloribus nulla. Nisi voluptatibus veniam quam dolore nam maxime quos sint pariatur architecto adipisci, vel aliquam, consequuntur sequi ex. Provident atque molestias beatae voluptas nulla asperiores assumenda reiciendis nostrum, dolorum explicabo consectetur, dolore ullam a cum nesciunt repellat perferendis at, quam suscipit rem, cumque obcaecati. Tenetur maiores, aspernatur dolor perferendis id sapiente architecto dicta odio quas, vitae cupiditate tempora nostrum labore qui similique sequi ab laudantium, corrupti eveniet quibusdam quisquam? Molestias qui quae ipsam odio repellendus recusandae autem modi dicta nemo labore repudiandae doloribus unde nobis quos aspernatur, earum perferendis amet, ratione iure deserunt. Doloremque nulla excepturi quibusdam, fuga deserunt ea totam possimus eos iusto dolor amet minima. Blanditiis, a reprehenderit! Repudiandae repellendus, quam consequuntur doloribus commodi voluptatibus officia, iusto voluptatem necessitatibus eveniet temporibus. Eius minus id maxime quam, sed minima corrupti culpa consectetur nobis illo saepe facere voluptas ratione enim maiores earum molestiae sit, consequuntur ad quibusdam recusandae cum sint. At, minus eaque provident maiores ipsa ratione quos nostrum optio fugit, sunt, deleniti alias harum laborum ex consequuntur suscipit placeat veniam debitis sapiente? Id nulla dicta laudantium, officiis quas eos eligendi accusantium? Eaque voluptates doloremque quis numquam, incidunt reprehenderit a fugit nesciunt ratione, facere modi enim! Deserunt sapiente quisquam dolorum officia. Natus quibusdam deserunt dignissimos recusandae facere, neque, ad, sequi eos numquam eum atque itaque. Necessitatibus ab sint, possimus aliquid itaque, autem vitae laudantium debitis? Assumenda repudiandae perspiciatis consectetur totam cumque laudantium placeat eveniet, magnam fugiat iure. Eum tempore veniam, unde nemo nobis ullam voluptatum velit? Tempore minus sit nam temporibus, voluptatibus praesentium eaque, illum dolore, cum exercitationem magnam quae optio? Repellat nesciunt commodi distinctio repudiandae ad, fuga rem nisi libero optio dicta veniam aut assumenda temporibus. Animi beatae eos suscipit voluptates cumque laudantium minima, commodi quisquam aliquid quos officiis, tenetur, autem eaque aliquam voluptatum quibusdam. Dolor quisquam incidunt temporibus quae corporis ad minus facilis voluptatem necessitatibus quo nihil vitae aut eveniet blanditiis nam cum, ex error ratione id explicabo labore sed, saepe ab eaque! Enim eaque exercitationem, soluta. Quos iste ad id odio. Quaerat cum, at in consequuntur iure recusandae.</p> </div> </section> </main> <footer> <nav class="menu"> <a class="menu-link" show-page="home"> <svg viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg> </a> <a class="menu-link" show-page="works"> <svg viewBox="0 0 24 24"><path d="M11.71,19C9.93,19 8.5,17.59 8.5,15.86C8.5,14.24 9.53,13.1 11.3,12.74C13.07,12.38 14.9,11.53 15.92,10.16C16.31,11.45 16.5,12.81 16.5,14.2C16.5,16.84 14.36,19 11.71,19M13.5,0.67C13.5,0.67 14.24,3.32 14.24,5.47C14.24,7.53 12.89,9.2 10.83,9.2C8.76,9.2 7.2,7.53 7.2,5.47L7.23,5.1C5.21,7.5 4,10.61 4,14A8,8 0 0,0 12,22A8,8 0 0,0 20,14C20,8.6 17.41,3.8 13.5,0.67Z" /></svg> </a> <a class="menu-link" show-page="about"> <svg viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /></svg> </a> <a class="menu-link" show-page="contacts"> <svg viewBox="0 0 24 24"><path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg> </a> </nav> </footer>
</app> <script src="js/index.js"></script>
</body>
</html>

Material Design - Animations - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
body, app, header, main, .menu, .menu-link, [page] { display: -moz-flex; display: -ms-flex; display: -webkit-flex; display: flex;
}
app, main { -moz-flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;
}
body, header, .menu-link { -moz-justify-content: center; -ms-justify-content: center; -webkit-justify-content: center; justify-content: center;
}
body, header, .menu-link { -moz-align-items: center; -ms-align-items: center; -webkit-align-items: center; align-items: center;
}
@-moz-keyframes show-page { 0% { opacity: 0; -webkit-clip-path: circle(0px at 50% 100%); -moz-clip-path: circle(0px at 50% 100%); -ms-clip-path: circle(0px at 50% 100%); clip-path: circle(0px at 50% 100%); } 30% { opacity: 1; } 100% { -webkit-clip-path: circle(100% at 50% 50%); -moz-clip-path: circle(100% at 50% 50%); -ms-clip-path: circle(100% at 50% 50%); clip-path: circle(100% at 50% 50%); }
}
@-webkit-keyframes show-page { 0% { opacity: 0; -webkit-clip-path: circle(0px at 50% 100%); -moz-clip-path: circle(0px at 50% 100%); -ms-clip-path: circle(0px at 50% 100%); clip-path: circle(0px at 50% 100%); } 30% { opacity: 1; } 100% { -webkit-clip-path: circle(100% at 50% 50%); -moz-clip-path: circle(100% at 50% 50%); -ms-clip-path: circle(100% at 50% 50%); clip-path: circle(100% at 50% 50%); }
}
@keyframes show-page { 0% { opacity: 0; -webkit-clip-path: circle(0px at 50% 100%); -moz-clip-path: circle(0px at 50% 100%); -ms-clip-path: circle(0px at 50% 100%); clip-path: circle(0px at 50% 100%); } 30% { opacity: 1; } 100% { -webkit-clip-path: circle(100% at 50% 50%); -moz-clip-path: circle(100% at 50% 50%); -ms-clip-path: circle(100% at 50% 50%); clip-path: circle(100% at 50% 50%); }
}
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; tap-highlight-color: transparent;
}
html { height: 100%;
}
body { width: 100%; height: 100%; background-color: #F5F5F5;
}
.simulate-mobile app { width: 320px; height: 90%; max-height: 568px;
}
app { width: 100%; height: 100%; overflow: hidden; font: 400 16px/100% 'Roboto', sans-serif; color: #FFFFFF; line-height: 140%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
svg { width: 24px; height: 24px; fill: #FFFFFF;
}
a, ul, li { list-style: none; text-decoration: none;
}
h1 { font-size: 20px; color: #FFFFFF;
}
h2 { font-size: 20px; font-weight: 500; margin-bottom: 8px;
}
h2:only-child { position: absolute; top: 50%; left: 50%; font-size: 32px; font-weight: 500; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
header, footer { height: 43px; min-height: 43px;
}
header { position: relative; z-index: 5; background-color: #2196F3; border-top: 4px solid #1976D2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
main { position: relative; height: 100%; overflow: hidden; background-color: #0e4377;
}
p { margin-bottom: 12px;
}
.menu { height: 100%;
}
.menu-link { position: relative; width: 100%; text-align: center; color: #FFFFFF; background-color: #2196F3; cursor: pointer;
}
.menu-link:hover { background-color: #1976D2;
}
.menu-link:after { content: ''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;
}
[page] { position: absolute; z-index: -1; width: 100%; height: 100%; overflow: hidden;
}
[page].active { z-index: 2; -moz-animation: show-page 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: show-page 0.8s cubic-bezier(0.4, 0, 0.2, 1); animation: show-page 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
[page].previus { z-index: 1;
}
[page]:nth-child(1) { background-color: #0e4377;
}
[page]:nth-child(2) { background-color: #7C4DFF;
}
[page]:nth-child(3) { background-color: #F44336;
}
[page]:nth-child(4) { background-color: #E040FB;
}
.container { position: relative; width: 100%; padding: 12px; overflow-y: auto;
}

Material Design - Animations - Script Codes JS Codes

(function(window, document) { 'use strict'; init(); function init() { simulateMobile(); setEventButtons(); showPage(); } function setEventButtons() { var buttons = document.querySelectorAll('[show-page]'); for(var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', showPage); } } function setPreviousPage(section) { section.classList.remove('previus'); if(section.classList.contains('active')) { section.classList.add('previus'); section.classList.remove('active'); } return section; } function setActivePage(section, pageToShow) { section.attributes.page.value === pageToShow ? section.classList.add('active') : null; } function getPageToShow(e, section) { var clicked = e ? e.target.attributes['show-page'] : undefined; var start = section.parentNode.attributes['start-page']; var first = section.attributes['page'].value; return clicked ? clicked.value : start ? start.value : first; } function showPage(e) { var sections = document.querySelectorAll('[page]'); var pageToShow = getPageToShow(e, sections[0]); for(var i = 0; i < sections.length; i++) { setActivePage( setPreviousPage(sections[i]), pageToShow ); } } function simulateMobile() { window.innerWidth > 500 ? document.body.classList.add('simulate-mobile') : null; }
})(window, document);
Material Design - Animations - Script Codes
Material Design - Animations - Script Codes
Home Page Home
Developer Lorenzo D'Ianni
Username lorenzodianni
Uploaded September 29, 2022
Rating 3
Size 9,001 Kb
Views 12,144
Do you need developer help for Material Design - Animations?

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!

Lorenzo D'Ianni (lorenzodianni) Script Codes
Name
Checkbox Style - SCSS
Material Design - Button in pure CSS
Off Canvas in SASS
Cards experience
AngularJS - Controller As
AngularJS template
Smooth Scroll
Checkbox Style 2.0 - SCSS
Ng-barcode
SidebarJS
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!