Front-end development-rolling screen (no vertical scroll bars)

Front-end development-rolling screen (no vertical scroll bars)

1. frontend process:

1) Demand Analysis

2) prototype diagram (subsistence allowances)-Product Manager/DESIGNER/Planning

3) do

4) code implementation

2. Excellent website appreciation:

1) Baidu wallet a penny exclusive: https://1.baidu.com/

2) tmanager http://www.weixint.com/

3) qq pc version of http://im.qq.com/pcqq/

4) 360 browser welcome page http://se.360.cn/wel/welcome.html

3. Use HTML5 + CSS3 for full screen (Design)

1) The General width is 1366px. If the resolution is 1920, make the width adaptive; the height is generally made into 768px or 700px.

2) create a canvas in PS or Fireworks (1366px in width, 700px in height, 72 in resolution, RGB in color mode, and white in background) --> top 1366 * 60px navigation (generally 60 in height, see the prototype Diagram for details. "logo" is displayed on the navigation bar. (if there is no logo, you can directly tap the font "Logo" or other content that can indicate the meaning) and font-the selected item or the current item is given a background color (draw a rectangle) -- Put the font content in the prototype Diagram -- use a rectangle as the Button (put all the content in the design diagram)

3) Find the Logo image and replace it. If there is no logo with a transparent background, image processing is required. The navigation font is 20px (depending on the situation) -- The font is ""

4) set the font Spacing on the navigation bar: enter a proper space between the first two. Double-click the selected space. Copy the space to another font.

5) layer group -- fill the background color on the page -- create a layer and perform gradient processing on the background -- combine the layers and convert them to a smart object (right-click in PS) -- filter -- pixel-based/Lattice-based (depending on the situation) -- edit filter (smart filter can be edited, and ordinary layer objects cannot be modified) -- "mask processing (soft filter effect) --" font center alignment

4. Benefits of Flattening:

1) high efficiency (applicable to different resolutions)

2) Easy to modify

3) Easy Coding

5. Processing of numbers:

The visual impact of the 10000.00 statement is much higher than that of the 10 thousand statement. (Of course, if it is a commodity discount, the opposite is true, depending on the specific situation, there will be different visual effects)

6. Internet design classification:

 

7. Features of rolling screen:

1) No vertical scroll bar

2) usually full screen Switching

3) Switch through the scroll wheel

4) Each screen has a cut-in and cut-out animation (which can also be understood as fade-in and fade-out)

5) Each screen has elements that can interact with each other.

8. mouse wheel event capture plug-in:

Download jquery.mousewheel.min.jsplug-in at http://plugins.jquery.com /--#

How to Write a scroll event:

Running Effect: (view console)

9. Two Parameters of the mousewheel method:<Script type = > $ (Document). ready (function (){ // Page Ready Run $ (Document). mousewheel (function (event, delta ){ // When you scroll the scroll wheel, execute the following content. // Console. log (" Testing mouse scroll "); // Console. log (event );// View Event Values Console. log (event. pageX, event. pageY ); // Scroll down and Output -1 , Roll up, output 1 Console. log (delta ); // View Delta Output }) ;}); </Script>

 

10. Note: When the scroll wheel is clicked, the value is-1 and the value is 1.

11. if statement deadlock:

Running effect:

How can this problem be solved?

Running effect:

12. The box (Block-level element) in the standard stream. If no width is specified, the default width is 100% of the parent box. If the width is removed from the standard stream, this feature is no longer available.

Several Methods to exit the standard stream:

1) position: absolute;

2) position: fixed;

3) float: left;

13. Buffer:

Download JQuery. easie. js plug-in, http://jaukia.github.io/easie/

Reference JQuery. easie. js and add the selected content:

14. Function throttling

Function throttling, in short, means that a function cannot be called continuously at a very short interval. It is only after the execution of the functions passes the specified interval, can be called next time.

(Reference: http://www.bkjia.com/kf/201604/498455.html)

The solution to function Throttling is to set a timer.

15. fireworks is convenient for slicing.

When opening the psd file with fireworks, select "maintain the appearance of the Photoshop layer" -- open the psd file -- copy the layer -- create -- paste -- Export

16. Color Block rolling screen:

"En"> "UTF-8"> <Script src = > </Script> <script src = > </Script> <script src = > </Script> <script type = > $ (Document). ready (function () {var currentPage = 0; // Current page count Var lock = true; // Function throttling, a given variable $ (Document ). mousewheel (function (e, delta) {if (lock) {currentPage = currentPage-delta; if (currentPage <0) {currentPage = 0;} if (currentPage> 4) {currentPage = 4;} console. log (currentPage ); // Let Container Animation $ (". Container"). animate ({"top": currentPage *-100 + "%" // Pass negative 100% To obtain other screen content. }, 300 // Time , "EasieEaseOutCubic" // Add Easie. js Add the sports method name after the class library ); // Function throttling Lock = false; // Set a timer. When the time reaches, Lock Restore True SetTimeout (function () {lock = true;}, 1000) ;}); </script> "container"> "Page page0"> 0 "page page1"> 1 "page page2"> 2 "page page3"> 3 "page page4"> 4

Running Effect: (scroll to the second page)

17. To replace the color block with the background image:

. Page {
Width: 100%;/* Percentage reference is always the parent box */
Height: 100%;/* The page height is of the container, so view the height of the container */
Background: url ("images/page0_bg.jpg") no-repeat;
Background-size: cover;/* Stretch to box size */
}

 

Running effect: