이 기사에서는 수상 경력에 빛나는 연속 스크롤 애니메이션을 Html5 모바일 터미널에서 구현한 사례를 소개하고 자세한 내용을 모든 사람과 공유합니다.
분석 필요
ㅎㅎ 다이나믹한 사진을 올리자마자 정말 맑아지네요.
굴러다니고 굴러다니는데 이것을 만드는 방법은 무엇일까요? 요약하자면:
HTML 뼈대실제로는 매우 간단합니다. 가장 바깥쪽 <div>는 고정 창으로 사용되고, 안쪽 <ul>은 이동을 제어하고, 안쪽 <li>는 애니메이션을 표시합니다.
<div class=roll id=roll> <ul> <li>첫 번째 구조</li> <li>두 번째 구조</li> <li>세 번째 구조</li> <li>네 번째 구조</li> li> <li>다섯 번째 구조</li> <li>여섯 번째 구조</li> <li>일곱 번째 구조</li> <li>여덟 번째 구조</li> </ul></div>기본 CSS 스타일
먼저 기본 CSS 스타일을 구현합니다.
*{ 여백:0; 패딩:0;}.roll{ 여백: 100px 자동; 너비: 200px; 높이: 40px; 오버플로: 숨김; 테두리: 1px 솔리드 아쿠아마린;}.roll ul{ 목록 스타일: 없음;} 롤 리{ 줄 높이:20px; 글꼴 크기:14px;일반적인 스타일을 살펴볼 수 있습니다.
구현 아이디어 1. jquery의 애니메이션 애니메이션 사용애니메이션() 메서드
$(selector).animate(styles,speed,easing,callback)
매개변수:
스타일: 필수 매개변수, 애니메이션이 필요한 CSS 스타일(카멜 케이스 이름 사용)
속도: 애니메이션의 속도를 지정합니다.
@번호:1000(ms)
@string:느림,보통,빠름
완화: 애니메이션 속도(스윙, 선형)
callback: 함수 실행 후 콜백 함수
$(document).ready(function(){ setInterval(function(){ // 1.5초마다 변환하는 타이머를 추가합니다. $(#roll).find(ul:first).animate({ marginTop:-40px // 각 이동 거리},500,function(){ //애니메이션 이동 시간//$(this)는 ul 객체를 참조하고, //ul을 재설정한 후 첫 번째와 두 번째 요소를 //ul의 마지막 요소 위치에 삽입합니다. $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(this).find(li:first).appendTo(this) }) },1500) });효과를 살펴보세요:
2. CSS3 애니메이션 애니메이션 사용CSS3의 키프레임을 통해 단계 건너뛰기 효과를 얻을 수 있습니다. 먼저 아이디어를 간단히 살펴보겠습니다.
예비의1. 하드코딩된 상이라면 앞부분을 뒤로 복사해야 합니다. 1장씩 굴리면 첫 번째를 2장씩 굴리면 첫 번째와 두 번째를 복사합니다. .개인.
<div class=roll id=roll> <ul> <li>첫 번째 구조</li> <li>두 번째 구조</li> <li>세 번째 구조</li> <li>네 번째 구조</li> li> <li>다섯 번째 구조</li> <li>여섯 번째 구조</li> <li>일곱 번째 구조</li> <li>여덟 번째 구조</li> <li>첫 번째 구조</li > <li>두 번째 구조</li> </ul></div>
2. 그런 다음 스크롤해야 하는 횟수와 한 번에 몇 초를 계산합니다. 예는 두 개의 스크롤이므로 5초가 걸리므로 CSS3의 애니메이션 시간은 5초입니다. 그러면 @keyframe을 몇 부분으로 나누어야 할까요? 일시 중지이므로 각 스크롤에는 두 개의 복사본이 필요하고 마지막 스크롤은 점프해야 하므로 복사본이 하나만 있으므로 5 * 2 - 1 = 9 개의 복사본이 필요합니다. 코드를 보면 알 수 있습니다.
/*여기에서는 호환성 처리가 수행되지 않습니다.*/.roll ul{ list-style: none; animation: ani 5s 선형 무한; /*애니메이션 ani, 5s, 루프에서 일정한 속도로 재생됨*/}@keyframes ani{ 0 %{ 마진 상단: 0; } 12.5%{ 마진 상단: 0; } 25%{ 마진 상단: -40px } 37.5%{ 마진 상단: -40px; } 50%{ 여백-상단: -80px; } 75%{ 여백-상단: -120px; } 100%{ 여백- top: -160px; /*마지막 것은 애니메이션을 방해할 수 있는 것입니다*/ }} 고급의숫자가 확실하지 않은 경우 동적으로 계산하고 js를 사용하여 @keyframes를 동적으로 추가해야 합니다. 이때 간격과 이동 거리를 계산할 수 있으면 괜찮습니다.
1. 먼저 <li>의 길이를 구합니다.
2. 그런 다음 간격 백분율을 계산합니다. 일시 중지가 있으므로 초 × 2를 사용하는 것을 잊지 마십시오.
3. 그런 다음 문자열을 사용하여 길이를 포함하여 @keyframes, 0~length를 철자합니다. 하나 더 있기 때문에 짝수와 홀수는 구분됩니다.
4. <ul>의 첫 번째와 두 번째 단어를 <ul> 끝까지 복제합니다.
5. <style> 태그를 생성하고 <head>에 추가합니다.
6. <ul>에 애니메이션 속성 추가
더 이상 고민하지 않고 코드에 대해 이야기해 보겠습니다.
function addKeyFrame(){ var ulObj = $(#roll ul), //ul 객체 가져오기 길이 = $(#roll li).length, //li 배열 길이 가져오기 per = 100 / (length / 2 * 2 ) ; / /중간 간격의 백분율 계산//문자열 연결 var keyframes = `/ @keyframes ani{`; for(var i = 0; i<=length; i++){ keyframes+=`${i * per}%{ margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px }` } keyframes+='}'; li:first), //첫 번째 요소 가져오기 liSec = liFirst.next(); //두 번째 요소 가져오기 ulObj.append(liFirst.clone()).append(liSec.clone()); //두 요소를 ul $(<style>).attr(type,text/css)에 삽입합니다. html(keyframes).appendTo($(head)); //헤드에 키프레임을 삽입하기 위한 스타일 태그를 생성합니다. ulObj.css(animation,ani 5s 선형 무한); //ul에 css3 애니메이션 추가} addKeyFrame(); 3. zepto+transition 구현모바일 측 Zepto에는 애니메이션 기능이 없습니다. CSS3 속성을 사용하지 않는 경우 JS에서는 어떻게 작성할 수 있나요?
var 타이머,top;function Roll(){ var ulObj = $(#roll).find(ul), length = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //<ul> 태그에 첫 번째와 두 번째를 추가합니다.clearInterval(timer); 타이머 = setInterval(function(){ //타이머 설정 var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ //현재 높이를 가져옵니다. 끝이 아닌 경우 위로 이동합니다. -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //끝에 도달하면 빠르게 0에 도달합니다. top = 0; {-webkit- 전환:none,transition:none,margin-top:top}); setTimeout(function(){ //여기에 지연기를 추가하면 두 애니메이션이 병합되는 것을 방지하기 위해 대기열 끝에서 실행되어야 합니다. top -= 40.css({-webkit-transition:all 1s,transition:all 1s, margin-top :top}); },0) } },2000);}roll();다른 방법이 있으면 다음에 수시로 업데이트하도록 하겠습니다. 하지만 모바일의 경우 이것만으로도 충분합니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.