Apple iPhone 5s style scrolling
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 - 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
});
Developer | Rosh Jutherford |
Username | the_ruther4d |
Uploaded | September 04, 2022 |
Rating | 4.5 |
Size | 4,740 Kb |
Views | 20,240 |
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!
Name | Size |
Flat Logo by Henrik Dahlheim | 2,580 Kb |
Responsive CSS Menu | 2,559 Kb |
Game-Style Header | 4,486 Kb |
Finn by Meg Robichaud | 5,370 Kb |
Share toggles | 3,574 Kb |
Pre-loader 1 by Chris Hall | 2,658 Kb |
Apple TV style hover | 5,419 Kb |
Flame by Kenji Droullard | 3,359 Kb |
Kinetic Mark by Philip Thepkaysone | 2,504 Kb |
Download Button | 4,308 Kb |
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!
Name | Username | Size |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!