Page transition

Developer
Tomoyuki Kashiro
Size
2,767 Kb
Views
8,096
  1. Page transition Previews
  2. Page transition HTML Codes
  3. Page transition CSS Codes
  4. Page transition JS Codes

How do I make an page transition?

What is a page transition? How do you make a page transition? This script and codes were developed by Tomoyuki Kashiro on 19 January 2023, Thursday.

Page transition Previews
IQ Test

Page transition - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>page transition</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="view list-view"> <ul class="list"> <li class="list-item">page1</li> <li class="list-item">page2</li> <li class="list-item">page3</li> <li class="list-item">page4</li> <li class="list-item">page5</li> <li class="list-item">page6</li> <li class="list-item">page7</li> <li class="list-item">page8</li> <li class="list-item">page9</li> <li class="list-item">page10</li> <li class="list-item">page11</li> <li class="list-item">page12</li> <li class="list-item">page13</li> <li class="list-item">page14</li> <li class="list-item">page15</li> <li class="list-item">page16</li> <li class="list-item">page17</li> <li class="list-item">page18</li> <li class="list-item">page19</li> <li class="list-item">page20</li> </ul> </div> <div class="view data-view"> <h1>data view</h1> <button class="back">Back</button> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Page transition - Script Codes CSS Codes

.container { width: 100%; height: 100%; max-width: 400px; max-height: 600px; overflow: hidden; position: relative;
}
.container.change-view .list-view { -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.container.change-view .data-view { -webkit-transform: translateX(0); transform: translateX(0);
}
.view { width: 100%; -webkit-overflow-scrolling: touch; position: absolute; top: 0; left: 0; will-change: transform; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.view.list-view { overflow: scroll; position: relative; max-height: 600px; width: 100%;
}
.view.data-view { -webkit-transform: translateX(100%); transform: translateX(100%);
}
.list-item { box-sizing: border-box; border-bottom: 1px solid #CCC; padding: 0 30px; line-height: 50px;
}
.list-item:nth-child(1) { border-top: 1px solid #CCC;
}

Page transition - Script Codes JS Codes

(function(){ 'use strict'; document.addEventListener('DOMContentLoaded', function(){ var openCls = 'change-view', container = document.querySelectorAll('.container')[0], list = document.querySelectorAll('.list-view')[0], back = document.querySelectorAll('.back')[0]; list.addEventListener('click', function(e){ var el = e.target; if(e.target.tagName=='LI'){ transition(); } }, false); back.addEventListener('click', function(e){ transition(); }, false); function transition(){ var isOpened = container.classList.contains(openCls); if(isOpened){ container.classList.remove(openCls); }else{ container.classList.add(openCls); } } });
})();
Page transition - Script Codes
Page transition - Script Codes
Home Page Home
Developer Tomoyuki Kashiro
Username Tkashiro
Uploaded January 19, 2023
Rating 3
Size 2,767 Kb
Views 8,096
Do you need developer help for Page transition?

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!

Tomoyuki Kashiro (Tkashiro) Script Codes
Name
Mostly fluid
CSS Slideshow
Spotlight Effect
Shadow Dom Test
Css resolution
Manage Async Animation by using jQuery.DeferredPipeline
Auto complete
3 lines menu button
Responsive image srcset
Quick sort algorithm in JavaScrip
Create amazing SEO content 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!