Full-screen scrolling instance code using Javascript

This article mainly introduces information about Javascript code for full-screen scrolling instances. For details, refer to Javascript full-screen scrolling.

Follow the instructions in fullPage. js and use your own ideas.

Effects: 1. Full Screen scrolling. If you scroll the gear, the full screen will be rolled.

2. Adaptive Scaling: No matter how you change the size of the window, you can use an element to fill the full screen.

Next plan:

1. Change to react component

2. Achieve More results

The annotations are clearly written. You can basically understand how to use the functions. It's easy to think about it.

Here, I am lazy using a previously written motion frame (actually a function), which can be used with a slight modification. Framework related: click here

The comment is very detailed, so I won't talk about anything else. Directly run the Code:

  
   Index  
1
  
2
  
3
Script // Add a rolling listening document. addEventListener ('mousewheel ', wheel, false); // checks whether a scroll is complete var isComplete = true; // hides the scroll bar document. body. style. overflow = 'den den '; // obtain the scrolling element var fullList = document. getElementsByClassName ("full"); // because it is a class Array object, not an Array object, you can only call the Array by calling. prototype. forEach. call (fullList, function (value) {// obtain the high value of a webpage full screen. style. height = window. innerHeight + 'px ';}) // if the window size changes, the executed function window. onresize = fu Nction () {Array. prototype. forEach. call (fullList, function (value) {value. style. height = window. innerHeight + 'px ';}); // After the window size is changed, it should still be an element full screen if (document. body. scrollTop % window. innerHeight) {isComplete = false; // judge the scroll position based on rounding let tmp = Math. round (document. body. scrollTop/window. innerHeight) * window. innerHeight; // use the motion frame showAnimate (document. body, {'scrolltop ': tmp}, function () {isComplete = true ;}); }; // Rolling function wheel (e) {// wait until the previous scroll is complete if (isComplete) {// isComplete = false when the scroll is complete; // determine whether to scroll up or down if (e. wheelDelta <0) {// click let arrivePoint = document. body. scrollTop + window. innerHeight; // maximum scroll point let maxBottom = document. body. offsetHeight-window. innerHeight; // if the maximum scroll point is exceeded, the value is assigned to the maximum scroll point arrivePoint = arrivePoint> maxBottom? MaxBottom: arrivePoint; showAnimate (document. body, {'scrolltop': arrivePoint}, function () {isComplete = true ;});} else {let arrivePoint = document. body. scrollTop-window. innerHeight; // The Minimum Rolling point is 0 arrivePoint = arrivePoint <0? 0: arrivePoint; showAnimate (document. body, {'scrolltop ': arrivePoint}, function () {isComplete = true ;}}}/*** function: Execute an animation * to accept parameters: obj (DOM element to be moved) * json (set of attributes to be changed, in json format) * fn (callback function) */function showAnimate (obj, json, fn) {clearInterval (obj. timer); // indicates whether the motion has been stopped var flag = true; obj. timer = setInterval (function () {// cyclic json for (var I in json) {if (I = 'opacity ') {// gets the transparency value, round to remove the decimal point var icur = Math. round (pa RseFloat (getStyle (obj, I) * 100);} else {// get the attribute value var icur = parseInt (getStyle (obj, I) | obj [I];} // buffer motion, speed changes var speed = (json [I]-icur)/10 at any time; // you must write it in the timer, there will be unexpected consequences when writing it out. speed = speed> 0? Math. ceil (speed): Math. floor (speed); // The speed is rounded up or down to prevent the over position from being reached. // if one of the nodes does not reach the end, it is false if (json [I]! = Icur) {flag = false;} else {flag = true;} if (I = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (icur + speed) +') '; // IE compatible with obj. style. opacity = (icur + speed)/100;} else if (obj [I] | obj [I] = 0) {obj [I] = icur + speed ;} else {obj. style [I] = icur + speed + 'px ';} console. log (icur + ''+ json [I]);} // check whether all movements have been stopped if (flag) {clearInterval (obj. timer); if (fn) {fn () ;}}, 13) ;}/ *** function: return the style property value * accept parameter: obj (DOM element to obtain the attribute) * attr (name of the attribute to be obtained) */function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr]; // IE compatible} else {return getComputedStyle (obj, false) [attr];} script

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!

For more articles about Javascript full-screen scrolling instance code, refer to the PHP Chinese website!