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 |
Kinetic Mark by Philip Thepkaysone | 2,504 Kb |
Flat Logo by Henrik Dahlheim | 2,580 Kb |
CSS Fine Art | 5,996 Kb |
Finn by Meg Robichaud | 5,370 Kb |
IOS7 Icon | 2,313 Kb |
Game-Style Header | 4,486 Kb |
Pre-loader 1 by Chris Hall | 2,658 Kb |
Twisted | 3,216 Kb |
Download Button | 4,308 Kb |
Parallax Canvas Gallery | 12,954 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 |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Resize image | Happyhj | 1,892 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Ghost | Mghayour | 11,738 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!