Swipe as the home screen.

Developer
Alan Mok | Aki Isamu
Size
10,384 Kb
Views
36,432
  1. Swipe as the home screen. Previews
  2. Swipe as the home screen. HTML Codes
  3. Swipe as the home screen. CSS Codes
  4. Swipe as the home screen. JS Codes

How do I make an swipe as the home screen.?

What is a swipe as the home screen.? How do you make a swipe as the home screen.? This script and codes were developed by Alan Mok | Aki Isamu on 28 July 2022, Thursday.

Swipe as the home screen. Previews
IQ Test

Swipe as the home screen. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>swipe as the home screen.</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="page"> <div id="pageInner" class="container homeContainer"> <div id="cultureBlock" class="contentCB"> <div class="container"> <h3>文化</h3> <p>　　塗鴉亦為藝術的一種，蘊含著豐富的藝術文化，有時候亦帶有政治訴求、宗教意味或是商業宣傳等。藉由理解塗鴉的文化、各種塗鴉的風格，並認識不同地方的塗鴉，瞭解它的好壞處與用處。</p> </div> </div> <div id="historyBlock" class="contentCB"> <div class="container"> <h3>初期發展</h3> <p>　　現代塗鴉風格的起源不悠久，所有事都是從六十年代末時紐約一位年輕人「TAKI 183」想要標記下自己到過的地方和搭過的車而到處「塗鴉」上自己的名字而開始……</p> </div> </div> <div id="artistBlock" class="contentCB"> <div class="container"> <h3>塗鴉藝術家</h3> <p>　　有不少藝術家從事塗鴉藝術的工作，每位藝術家都是自己獨具一別的塗鴉風格，更有一些著名塗鴉藝術家的塗鴉風格受到不少人的支持…… </p> </div> </div> <div id="hotspotBlock" class="contentCB"> <div class="container"> <h3>塗鴉熱點</h3> <p>　　塗鴉其實全世界都會有，但是知名塗鴉藝術家會到訪作畫的地方卻不多。另外，世界上也有一些像包厘街和休斯頓牆(Bowery & Houston wall)這種著名的塗鴉專用牆。</p> </div> </div> </div> <div id="mobileBgPoint" class="points"></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>

Swipe as the home screen. - Script Codes CSS Codes

html, body,
.swipy,
.swipy > .container,
.swipy > .container > .pane { position: relative; height: 100%; padding: 0; margin: 0;
}
.swipy { overflow-x: hidden; width: 100%; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -webkit-transform-style: preserve-3d;
}
.swipy.anime > *,
.swipy.anime .points > .pointContainer > .point { -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.swipy > .container { -moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1); -ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1); -webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1); transform: translate3d(0%, 0, 0) scale3d(1, 1, 1); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; position: relative; overflow: hidden;
}
.swipy > .container > .pane { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); overflow: hidden; float: left;
}
.swipy .points { text-align: center; position: absolute; bottom: 0; height: 5px; right: 0; left: 0;
}
.swipy .points > ul { position: relative; list-style: none; display: block; margin: 0 auto; height: 5px; width: 100%; padding: 0; opacity: .5; display: none;
}
.swipy .points > ul > li { background: #444444; background: rgba(68, 68, 68, 0.5); position: relative; display: block; height: 10px; float: left; width: auto; margin: 0; top: 0;
}
.swipy .points > .pointContainer { background: rgba(68, 68, 68, 0.375); position: absolute; display: block; height: 5px; width: 100%; bottom: 0; left: 0;
}
.swipy .points > .pointContainer > .point { background: #444444; position: absolute; display: block; height: 100%; width: auto; margin: 0;
}
#page .contentCB > .container { margin: 30px;
}

Swipe as the home screen. - Script Codes JS Codes

/*! Hammer.JS - v1.1.3 - 2014-05-22 * http://eightmedia.github.io/hammer.js * * Copyright (c) 2014 Jorik Tangelder <[email protected]>; * Licensed under the MIT license */
!function(a,b){"use strict";function c(){d.READY||(s.determineEventTypes(),r.each(d.gestures,function(a){u.register(a)}),s.onTouch(d.DOCUMENT,n,u.detect),s.onTouch(d.DOCUMENT,o,u.detect),d.READY=!0)}var d=function v(a,b){return new v.Instance(a,b||{})};d.VERSION="1.1.3",d.defaults={behavior:{userSelect:"none",touchAction:"pan-y",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},d.DOCUMENT=document,d.HAS_POINTEREVENTS=navigator.pointerEnabled||navigator.msPointerEnabled,d.HAS_TOUCHEVENTS="ontouchstart"in a,d.IS_MOBILE=/mobile|tablet|ip(ad|hone|od)|android|silk/i.test(navigator.userAgent),d.NO_MOUSEEVENTS=d.HAS_TOUCHEVENTS&&d.IS_MOBILE||d.HAS_POINTEREVENTS,d.CALCULATE_INTERVAL=25;var e={},f=d.DIRECTION_DOWN="down",g=d.DIRECTION_LEFT="left",h=d.DIRECTION_UP="up",i=d.DIRECTION_RIGHT="right",j=d.POINTER_MOUSE="mouse",k=d.POINTER_TOUCH="touch",l=d.POINTER_PEN="pen",m=d.EVENT_START="start",n=d.EVENT_MOVE="move",o=d.EVENT_END="end",p=d.EVENT_RELEASE="release",q=d.EVENT_TOUCH="touch";d.READY=!1,d.plugins=d.plugins||{},d.gestures=d.gestures||{};var r=d.utils={extend:function(a,c,d){for(var e in c)!c.hasOwnProperty(e)||a[e]!==b&&d||(a[e]=c[e]);return a},on:function(a,b,c){a.addEventListener(b,c,!1)},off:function(a,b,c){a.removeEventListener(b,c,!1)},each:function(a,c,d){var e,f;if("forEach"in a)a.forEach(c,d);else if(a.length!==b){for(e=0,f=a.length;f>e;e++)if(c.call(d,a[e],e,a)===!1)return}else for(e in a)if(a.hasOwnProperty(e)&&c.call(d,a[e],e,a)===!1)return},inStr:function(a,b){return a.indexOf(b)>-1},inArray:function(a,b){if(a.indexOf){var c=a.indexOf(b);return-1===c?!1:c}for(var d=0,e=a.length;e>d;d++)if(a[d]===b)return d;return!1},toArray:function(a){return Array.prototype.slice.call(a,0)},hasParent:function(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1},getCenter:function(a){var b=[],c=[],d=[],e=[],f=Math.min,g=Math.max;return 1===a.length?{pageX:a[0].pageX,pageY:a[0].pageY,clientX:a[0].clientX,clientY:a[0].clientY}:(r.each(a,function(a){b.push(a.pageX),c.push(a.pageY),d.push(a.clientX),e.push(a.clientY)}),{pageX:(f.apply(Math,b)+g.apply(Math,b))/2,pageY:(f.apply(Math,c)+g.apply(Math,c))/2,clientX:(f.apply(Math,d)+g.apply(Math,d))/2,clientY:(f.apply(Math,e)+g.apply(Math,e))/2})},getVelocity:function(a,b,c){return{x:Math.abs(b/a)||0,y:Math.abs(c/a)||0}},getAngle:function(a,b){var c=b.clientX-a.clientX,d=b.clientY-a.clientY;return 180*Math.atan2(d,c)/Math.PI},getDirection:function(a,b){var c=Math.abs(a.clientX-b.clientX),d=Math.abs(a.clientY-b.clientY);return c>=d?a.clientX-b.clientX>0?g:i:a.clientY-b.clientY>0?h:f},getDistance:function(a,b){var c=b.clientX-a.clientX,d=b.clientY-a.clientY;return Math.sqrt(c*c+d*d)},getScale:function(a,b){return a.length>=2&&b.length>=2?this.getDistance(b[0],b[1])/this.getDistance(a[0],a[1]):1},getRotation:function(a,b){return a.length>=2&&b.length>=2?this.getAngle(b[1],b[0])-this.getAngle(a[1],a[0]):0},isVertical:function(a){return a==h||a==f},setPrefixedCss:function(a,b,c,d){var e=["","Webkit","Moz","O","ms"];b=r.toCamelCase(b);for(var f=0;f<e.length;f++){var g=b;if(e[f]&&(g=e[f]+g.slice(0,1).toUpperCase()+g.slice(1)),g in a.style){a.style[g]=(null==d||d)&&c||"";break}}},toggleBehavior:function(a,b,c){if(b&&a&&a.style){r.each(b,function(b,d){r.setPrefixedCss(a,d,b,c)});var d=c&&function(){return!1};"none"==b.userSelect&&(a.onselectstart=d),"none"==b.userDrag&&(a.ondragstart=d)}},toCamelCase:function(a){return a.replace(/[_-]([a-z])/g,function(a){return a[1].toUpperCase()})}},s=d.event={preventMouseEvents:!1,started:!1,shouldDetect:!1,on:function(a,b,c,d){var e=b.split(" ");r.each(e,function(b){r.on(a,b,c),d&&d(b)})},off:function(a,b,c,d){var e=b.split(" ");r.each(e,function(b){r.off(a,b,c),d&&d(b)})},onTouch:function(a,b,c){var f=this,g=function(e){var g,h=e.type.toLowerCase(),i=d.HAS_POINTEREVENTS,j=r.inStr(h,"mouse");j&&f.preventMouseEvents||(j&&b==m&&0===e.button?(f.preventMouseEvents=!1,f.shouldDetect=!0):i&&b==m?f.shouldDetect=1===e.buttons||t.matchType(k,e):j||b!=m||(f.preventMouseEvents=!0,f.shouldDetect=!0),i&&b!=o&&t.updatePointer(b,e),f.shouldDetect&&(g=f.doDetect.call(f,e,b,a,c)),g==o&&(f.preventMouseEvents=!1,f.shouldDetect=!1,t.reset()),i&&b==o&&t.updatePointer(b,e))};return this.on(a,e[b],g),g},doDetect:function(a,b,c,d){var e=this.getTouchList(a,b),f=e.length,g=b,h=e.trigger,i=f;b==m?h=q:b==o&&(h=p,i=e.length-(a.changedTouches?a.changedTouches.length:1)),i>0&&this.started&&(g=n),this.started=!0;var j=this.collectEventData(c,g,e,a);return b!=o&&d.call(u,j),h&&(j.changedLength=i,j.eventType=h,d.call(u,j),j.eventType=g,delete j.changedLength),g==o&&(d.call(u,j),this.started=!1),g},determineEventTypes:function(){var b;return b=d.HAS_POINTEREVENTS?a.PointerEvent?["pointerdown","pointermove","pointerup pointercancel lostpointercapture"]:["MSPointerDown","MSPointerMove","MSPointerUp MSPointerCancel MSLostPointerCapture"]:d.NO_MOUSEEVENTS?["touchstart","touchmove","touchend touchcancel"]:["touchstart mousedown","touchmove mousemove","touchend touchcancel mouseup"],e[m]=b[0],e[n]=b[1],e[o]=b[2],e},getTouchList:function(a,b){if(d.HAS_POINTEREVENTS)return t.getTouchList();if(a.touches){if(b==n)return a.touches;var c=[],e=[].concat(r.toArray(a.touches),r.toArray(a.changedTouches)),f=[];return r.each(e,function(a){r.inArray(c,a.identifier)===!1&&f.push(a),c.push(a.identifier)}),f}return a.identifier=1,[a]},collectEventData:function(a,b,c,d){var e=k;return r.inStr(d.type,"mouse")||t.matchType(j,d)?e=j:t.matchType(l,d)&&(e=l),{center:r.getCenter(c),timeStamp:Date.now(),target:d.target,touches:c,eventType:b,pointerType:e,srcEvent:d,preventDefault:function(){var a=this.srcEvent;a.preventManipulation&&a.preventManipulation(),a.preventDefault&&a.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return u.stopDetect()}}}},t=d.PointerEvent={pointers:{},getTouchList:function(){var a=[];return r.each(this.pointers,function(b){a.push(b)}),a},updatePointer:function(a,b){a==o?delete this.pointers[b.pointerId]:(b.identifier=b.pointerId,this.pointers[b.pointerId]=b)},matchType:function(a,b){if(!b.pointerType)return!1;var c=b.pointerType,d={};return d[j]=c===(b.MSPOINTER_TYPE_MOUSE||j),d[k]=c===(b.MSPOINTER_TYPE_TOUCH||k),d[l]=c===(b.MSPOINTER_TYPE_PEN||l),d[a]},reset:function(){this.pointers={}}},u=d.detection={gestures:[],current:null,previous:null,stopped:!1,startDetect:function(a,b){this.current||(this.stopped=!1,this.current={inst:a,startEvent:r.extend({},b),lastEvent:!1,lastCalcEvent:!1,futureCalcEvent:!1,lastCalcData:{},name:""},this.detect(b))},detect:function(a){if(this.current&&!this.stopped){a=this.extendEventData(a);var b=this.current.inst,c=b.options;return r.each(this.gestures,function(d){!this.stopped&&b.enabled&&c[d.name]&&d.handler.call(d,a,b)},this),this.current&&(this.current.lastEvent=a),a.eventType==o&&this.stopDetect(),a}},stopDetect:function(){this.previous=r.extend({},this.current),this.current=null,this.stopped=!0},getCalculatedData:function(a,b,c,e,f){var g=this.current,h=!1,i=g.lastCalcEvent,j=g.lastCalcData;i&&a.timeStamp-i.timeStamp>d.CALCULATE_INTERVAL&&(b=i.center,c=a.timeStamp-i.timeStamp,e=a.center.clientX-i.center.clientX,f=a.center.clientY-i.center.clientY,h=!0),(a.eventType==q||a.eventType==p)&&(g.futureCalcEvent=a),(!g.lastCalcEvent||h)&&(j.velocity=r.getVelocity(c,e,f),j.angle=r.getAngle(b,a.center),j.direction=r.getDirection(b,a.center),g.lastCalcEvent=g.futureCalcEvent||a,g.futureCalcEvent=a),a.velocityX=j.velocity.x,a.velocityY=j.velocity.y,a.interimAngle=j.angle,a.interimDirection=j.direction},extendEventData:function(a){var b=this.current,c=b.startEvent,d=b.lastEvent||c;(a.eventType==q||a.eventType==p)&&(c.touches=[],r.each(a.touches,function(a){c.touches.push({clientX:a.clientX,clientY:a.clientY})}));var e=a.timeStamp-c.timeStamp,f=a.center.clientX-c.center.clientX,g=a.center.clientY-c.center.clientY;return this.getCalculatedData(a,d.center,e,f,g),r.extend(a,{startEvent:c,deltaTime:e,deltaX:f,deltaY:g,distance:r.getDistance(c.center,a.center),angle:r.getAngle(c.center,a.center),direction:r.getDirection(c.center,a.center),scale:r.getScale(c.touches,a.touches),rotation:r.getRotation(c.touches,a.touches)}),a},register:function(a){var c=a.defaults||{};return c[a.name]===b&&(c[a.name]=!0),r.extend(d.defaults,c,!0),a.index=a.index||1e3,this.gestures.push(a),this.gestures.sort(function(a,b){return a.index<b.index?-1:a.index>b.index?1:0}),this.gestures}};d.Instance=function(a,b){var e=this;c(),this.element=a,this.enabled=!0,r.each(b,function(a,c){delete b[c],b[r.toCamelCase(c)]=a}),this.options=r.extend(r.extend({},d.defaults),b||{}),this.options.behavior&&r.toggleBehavior(this.element,this.options.behavior,!0),this.eventStartHandler=s.onTouch(a,m,function(a){e.enabled&&a.eventType==m?u.startDetect(e,a):a.eventType==q&&u.detect(a)}),this.eventHandlers=[]},d.Instance.prototype={on:function(a,b){var c=this;return s.on(c.element,a,b,function(a){c.eventHandlers.push({gesture:a,handler:b})}),c},off:function(a,b){var c=this;return s.off(c.element,a,b,function(a){var d=r.inArray({gesture:a,handler:b});d!==!1&&c.eventHandlers.splice(d,1)}),c},trigger:function(a,b){b||(b={});var c=d.DOCUMENT.createEvent("Event");c.initEvent(a,!0,!0),c.gesture=b;var e=this.element;return r.hasParent(b.target,e)&&(e=b.target),e.dispatchEvent(c),this},enable:function(a){return this.enabled=a,this},dispose:function(){var a,b;for(r.toggleBehavior(this.element,this.options.behavior,!1),a=-1;b=this.eventHandlers[++a];)r.off(this.element,b.gesture,b.handler);return this.eventHandlers=[],s.off(this.element,e[m],this.eventStartHandler),null}},function(a){function b(b,d){var e=u.current;if(!(d.options.dragMaxTouches>0&&b.touches.length>d.options.dragMaxTouches))switch(b.eventType){case m:c=!1;break;case n:if(b.distance<d.options.dragMinDistance&&e.name!=a)return;var j=e.startEvent.center;if(e.name!=a&&(e.name=a,d.options.dragDistanceCorrection&&b.distance>0)){var k=Math.abs(d.options.dragMinDistance/b.distance);j.pageX+=b.deltaX*k,j.pageY+=b.deltaY*k,j.clientX+=b.deltaX*k,j.clientY+=b.deltaY*k,b=u.extendEventData(b)}(e.lastEvent.dragLockToAxis||d.options.dragLockToAxis&&d.options.dragLockMinDistance<=b.distance)&&(b.dragLockToAxis=!0);var l=e.lastEvent.direction;b.dragLockToAxis&&l!==b.direction&&(b.direction=r.isVertical(l)?b.deltaY<0?h:f:b.deltaX<0?g:i),c||(d.trigger(a+"start",b),c=!0),d.trigger(a,b),d.trigger(a+b.direction,b);var q=r.isVertical(b.direction);(d.options.dragBlockVertical&&q||d.options.dragBlockHorizontal&&!q)&&b.preventDefault();break;case p:c&&b.changedLength<=d.options.dragMaxTouches&&(d.trigger(a+"end",b),c=!1);break;case o:c=!1}}var c=!1;d.gestures.Drag={name:a,index:50,handler:b,defaults:{dragMinDistance:10,dragDistanceCorrection:!0,dragMaxTouches:1,dragBlockHorizontal:!1,dragBlockVertical:!1,dragLockToAxis:!1,dragLockMinDistance:25}}}("drag"),d.gestures.Gesture={name:"gesture",index:1337,handler:function(a,b){b.trigger(this.name,a)}},function(a){function b(b,d){var e=d.options,f=u.current;switch(b.eventType){case m:clearTimeout(c),f.name=a,c=setTimeout(function(){f&&f.name==a&&d.trigger(a,b)},e.holdTimeout);break;case n:b.distance>e.holdThreshold&&clearTimeout(c);break;case p:clearTimeout(c)}}var c;d.gestures.Hold={name:a,index:10,defaults:{holdTimeout:500,holdThreshold:2},handler:b}}("hold"),d.gestures.Release={name:"release",index:1/0,handler:function(a,b){a.eventType==p&&b.trigger(this.name,a)}},d.gestures.Swipe={name:"swipe",index:40,defaults:{swipeMinTouches:1,swipeMaxTouches:1,swipeVelocityX:.6,swipeVelocityY:.6},handler:function(a,b){if(a.eventType==p){var c=a.touches.length,d=b.options;if(c<d.swipeMinTouches||c>d.swipeMaxTouches)return;(a.velocityX>d.swipeVelocityX||a.velocityY>d.swipeVelocityY)&&(b.trigger(this.name,a),b.trigger(this.name+a.direction,a))}}},function(a){function b(b,d){var e,f,g=d.options,h=u.current,i=u.previous;switch(b.eventType){case m:c=!1;break;case n:c=c||b.distance>g.tapMaxDistance;break;case o:!r.inStr(b.srcEvent.type,"cancel")&&b.deltaTime<g.tapMaxTime&&!c&&(e=i&&i.lastEvent&&b.timeStamp-i.lastEvent.timeStamp,f=!1,i&&i.name==a&&e&&e<g.doubleTapInterval&&b.distance<g.doubleTapDistance&&(d.trigger("doubletap",b),f=!0),(!f||g.tapAlways)&&(h.name=a,d.trigger(h.name,b)))}}var c=!1;d.gestures.Tap={name:a,index:100,handler:b,defaults:{tapMaxTime:250,tapMaxDistance:10,tapAlways:!0,doubleTapDistance:20,doubleTapInterval:300}}}("tap"),d.gestures.Touch={name:"touch",index:-1/0,defaults:{preventDefault:!1,preventMouse:!1},handler:function(a,b){return b.options.preventMouse&&a.pointerType==j?void a.stopDetect():(b.options.preventDefault&&a.preventDefault(),void(a.eventType==q&&b.trigger("touch",a)))}},function(a){function b(b,d){switch(b.eventType){case m:c=!1;break;case n:if(b.touches.length<2)return;var e=Math.abs(1-b.scale),f=Math.abs(b.rotation);if(e<d.options.transformMinScale&&f<d.options.transformMinRotation)return;u.current.name=a,c||(d.trigger(a+"start",b),c=!0),d.trigger(a,b),f>d.options.transformMinRotation&&d.trigger("rotate",b),e>d.options.transformMinScale&&(d.trigger("pinch",b),d.trigger("pinch"+(b.scale<1?"in":"out"),b));break;case p:c&&b.changedLength<2&&(d.trigger(a+"end",b),c=!1)}}var c=!1;d.gestures.Transform={name:a,index:45,defaults:{transformMinScale:.01,transformMinRotation:1},handler:b}}("transform"),"function"==typeof define&&define.amd?define(function(){return d}):"undefined"!=typeof module&&module.exports?module.exports=d:a.Hammer=d}(window);
// swipy.js
function swipy(options) {	var self = this;	/* element structure
$element {	> $background {} // *(1)	> $container { // *(1)	> $panes {} // *(n) [ n > 1, or n = 1+m ]	}	> $pointsContainer {} // *(1)
}	*/	var element = $(options.element).addClass("swipy"),	background = $(options.background),	container = $(options.container),	panes = $(options.panes).addClass("pane"),	pane_width = 0,	pane_count = panes.length,	current_pane = 0,	navPointsContainer = $(options.pointsContainer, element),	navPointsList = null,	navPoints = null,	navPointContainer = null,	navPoint = null,	onpanedrag = function(totalFloat, shouldAnimate, paneInfos) {},	hammerObject = null;	/** * initial */	this.init = function() {	setPaneDimensions();	$(window).on("load resize orientationchange", function() {	setPaneDimensions();	});	insertNavPoints();	resizeNavPoints();	$(window).resize(resizeNavPoints);	return self;	};	/** * set the pane dimensions and scale the container */	function setPaneDimensions() {	pane_width = element.width();	panes.each(function() {	$(this).width(pane_width);	});	container.width(pane_width*pane_count);	// prevent nav progress jumps when resize	//self.showPane(current_pane, false);	};	/** * nav point index */	function insertNavPoints() {	var items = "";	for (var i = 1; i <= pane_count; i++)	items += "<li></li>"	//-----	navPointsContainer	.append("<ul></ul>")	navPointsList = navPointsContainer.find("ul");	//-----	navPointsList	.append(items);	navPoints = navPointsList.find("li");	//-----	navPointsContainer	.append("<i class='pointContainer'></i>")	navPointContainer = navPointsContainer.find("i.pointContainer");	//-----	navPointContainer	.append("<i class='point'></i>")	navPoint = navPointContainer.find("i.point");	};	function resizeNavPoints() {	//-----	var npsw = ($(window).width()/pane_count);	navPoints.css({	"width": npsw	});	navPoint.css({	"width": npsw,	"left": 0+"%"	});	};	/** * show pane by index */	this.showPane = function(index, animate) {	console.log(current_pane);	console.log(index);	// between the bounds	index = Math.max(0, Math.min(index, pane_count-1));	current_pane = index;	var offset = -((100/pane_count)*current_pane);	setContainerOffset(offset, animate);	};	/** * set offsets */	function setContainerOffset(offsetPercent, animate) {	var progress = -offsetPercent/100;	var progressPercent = progress*100;	// turn on / off animating	element.removeClass("anime");	if (animate)	element.addClass("anime");	// handle container position	if (Modernizr.csstransforms3d) {	container.css("transform", "translate3d("+ offsetPercent +"%,0,0) scale3d(1,1,1)");	}	else if (Modernizr.csstransforms) {	container.css("transform", "translate("+ offsetPercent +"%,0)");	}	else {	var px = ((pane_width*pane_count) / 100) * offsetPercent;	container.css("left", px+"px");	}	// handle nav point position	navPoint.css({"left": progressPercent +"%"});	if ($("#istrc2fig").length > 0) {	$("#istrc2fig")[(animate?"add":"remove")+"Class"]("anime");	$("#istrc2fig").css({"left": (5+(progress*90)) +"%"});	}	onpanedrag.apply(self, [	offsetPercent/100,	animate,	{	panes: pane_count,	current: current_pane,	eachWidth: pane_width,	totalWidth: pane_count*pane_width	}	]);	}	this.next = function() { return this.showPane(current_pane+1, true); };	this.prev = function() { return this.showPane(current_pane-1, true); };	/** * event handler */	function handleHammer(ev) {	// disable browser scrolling	switch(ev.type) {	case 'dragright':	case 'dragleft':	case 'swipeleft':	case 'swiperight':	ev.gesture.preventDefault();	break;	}	switch(ev.type) {	case 'dragright':	case 'dragleft':	// stick to the finger	var pane_offset = -(100/pane_count)*current_pane;	var drag_offset = ((100/pane_width)*ev.gesture.deltaX) / pane_count;	// slow down at the first and last pane	if((current_pane == 0 && ev.gesture.direction == "right") || (current_pane == pane_count-1 && ev.gesture.direction == "left"))	drag_offset *= .3;	setContainerOffset(drag_offset + pane_offset);	break;	case 'swipeleft':	self.next();	ev.gesture.stopDetect();	break;	case 'swiperight':	self.prev();	ev.gesture.stopDetect();	break;	case 'release':	// more then n(50%) of pane width is moved, navigate	if(Math.abs(ev.gesture.deltaX) > pane_width*0.375)	if(ev.gesture.direction == 'right')	self.prev();	else	self.next();	else	self.showPane(current_pane, true);	break;	}	}	var eventDetected = function(ev) { handleHammer(ev); }	/** * APIs */	this.dragPageWidthFloat = function(float, animate) {	float /= pane_count;	setContainerOffset.apply(this, [(float * 100), animate])	return self;	};	this.getCurrentPane = function(paneIndex) {	return current_pane;	};	this.goToPane = function(paneIndex) {	self.showPane(paneIndex, true);	return self;	};	this.disableEventReact = function() {	eventDetected = function(ev) {};	return self;	};	this.enableEventReact = function() {	eventDetected = function(ev) { handleHammer(ev); };	return self;	};	this.onpanedrag = function(func) {	if (func instanceof Function)	onpanedrag = func;	return self;	};	this.unswipy = function() {	hammerObject.off("release dragleft dragright swipeleft swiperight", eventDetected);	return self;	};	hammerObject = new Hammer(element[0], { dragLockToAxis: true }).on("release dragleft dragright swipeleft swiperight", eventDetected);
}
window.swipy = swipy;
(window.swipyPage = new window.swipy({ element: $("#page"), background: $("#mobileBgLayer"), container: $("> .container", "#page"), panes: $("> .container > .contentCB", "#page"), pointsContainer: $("> .points", "#page")
})).init();
Swipe as the home screen. - Script Codes
Swipe as the home screen. - Script Codes
Home Page Home
Developer Alan Mok | Aki Isamu
Username mok20123
Uploaded July 28, 2022
Rating 3
Size 10,384 Kb
Views 36,432
Do you need developer help for Swipe as the home screen.?

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!

Alan Mok | Aki Isamu (mok20123) Script Codes
Name
No Game No Life Logo Animation
ParseURLParams js
ContextMenu.js
Div Gallery
Mok20123 Logo Animation
Logo Animation
Search interface
ImageGallery.js, a map img gallery adapter
Timeline, description
Useless - HK Cyberport location
Create amazing blog posts 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!