First release the demo and effect
Demo1
Http://runjs.cn/detail/cjrwtdgz
Demo2: Search for text positioning and animation
Http://runjs.cn/detail/u9qqhmij
If you are interested in the preceding implementation, you can directly go to the topic (briefly introduce the principles and required front-end technologies, but you still need to take a closer look at the demo above). Use it as a front-end egg. For example, when a user enters "like" and jumps out of a "Love Animation", the user should be pleasantly surprised. When the user reads a private letter, he will also see a "Love Animation ", we should also be pleasantly surprised. The principle is very simple, there are five steps, and the corresponding technology is also very easy to start with the premise: You need to know the position of the "Snap" in the _ wrap string (12345678912 grab 145874) First step: create a node div2 and copy the CSS style of _ wrap to div2 using window. getcomputedstyle (_ wrap, null) to obtain the CSS style. For earlier ie versions, use _ wrap. currentstyle to replace Step 2: copy the truncated text content, add the identifier node span, and insert it into the body. _ settext is the character string '123'. Step 3: calculate the offset of span in div2. Use offsettop and offsetleft to obtain the spacing. Step 4: Use _ wrap in the browser. getboundingclientrect () obtains the distance between the four sides and the left and top of the browser. As for getboundingclientrect, this method obtains the position of an element on the page relative to the browser window on the left, top, right, and bottom respectively, please refer to the following figure. Step 5: Add step 3 and Step 4 to the position where the seat is "grabbed" in the browser. The function principle has ended, this article also ends with how to obtain the truncated text string and obtain the text position for animation, please refer to the Code in the demo at the top, and more ideas of this function will be applied to you (the blogger only wants to find the 'egg 'in text for the time being ', it can also be related to the @ function's bullet layer location [similar to Sina's @ location retrieval ])
Obtain the location of text relative to the browser window and two application implementations
