Some thoughts on the web design competition

Another year of Science and Technology festival, because last year to participate in a more boring game, took a not to take the prize. This year I want to go to a slightly more interesting game, with my own efforts to get a prize. (Digression, Adeekul is the classmate to participate in the CTF competition, I began to think that my personal ability does not dare and his team (mainly afraid of me too pit), the result I helped them solve the two front-end problems, they got a second prize ... ）

Said the business, contact HTML and CSS is a long-ago thing, but JS is still just getting started, before useful bootstrap a blog (not finished). Teammates want to be all of their own to write, but also to give themselves a practiced hand opportunity. This is as a senior said, with the template is the early simple, the back of their own to modify it is very difficult, and their own writing, the back of the changes will save a lot of Kung Fu. There is always nothing wrong with trying to hold on, we started to write this page. The title of the contest is to help some of the school's community to make a homepage, we then selected a newly established society-astronomy Society. Teammates just put forward this idea, my mind has a feeling very good idea, after all, astronomy can make people think of the stars, and the background of the stars should be able to catch people's eye of the perfect thing. Canvas is a new label for HTML5, and I think it might be appropriate to use canvas to make this effect.

This is the first version of this.

The first issue encountered in the first version of the same is written in the usual situation of JS problem, that is, compatibility issues. There are different ways to represent a mouse move event on a different browser. Because it is just beginning to learn, I first imitate is the online writing, but my browser is not compatible with his code, so I have baidu,google for a long time, finally went to find the official API still did not find, in fact, the problem is on the object of monitoring, We set the background of the z-index should be the bottom, and if the monitoring object selected as canvas, the mouse movement does not occur on the canvas, and then I casually changed, instead of window finally got the effect. This effect and my original idea is similar, I wrote to my classmates, let him evaluate, who knows he blow, said this dynamic is very unsightly. I am not convinced, I worked hard to get so long, but was said to be so, the moment is really unacceptable. But then I see the less coordination, it was removed.

Second edition, my idea is that since the mobile so not good-looking, rather than write a motionless, let the stars flash themselves. The idea and the team-mates said that the teammates also did not have much opinion, so I began to toss again. The way to do this is to set a first phase St for each point, then let them go from st->1 and then back to [0,1], then we can see a flashing effect.

This is the second version of the background (the red circle in the image of the place there are obvious changes in light and shade)

As a result, there is no moving effect, but the flickering effect is not as good as it might look. Before writing JS completely did not think of the performance may be a problem, this time, I suddenly found a open this background page, the CPU occupies a very high. I started trying to analyze my code to see if there was anything that could be optimized, because it was similar to the previous mouse move event, and I used to delete the entire canvas every time, then calculate the opacity of each point and then redraw the point again.

functionTwinkle () {Run=function() {Context_stars.clearrect (0, 0, canvas_stars.width, canvas_stars.height);//clear the entire canvas every time         for(vari = 0; i < Starsnum; i++) {Start[i]++; Stararr[i].opacity= Tween.Quart.easeInOut (Start[i], flag[i], 1-2*flag[i], 100);//Here's a slow-moving library.Drawcirle (Context_stars, Stararr[i].centerx, Stararr[i].centery, Stararr[i].radius, starArr[i].opacity); if(start[i] = = 100) {//when start = = 100 to complete two things, one is start 0 another is the flag direction exchange, simply speaking, from 0->1 to 1->0 or vice versaStart[i] = 0; Flag[i]= 1-Flag[i];    }} requestanimationframe (run);    }; Run ();}

The whole idea is very clear, but in fact the CPU cost of each purge and recalculation is very large. The method of half-day optimization is studied, and finally two kinds are summed up:

(1) Do not clear each time, a layer of coverage, by changing the overall opacity to change the effect of the stars Blink

(2) Clear a small area around one point at a time instead of clearing the entire canvas

The first kind I have tried, the CPU occupies an instant down, may be the parameter adjustment of the time of the problem, the final effect also can not let me satisfaction. As for the second, since the canvas gives the API a way to clear the contents of a rectangular area, and the star uses a circular representation, once cleared may cause a missing corner to the surrounding points, all the later is not implemented.

In the process of making the background, I gave it to my teammates to think that he gave me the following version:

This is actually a change of the others ' demo

But the number of stars too much, the exercise effect of the same ghost animal, and the text appears to be really not match, and finally I rejected the idea.

Finally, because the design of this page we want to go style is a simple route, and finally changed to a fixed effect:

This is the final version, the stars are not moving or flashing.

The final version I also added the window Resize event processing, and the star between the connection of the judgment has been optimized, in order to allow the connection between the stars horizontal, longitudinal distribution as far as possible evenly. The effect of such a star background, reached the ideal effect of 80%, but without losing the beauty and simplicity, but also the judges feel very satisfied with the item. The icons on the navigation bar are removed for two reasons, one for aesthetics, and the other because the layout is prone to problems.

Speaking of the navigation bar, the second part I do is the navigation bar, the navigation bar is a change in the process, from the top down, the navigation bar contraction, the background color from colorless to colored; from below to the top, the navigation bar changes from color to no color. At the same time there is a change in the small rocket that returns to the top, from the top down, the small rocket has a change from display none to Dispaly block opacity from 0 to 1, from below to the top.

At that time the most tangled is not in the change above, because as long as the writing of a CSS animation effect on the line, although the time to lock dead at least a second, but the effect is very good, but in the determination of the wheel event. As we all know, the browser for the mouse wheel event decision has a variety of methods, do not know whether it is my writing problem, or the teammate wrote the question, I try to console.log, I found that my chrome in the process of returning to the top of two scrolltop=0 points, which is very magical. If two scrolltop=0 in an upward process means that the browser gives two tops (now think of a problem with CSS), the process of changing the navigation bar executes two times, and when it actually reaches the top, it does not get in its proper state. This is the only thing that bothered me for a long time, think for a long time, to be able to accurately respond to the changes in the wheel position, but also can not find the compatibility of different browsers. Finally, I think of a comparison can be a solution to both, set a Pre_wheel and Cur_wheel respectively record the position of the last wheel and the position of the current scroll wheel, into the body of the Onscroll event.

varWheel ={pre_wheel:0,//previous scroll wheel positioncur_wheel:0,//Current Wheel positionWheelup:false,//whether the wheel is upWheeldown:false,//whether the wheel is downOn_top:false,//whether the wheel is to the topOn_bottom:false //are the Rollers in the end}functionScroll () {//determine the status of the wheel when scrollingWheel.cur_wheel =$ (window). scrolltop (); if(Wheel.cur_wheel <Wheel.pre_wheel) {Wheel.wheelup=true; Wheel.wheeldown=false; } Else if(Wheel.cur_wheel >Wheel.pre_wheel) {Wheel.wheelup=false; Wheel.wheeldown=true; } Else if(Wheel.cur_wheel = =Wheel.pre_wheel) {Wheel.wheelup= Wheel.wheeldown =false; }    if($ (window). scrolltop () = = 0) {Wheel.on_top=true; } Else{wheel.on_top=false; }    if($ (window). scrolltop () + $ (window). Height () >=$ (document). Height ()) {Wheel.on_bottom=true; } Else{Wheel.on_bottom=false; }    /*Mouse scrolling Function Interface*/    /*Here you can put some events that need to be monitored by the scroll wheel*/Wheel.pre_wheel=Wheel.cur_wheel;}

After this processing, with the console after debugging the effect is very good, even after the decimal point, I feel this is the result I want. Careful you can see, if the scroll is over, the Wheelup and Wheeldown should be reset to false, but this method is not able to do, the actual use of the process, the effect of the two changes are perfectly achieved, all kinds of local testing is not a problem, So I was selectively ignoring the problem.

Wheel event Processing finally "solved", next we think of writing a page jump method, this same is not difficult, add a ease of the library, I again on the rolling time with distance to do a simple operation, so that each page jump time is roughly the same, ease in or slow out or slow into ease, we tested several kinds of , and finally hammered out the method of four-time easing.

The code is as follows:

varBlock_top =false;varBlock_jump =false;functionTo_top () {//Jump back to top    if(Block_top = =false) {x=Document.body.scrollTop; Rocket= document.getElementById (' Rocket '); if(x = = 0) {            return; } block_jump=true; Block_top=true; Start= 0, during = Math.floor (* x/document.documentElement.clientHeight); Tween_to_top=function() {Start++; Document.body.scrollTop= Tween.Quart.easeInOut (Start, X,-x, during); if(Start <during) requestanimationframe (tween_to_top); if(Start = =during) {Rocket.style.cssText= "Display:none"; Block_jump=false; Block_top=false;        }        };    Tween_to_top (); }}functionJump (obj) {if(Block_jump = =false) {Object=document.getElementById (obj); X=Document.body.scrollTop; to=Object.offsettop; if(Math.Abs (x-to) < 1)            return; Start= 0, during = Math.floor (max * Math.Abs (to-x)/document.documentElement.clientHeight); Block_top=true; Block_jump=true; Cur_page=getindex (pages, obj); Jump_to=function() {Start++; Document.body.scrollTop= Tween.Quart.easeInOut (start, X, to-x, during); if(Start <=during)            {requestanimationframe (jump_to); }Else{block_top=false; Block_jump=false;        }        };    Jump_to (); }}

Here is divided into two functions, one is to return to the top, one is a direct jump between the pages, this is the beginning in order to avoid some unnecessary conflicts, (in fact, there is no need), and here is a small trick to deal with. JS's own characteristics so that the same function can be executed multiple times at the same time, so there will be a lot of weird bugs, for this I added two blocks, to ensure that the same period, there can only be a jump function or To_top function in the run, to avoid the bug.

The next part I do is the announcement section. Announcements we initially wanted to write a simple, very common kind of announcements, and later, because the community has sent a lot of photos (although most of the shooting is not very good ...) , I thought I could do it in a time-axis way. Assuming there is a timeline, past events are placed in front of the point, the click will appear past the activities of the introduction and picture display; notice is equivalent to what will happen in the future, so put it at the last point in time. Here we use the table tag, the table's TD and TR labels, and the auto-centering effect that comes with it, just to help us build this timeline. What I need to control is the number of nodes and the content, which is very easy to achieve with jquery.

$(function() {Let num=events.length;  for(vari = 0; i < num; i++){        $('. Time '). Append ("<td class= ' Time_text ' >" + events[i].date + "</td>"); $('. Timepoint '). Append ("<td class= ' time_point ' ></td>"); }    $('. Time '). Append ("<td class= ' time_text ' > What happens next ...</td>"); $('. Timepoint '). Append ("<td class= ' time_point ' ></td>"); $('. Time_line_notice '). HTML ("<div class= ' time_line_img ' ></div>" + "<div class= ' Time_line_intro ' ></div> ' + ' 
); $('. Time_line_intro '). CSS ("display", "none"); $('. Time_line_img '). CSS ("display", "none"); $('. Time_point img '). Click (function(){        vari = $ ('. Time_point img '). Index ( This); $('. Time_point img '). attr ("src", "img/circle.svg"); $('. Time_point img '). EQ (i). attr ("src", "img/circle_cur.svg"); if(i = =num) {            $('. Time_line_intro '). CSS ("display", "none"); $('. Time_line_center '). Text (' Future plan '); $('. Time_line_img '). Removeattr ("style"); $('. Time_line_notice '). HTML ("<div class= ' time_line_img ' ></div>" + "<div class= ' Time_line_intro ' ></div> ' + ' 
); $('. Time_line_intro '). CSS ("display", "none"); $('. Time_line_img '). CSS ("display", "none"); }Else{            $('. Time_line_intro '). CSS ("Display", "block"); $('. Time_line_img '). CSS ("Display", "block"); $('. Time_line_center '). Text (' Past memory '); $('. Time_line_intro '). HTML ("<b>" + events[i].title + "</b>" + "<p>" + events[i].date + "" + Events[i].plac E + "</p>" + "<p>" + Events[i].context + "</p>"); $('. Time_line_img '). CSS ("background-image", "url (" + Events[i].pic + ")"); }    });});

Here is the effect show:

This change in the current point in time is through two different colors of SVG images to replace each other implementation, because the picture below the effect of writing text is not necessarily good-looking, so we are below the introduction of a linear gradient to do the bottom, and then put the text on the above implementation, but also is a neat and beautiful embodiment of it. There are a lot of details to be perfected here, but due to the rush of time, we have no spare room to get the next optimization.

The last part of the entire web design I do is actually the last rush stage to add a temporary demand. Given the color of our page is not very good, we want to do a scroll down, automatically jump to the next page effect. Thanks to the previously written rolling monitoring I felt very perfect, so I first took the pot, but I did not know that this is the last of our biggest problem, and finally did not solve the problem of success. As mentioned before, I wrote the bug of rolling monitoring, but could follow that bug my scroll down should be scroll to the bottom, or scroll to the top, can't stop the kind. The fact is not my expectation, the upward scroll completely no problem, scroll down a lot of problems, he will first down, and then rebound in the upward, leading to not be able to scroll down, the more terrible is I wrote before the thought of a very good click Jump, after adding this effect has a similar bug. This is just a matter of commenting on this point in our opinion, but it's a disaster for the user. The situation of this bug is also very elusive, my Windows chrome run no problem, but the player is also a Windows Chrome browser is a problem, more amazing is that I wrote in the morning no problem, open at noon there is a problem. debugging found that my browser to display the distance can be accurate to the decimal point, but they can not be accurate to the decimal point, so that the cause of the bug is clear, but there is no solution to the idea, try to replace jquery, the problem is still in. See there is a two days to pay, my computer is still in a moment can, a moment can not state, there is no clue, I try to like and jump the same as the processing of rolling plus lock, still have problems. Finally, we can not do anything, only the part of the problem commented out, handed up, it is really a pity.

Summing up, the web design competition can finally win the second prize is not easy. Web design competition, in fact, focus on a design, we three people do not have a design basis, simply by virtue of "Ah, this powerful", "this good-looking" to do, there are a lot of problems, and even the final submission of 5 hours, I also changed a lot of pictures and layout, the final result has been and the first envisaged the opposite Secondly, one reason is that our foundation is too poor, the base is too thin, the experience is insufficient, the framework of the beginning is not good enough, resulting in a large part of the back tinkering, wasting too much time, the final response is also a lot of problems, finally helpless deleted. Still have not been able to make good use of git, this would like to use git to improve the efficiency of the work, but the result was delayed a lot of time, after the guidance of a little bit better, but finally collapsed ... In short, or a learning process, to solve this problem, the harvest is still a lot of.

Finally, put the address on GitHub:

Https://github.com/MZIchenjl/NUPT_Astronomy_Association

Some thoughts on the web design competition