JQuery text carousel effects, jquery text effects

JQuery text carousel effects, jquery text effects

Chatting: I 've been away from the school's ivory tower for more than half a year, and my life is no longer full of excitement. Working overtime for more than half a month in a row has finally come to an end, and today is the time to test its real value, now let's summarize the problems encountered in this development.

Project Background: This project is mainly for a marketing campaign of National Hotel popularity rankings. It is mainly based on the medium-level communication and is expected to have hundreds of millions of visits, with a concurrency of 2000 +/s, I have many fault tolerance plans. This time, I am mainly responsible for displaying the front-end homepage.

Features:

Seamless text carousel (do not care why such a requirement still exists on the Mobile End)

When we talk about seamless text scrolling, we first think of marquee, but we haven't touched this label for a long time and w3c has not maintained it, in addition, the page will be rolled again only after the final rolling is completed, and the px-based rolling experience for the rem layout will be very good.
And so on ..

The second idea is to use an image carousel mechanism similar to jquery, which can be basically completed. However, it is found that jquery and zepto text are jitters during scrolling, And the availability is poor.

In addition, CSS 3 + a small number of JavaScript codes are used to achieve seamless scrolling of texts with different lengths and variable lines.

The following describes the html structure.

<Div class = "outer"> <ul id = "J_scroll"> <li> 1. this is the first data </li> <li> 2. this is the second data entry </li> <li> 3. this is the third data entry </li> <li> 4. this is Article 4 Data </li> <li> 5. this is the fifth data entry </li> <li> 1. this is the first data entry </li> </ul> </div>

Just like seamless image scrolling, you also need to copy the first piece of data to the end.

Second, css-related data

. Outer {width: 122px; height: 80px; overflow: hidden ;}. outer ul {display: inline-block; height: 80px;-webkit-transform: translate3d (0, 0, 0);/* 3d rendering, enabling hardware acceleration */transform: translate3d (0, 0, 0); font-size: 0;/* enable inline-block to have no default spacing */white-space: nowrap; /* exceeding the limit */}. outer ul li {display: inline-block; padding-right: 50px;-webkit-transform: translate3d (0, 0, 0); transform: translate3d (0, 0, 0); font-size: 24px ;}. theanimation {animation: theanimation 20 s infinite linear;-webkit-animation: theanimation 20 s infinite linear;} @ keyframes theanimation {from {transform: translateX (0%);} to {transform: translateX (-100%) ;}- webkit-keyframes theanimation {from {-webkit-transform: translateX (0%) ;}to {-webkit-transform: translateX (-100% );}}

Due to some rendering mechanisms of IOS, it is recommended that hardware acceleration be enabled inside the elements to be rolled, otherwise there will be a problem of choppy and incomplete text display.

Js

  $('#J_scroll').width($('#J_scroll').width() - $('#J_scroll li:first-child').innerWidth());  $('#J_scroll').addClass('theanimation');

Jquery is written here. I believe everyone can understand it, that is, let the width of the rolling element be equal to the total width of its internal element minus the width of the first (or the last) element, this ensures seamless results.

Finally, I want to explain why I want to use js to dynamically Add the class name of css3 to implement the rolling effect. At the beginning, I also wanted to directly write the CSS 3 rolling effect on the rolling element, however, the first time the current page is loaded on the iPhone, the page does not scroll automatically.