Mobile web sliding screen frame sharing_html/css_WEB-ITnose
The sliding screen effect is very popular now in H5 pages, especially in the WeChat browser window. Almost many promotion activities use the up and down sliding screen. At the beginning, I worked with front-end colleagues to write The sliding screen effect took a lot of time, and the written page had many pitfalls in browser compatibility, so I decisively adopted the framework.
The first time I came into contact was with the iscroll4.js framework. After all, it is relatively mature and makes people feel at ease when using it. Unfortunately, its compatibility with the scrolling effect in android2.3 is not very good. There is another The disadvantage is that this framework has 25K, and it is not cost-effective to load 25K of code for a sliding screen effect~
Later, I found 2 simpler ones (lightweight, less bugs), which I recommend to everyone. Students in need should not miss it.
(Some students will ask: Why not use left and right swiping? One of the reasons is that in WeChat browser, sliding the screen to the right may cause the user to exit the current page by mistake)
Below Give 2 examples of swiping up and down~
Example 1, simple swipe up and down
Example 2, simple swipe up and down, with animation attached~
There are generally two ways to design a sliding screen frame
Control the parent Container method
slides the page up and down by controlling the transform of the parent element: translateY or margin-top or top value. The value of each displacement is the current page height~
The slip framework is used here. The library size is 5.75K. It is very lightweight and can be used in your project~
The page style of the slip framework needs to be customized, but I have simply written it here~
(If you don’t use a framework, it is recommended to use transform: translate(X,Y). First, transform: translate can design high-performance animations. Secondly, it is compatible with android2.3 system. Transform: translateY is not compatible with android2.3. system)
Compatible with ios5 and android2.3 systems, its sliding screen function is responsive~ If you only need to design a simple sliding screen effect, you can consider it~
Slip frame more Detailed functionality click here https://github.com/binnng/slip.js
Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>slip</title><style>*{padding: 0;margin: 0;}/*框架*/.swipe-wrap{width: 100%;height: 100%;position: relative;overflow: hidden;}.swipe{position:absolute;width:100%;}.swipe-box{width: 100%;overflow: hidden;}</style></head><body> <div class="swipe-wrap" id="slip"> <article class="swipe"> <div class="swipe-box" style=""> 第1屏 </div> <div class="swipe-box" style=""> 第2屏 </div> <div class="swipe-box" style=""> 第3屏 </div> <div class="swipe-box" style=""> 第4屏 </div> </article></div></body><script type="text/javascript" src="js/slip.min.js"></script><script type="text/javascript">var container = document.getElementById('slip');var pages = document.querySelectorAll('.swipe-box');var slip = Slip(container, 'y').webapp(pages);</script></html>
Download demo
Control sub-container method
The method is to only display one of the child elements and hide the others. When sliding the screen, the current element is hidden and the next sibling element of the current element is displayed. approximately ios5 and android2.3 systems have a sliding screen function with rich effects, supporting animation effects such as zooming, rotation, transparency, automatic sliding, etc. If you need to design a wonderful sliding screen effect, you can consider it~
For more detailed features of fullPage framework click here https://github.com/powy1993/fullpage
Code:
Download demo
Reprinted from White Oak:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>fullPage</title><style>*{padding: 0;margin: 0;}/*框架*/body{overflow: hidden;}.page-wrap{overflow:hidden}.page{display:none;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.contain{width:100%;height:100%;display:none;position:relative;z-index:0}.current .contain,.slide .contain{display:block}.current{display:block;z-index:1}.slide{display:block;z-index:2}.swipe{display:block;z-index:3;transition-duration:0ms!important;-webkit-transition-duration:0ms!important}</style></head><!--[if lte IE 7]> <body scroll="no"> <![endif]--><!--[if gt IE 7]><!--> <body> <!--<![endif]--><!-- 框架[[ --><div id="pageContain" class="page-wrap"> <div class="page page1 current" style=""> <div class="contain"> 第一屏 </div> </div> <div class="page page2" style=""> <div class="contain"> 第二屏 </div> </div> <div class="page page3" style=""> <div class="contain"> 第三屏 </div> </div> <div class="page page4" style=""> <div class="contain"> 第四屏 </div> </div></div><!-- 框架]] --></body><script type="text/javascript" src="js/fullPage.min.js"></script><script type="text/javascript">//禁止窗口的默认滑动document.ontouchmove = function(e){ e.preventDefault();}//框架var runPage, interval, autoPlay;autoPlay = function(to) { clearTimeout(interval); interval = setTimeout(function() { runPage.go(to); }, 5000);}runPage = new FullPage({ id : 'pageContain', // id of contain slideTime : 800, // time of slide continuous : true, // create an infinite feel with no endpoints effect : { // slide effect transform : { translate : 'Y', // 'X'|'Y'|'XY'|'none' scale : [1, 1], // [scalefrom, scaleto] rotate : [0, 0] // [rotatefrom, rotateto] }, opacity : [0, 1] // [opacityfrom, opacityto] }, mode : 'wheel,touch', // mode of fullpage easing : 'ease', // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] ) // callback : function(index, thisPage) { // index = index + 1 > 3 ? 0 : index + 1; // autoPlay(index); // }});// interval = setTimeout(function() {// runPage.go(runPage.thisPage() + 1);// }, 5000);</script></html>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
