Apple iPhone 5s style scrolling

Developer
Rosh Jutherford
Size
4,740 Kb
Views
20,230

How do I make an apple iphone 5s style scrolling?

I was trying to implement scrolling like that shown Here for a project. Turns out cross-browser scrollwheel handling is pretty tricky (especially in firefox). Found the code for the global listener method Here. Feel free to use in your own projects if you want :) . What is a apple iphone 5s style scrolling? How do you make a apple iphone 5s style scrolling? This script and codes were developed by Rosh Jutherford on 04 September 2022, Sunday.

Apple iPhone 5s style scrolling Previews
IQ Test

Apple iPhone 5s style scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apple iPhone 5s style scrolling</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
html,body,#wrapper,.header, .header p, #main,#main div,#main div p { width: 100%;
}
html,body,#wrapper, .header p { height: 100%;
}
html{ font-family: "Helvetica Neue"; font-weight: 100;
}
#main { height: 500%; z-index: 9; transition: transform 1s ease;
}
#wrapper { float: left; z-index: 10; overflow: hidden;
}
#main div { height: 20%; text-align: center; transform: translateZ(0); background-position: center center; background-repeat: no-repeat; background-size:cover;
}
#main div p { margin: auto; height: 100px; top: 0; bottom: 0; position: absolute; font-size: 78px; line-height: 100px;
}
.header { height: 70px; position: fixed; top:0; z-index:10; background: #ffffff; background: rgba(255,255,255,0.5);
}
.header p { text-align: center; font-size: 22px; line-height: 70px;
}
.one { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mqq4l2H3Fh1st5lhmo1_1280.jpg);
}
.two { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mr80snx79b1st5lhmo1_1280.jpg);
}
.three { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mrraat0H431st5lhmo1_1280.jpg);
}
.four { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mrraktQTCS1st5lhmo1_1280.jpg);
}
.five { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_msuei3sMTo1st5lhmo1_1280.jpg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="wrapper"> <div class="header"> <p>This is a header</p> </div>	<div id="main">	<div class="one">	<p>one</p>	</div>	<div class="two">	<p>two</p>	</div>	<div class="three">	<p>three</p>	</div>	<div class="four">	<p>four</p>	</div>	<div class="five">	<p>five</p>	</div>	</div><!--#main-->	</div><!--#wrapper--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s.cdpn.io/25381/jquery.touchSwipe.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Apple iPhone 5s style scrolling - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,body,#wrapper,.header, .header p, #main,#main div,#main div p { width: 100%;
}
html,body,#wrapper, .header p { height: 100%;
}
html{ font-family: "Helvetica Neue"; font-weight: 100;
}
#main { height: 500%; z-index: 9; transition: transform 1s ease;
}
#wrapper { float: left; z-index: 10; overflow: hidden;
}
#main div { height: 20%; text-align: center; transform: translateZ(0); background-position: center center; background-repeat: no-repeat; background-size:cover;
}
#main div p { margin: auto; height: 100px; top: 0; bottom: 0; position: absolute; font-size: 78px; line-height: 100px;
}
.header { height: 70px; position: fixed; top:0; z-index:10; background: #ffffff; background: rgba(255,255,255,0.5);
}
.header p { text-align: center; font-size: 22px; line-height: 70px;
}
.one { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mqq4l2H3Fh1st5lhmo1_1280.jpg);
}
.two { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mr80snx79b1st5lhmo1_1280.jpg);
}
.three { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mrraat0H431st5lhmo1_1280.jpg);
}
.four { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_mrraktQTCS1st5lhmo1_1280.jpg);
}
.five { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/25381/tumblr_msuei3sMTo1st5lhmo1_1280.jpg);
}

Apple iPhone 5s style scrolling - Script Codes JS Codes

// VARIABLES
var counter = 1;
var scrollDirection;
var slides = $('#main div');
var slidesLength = slides.length;
var inTransition = false;
// SCROLL DISTANCES
function scrollAnimate(distance){ inTransition = true; $('#main').css('transform','translate3d(0,' + distance + '%,0)'); setTimeout(function(){ inTransition = false; }, 1300);
};
// SCROLL ANIMATIONS AND LOGIC
function scrollLogic(){ //---------------- DOWN TRANSITIONS ---------------------------- // SLIDE 1 --> SLIDE 2 if( counter == 1 && scrollDirection == "down" ){ scrollAnimate(-20); } // SLIDE 2 --> SLIDE 3 else if( counter == 2 && scrollDirection == "down" ){ scrollAnimate(-40); } // SLIDE 3 --> SLIDE 4 else if( counter == 3 && scrollDirection == "down" ){ scrollAnimate(-60); } // SLIDE 3 --> SLIDE 4 else if( counter == 4 && scrollDirection == "down" ){ scrollAnimate(-80); } //---------------- UP TRANSITIONS ---------------------------- // SLIDE 5 --> SLIDE 4 else if( counter == 5 && scrollDirection == "up" ){ scrollAnimate(-60); } // SLIDE 4 --> SLIDE 3 else if( counter == 4 && scrollDirection == "up" ){ scrollAnimate(-40); } // SLIDE 3 --> SLIDE 2 else if( counter == 3 && scrollDirection == "up" ){ scrollAnimate(-20); } // SLIDE 2 --> SLIDE 1 else if( counter == 2 && scrollDirection == "up" ){ scrollAnimate(0); } else{ inTransition = false; }; //---------------- UPDATE COUNTER ---------------------------- if( scrollDirection == "down" && counter < slidesLength ){ counter++; } else if( scrollDirection == "up" && counter > 1 ){ counter--; };
};
// creates a global "addWheelListener" method
(function(window,document) { var prefix = "", _addEventListener, onwheel, support; // detect event model if ( window.addEventListener ) { _addEventListener = "addEventListener"; } else { _addEventListener = "attachEvent"; prefix = "on"; } // detect available wheel event support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel" "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox window.addWheelListener = function( elem, callback, useCapture ) { _addWheelListener( elem, support, callback, useCapture ); // handle MozMousePixelScroll in older Firefox if( support == "DOMMouseScroll" ) { _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture ); } }; function _addWheelListener( elem, eventName, callback, useCapture ) { elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) { !originalEvent && ( originalEvent = window.event ); // create a normalized event object var event = { // keep a ref to the original event object originalEvent: originalEvent, target: originalEvent.target || originalEvent.srcElement, type: "wheel", deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1, deltaX: 0, delatZ: 0, preventDefault: function() { originalEvent.preventDefault ? originalEvent.preventDefault() : originalEvent.returnValue = false; } }; // calculate deltaY (and deltaX) according to the event if ( support == "mousewheel" ) { event.deltaY = - 1/40 * originalEvent.wheelDelta; // Webkit also support wheelDeltaX originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX ); } else { event.deltaY = originalEvent.detail; } // it's time to fire the callback return callback( event ); }, useCapture || false ); }
})(window,document);
// LISTEN FOR WHEEL SCROLL
addWheelListener( document.body, function(e) { if (inTransition){ return; }; // DETERMINE WHEEL scrollDirection if (e.deltaY > 0){ scrollDirection = "down"; } else if (e.deltaY < 0) { scrollDirection = "up"; }; scrollLogic();
});
// KeyStroke Support
$(window).keydown(function(e){ if (e.keyCode == 38){ scrollDirection = "up"; } else if (e.keyCode == 40){ scrollDirection = "down"; } else if (e.keyCode == 39){ scrollDirection = "down"; } else if (e.keyCode = 37){ scrollDirection = "up"; } else { return; }; scrollLogic();
});
// Swipe Support
$('#wrapper').swipe({ swipe:function(event, direction, distance, duration, fingerCount){ if (direction == "up"){ scrollDirection = "down"; } else if (direction == "down"){ scrollDirection = "up"; }; scrollLogic(); }, threshold:100
});
Apple iPhone 5s style scrolling - Script Codes
Apple iPhone 5s style scrolling - Script Codes
Home Page Home
Developer Rosh Jutherford
Username the_ruther4d
Uploaded September 04, 2022
Rating 4.5
Size 4,740 Kb
Views 20,230
Do you need developer help for Apple iPhone 5s style scrolling?

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!

Rosh Jutherford (the_ruther4d) Script Codes
Name
Flat Range Sliders
Share toggles
Kinetic Mark by Philip Thepkaysone
Finn by Meg Robichaud
Twisted
Rubee
Apple TV style hover
Flat Logo by Henrik Dahlheim
RvV 2
Pre-loader 1 by Chris Hall
Create amazing love letters 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!