During the Spring Festival this year, I saw the official website of THE Year of the Dog activity of LOL with my friends. Have to sigh, do IT to see and others is not the same, others see activities, I see design, see special effects, after reading the mind a heat, decided to use native JS to do a wave…
After 7 or 8 days of free time, it worked, but it still worked in Google. Compatibility with other browsers was not tested.
After writing a lot of harvest, for CSS properties and CSS3 animation further study and application, the practice of native JS, use, strengthen the application of SEMANTIC HTML tags, to avoid the past for div evil dependence… I also have a new understanding of HTML layouts, and my own layouts don’t always feel as good as the original (is it because I didn’t design??). Finally, I can’t help but wonder how important it is for programmers to have a good visual designer (artist)
Github address was wrong… It has been corrected. If you like it, you can give it a starO
Git source code
Copy write the address
The website address
Note:
- So far, Google Chrome has only been tested, and there is no mobile interface, so I recommend using CHROm on PC
- In view of my server network speed is really not as good as That of Tencent dad, so I reduced a lot of resources (audio, three videos of the star with you module), and it took a longer time to load the resources for the first time because of the server network speed
- Purely personal interest
Summary of some knowledge points
1. Use the Navigator object of the browser to determine whether you are currently on the mobile terminal and wechat terminal
function is_pc(){
var os = new Array("Android"."iPhone"."Windows Phone"."iPod"."BlackBerry"."MeeGo"."SymbianOS");
var info = navigator.userAgent;
var len = os.length;
for (var i = 0; i < len; i++) {
if (info.indexOf(os[i]) > 0) {return false; }}return true;
}
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) = ='micromessenger') {return true;
}else{
return false; }}Copy the code2. Reduce the use of if for in programming
1.Ternary operator2.ifBranch more words to switchswitch
3.Use short circuit judgment, &&, | |if(XXX){
test()
}
/ / after the changeXXX && test() indicates that test is returned if XXX is true, otherwise XXX is returnedif(! XXX){ test() }/ / after the changeIf XXX XXX | | test () said is false, return to the test, otherwise return to XXXCopy the code3. Use background for the gradient font
1. Use firstcolorSet up thehackFor these new onesAPIIn addition to dedicatedchromOther browsers don't support it very well. 2. Usebackground-imageColor gradientlinear-gradientTo set the gradient property. 3text-fill-color:transparent; To set the text fill color to transparent. When this property is declared,color4. Last usebackground-clip:text; Declare that only the text area is displayed, and the text with gradient color appearscolor: #ef8247;
font-size:14px;
background-image: linear-gradient(to right.#fee3b5.#f8bb87);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
te
xt-fill-color:transparent;
Copy the code4. Always center the element or center it vertically (if you know the size of the element)
1. Use firstposition:absoluteAbsolute positioning. 2. Usemargin-left: - 50The width of %,margin-top: - 50% height 3. Reuseleft: 50The width of %,top: 50% height to achieve the interface when zooming in and out of the element is always vertically centered.bg1 .video{
position: absolute;
width: 1920px;
height:900px;
margin-left: -960px;
left:50%;
}
Copy the code5. Button flash effect is realized
1. Draw the button first. 2. UsebeforeThe pseudo-element draws a transparent diamond-shaped sliding square, and the flash effect is derived from the diamond-shaped movement 3. Use animation to make the diamond pseudo-element move.first-page .bottom-btn span{
display: block;
height:40px;
line-height:40px;
overflow: hidden;
margin:0 9px 0 7px;
position: relative;
}
.first-page .bottom-btn span:before{
content: ' ';
position: absolute;
width:80px;
height:350px;
top:0;
left: -150px;
transform: skew(-25deg);
background: linear-gradient(to the right, rgba (255255255, 0)0.rgba(255255255, 5)50%.rgba(255255255, 0)100%);
}
@keyframes leftToRight {
0%{left: -150px; 100%} {left:250px}}Copy the code
6. The transform properties
Transform: rotate3D (x,y,z,d); rotate3D (x,y,z, D); rotate3D (x,y,z, D); The transform: Perspective property sets the distance from the lens to the element plane. All the elements lie on the plane z equals 0. For example, Perspective (300px) indicates that the lens is 300 pixels away from the element's surface. 2. The perspective-origin attribute specifies the position of the lens on the plane. The default is to put it in the center of the element.Copy the code7. Beautiful hover effect
1. Normal some element attributes 2. In the elementhoverWhen usingbeforePseudo element. Here you gobeforePseudo element to add animation, usingopacityandscaleImplement @keyframes coruscate {
0%{
opacity:.3;
transform: scale(1);
}
100%{
opacity:0;
transform: scale(1.2);
display: none; }}.as-you-play .card-list .card-3{
position: absolute;
background: url(".. /assets/spr_redpackage.png")no-repeat -340px -478px;
width:392px;
height:333px;
top: -38px;
left:800px;
}
.as-you-play .card-list .card-3:hover:before{
content: ' ';
position: absolute;
background: url("./assets/spr_redpackage.png")no-repeat -340px -478px;
width:392px;
height:333px;
top:0px;
left:0px;
animation:coruscate .4s ease-in-out;
}
Copy the code8. Idea and optimization of up and down movement effect
The onScroll function is used directly to listen for scroll events
Each method in the method body corresponds to the appearance and disappearance control of each module on the page
On the other hand, as long as it is outside the height, each scroll will be removeActive. Although there is no change in the interface, the calculation will come up, resulting in a bit of a lag in the interface
After some thinking, change to scroll to the height of a certain area, call the corresponding method
Feel there should be a lot of room for optimization, continue to optimize this piece
9. Optimization of scrolling effect on the first page
In the official website, when scrolling is triggered between the first page and the second page, it will automatically roll down or up. I thought this section would be relatively simple, but it is the most time-consuming part. Since JQ is not used, many methods have to be implemented by themselves
- An animation that automatically scrolls up and down has been styled for the body and nav
* Divide the height of each scroll by the height of each scroll to get the number of times * Use the setInterval timer for each scroll height until the specified number of times, Javascript function scrollTo945(){disabledMouseWheel(); setTimeout(mouseWheel,500); document.getElementsByClassName('activity-nav')[0].style.position = 'fixed' setTimeout(function(){ document.body.style.paddingTop = '142px'; },50) var scrollTemp = getScrollTop(); var scrollHeight = scrollDownHeigh - scrollTemp; var len = Math.floor(scrollHeight/step),i=0; var first_length = scrollHeight % step clearInterval(timer) timer = setInterval(function(){ if(i>len) return; i==0 ? window.scrollTo(0,first_length) : window.scrollTo(0,i*step+first_length); i === len && clearTimerDown() i++; }}, 10) ` ` `Copy the code- Pay attention to the point
* At first, the OnScroll method was used to monitor, but later it was found that this method was in conflict with the global control method of each module, which would cause more bugs, so onMouseWheel method was used to monitor the scroll. * When the scroll event is triggered, the onMouseWheel event needs to be untied. Otherwise, when the user triggers the event again, there will be a BUG * For the body padding-top animation time setting and page scrolling animation time setting, it needs to repeatedly try to find a more balanced point, so that the scrolling will not feel too muchCopy the code