타임라인의 효과 분석
- 怪我咯원래의
- 2017-06-26 11:55:302614검색
타임라인은 새로운 것은 아니지만 그냥 관심이 있어서 공부하게 되었어요. 최근 인터넷에서 더 좋다고 생각되는 타임라인 데모를 검색해서 다운받아서 연구하고 구체적인 효과를 좀 수정했어요. 그림: (이 데모는 이미지의 스크롤 로딩을 구현합니다.)
코드 주소: Responsive Timeline.zip
이미지 스크롤 로딩을 구현하는 방법 가장 중요한 부분은 다음 코드 부분입니다.
(function() {
$(document).ready(function() {var timelineAnimate;
timelineAnimate = function(elem) { return $(".timeline.animated .timeline-row").each(function(i) {var bottom_of_object, bottom_of_window;
bottom_of_object = $(this).position().top + $(this).outerHeight();
bottom_of_window = $(window).scrollTop() + $(window).height();if (bottom_of_window > bottom_of_object) { return $(this).addClass("active");}
});
};
timelineAnimate();return $(window).scroll(function() { return timelineAnimate();
});
});
}).call(this);사실 이 예제에서는 이미지만 동적으로 로드하는 것이 아니라(즉, 나중에 구현할 수 있는 HTML 태그와 DOM 요소를 동적으로 생성하는 것) 원본 페이지에서 불투명도 속성 값을 0에서 1로 숨기거나 변경하기만 하기 때문입니다. .위 코드를 보면 실제로 작은 알고리즘이 있습니다.
if (bottom_of_window > bottom_of_object) 才会去给当前对象（即类控制器为.timeline.animated .timeline-row的对象)添加类选择器active(暂且先不具体该类选择器实现什么效果) 我们先讨论下这两个值bottom_of_window和bottom_of_object
bottom_of_window = $(window).scrollTop() + $(window).height();
$(window).scrollTop()表示当前滚动条的位置距离页面顶端的距离，其实可以理解为页面滚动条拉到某个位置，顶部隐藏的页面内容的高度;
$(window).height()表示当前可视页面区域的高度; bottom_of_object = $(this).position().top + $(this).outerHeight();
$(this).position().top表示当前元素距离父元素的距离，个人理解为应该就是margintop的值吧，
$(this).outerHeight()表示当前元素的高度还有padding+border，但不包括margin 如下盒子模型：
当if (bottom_of_window > bottom_of_object)为真的情况下，我们看到执行了return $(this).addClass("active"),这段代码起什么作用呢，其实作用就是
用户在拖动滚动条时时间轴内容的过渡效果，我们可以看到添加效果是向.timeline.animated .timeline-row添加的，我们查看样式文件关于这个类选择器的所在对象都有什么
样式效果：
.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }
.timeline.animated .timeline-row:nth-child(odd) .timeline-content {left: -20px; }
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }
.timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {left: 0; }$(this).addClass("active")를 실행한 후 다음 스타일이 작동하는 것이 분명합니다.
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }전환 플로팅 효과가 있는 이유는 무엇인가요? 실제로 정의되어 있습니다.
.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }transition(css3 태그)은 클래스 선택기 .timeline.animated .timeline-row .timeline-content에 포함된 개체만 정의합니다. 모든 스타일 변경은 0.8.s의 전환 효과를 갖습니다. 물론 이번에도
수정할 수 있습니다.
$(this).addClass("active")를 실행하기 전에 타임라인 왼쪽에 있는 객체의 스타일은 다음과 같기 때문입니다(지금은 타임라인 왼쪽에 대해 이야기하겠습니다)
.timeline.animated .timeline-row:nth-child(odd) .timeline-content {
opacity: 0; :; }
실행 후 스타일은 다음과 같습니다.
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }
투명도와 왼쪽 여백이 변경되었으므로 왼쪽에서 오른쪽으로 구현 효과가 있습니다.
타임라인 오른쪽에 있는 개체가 오른쪽에서 왼쪽으로 컷인 효과가 나타나는 이유는 무엇인가요? $(this).addClass("active")를 먼저 실행하기 전에 오른쪽에 있는 개체의 스타일이 타임라인은
.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }왼쪽은 20px, 불투명도(투명도는 0)입니다. $(this).addClass("active")를 실행한 후
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }왼쪽은 0, 불투명도(투명도는 1)입니다. , 전환은 0.8초이므로 오른쪽에서 왼쪽으로 전환 효과가 있습니다.
위 코드에는 미묘한 점이 있습니다.
.timeline-row:nth-child(odd)中的nth-child(odd)选择器，因为css的解析顺序是从右到左，所以这个地方的意思表示.timeline-row为奇数的对象（属于其父元素的第奇数个timeline-row)
假如有以下代码，
<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>여기서 p:nth-child(2)는 두 번째 자식을 나타냅니다. p의 상위 요소에 요소가 있고, 이 하위 요소가 p인데, 이때 두 번째 하위 요소가 우연히 P가 되므로 표시 효과는 다음과 같습니다
다음과 같이 변경하면
<h1>这是标题</h1><h2>第一个段落。</h2><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p>
이때 효과는 다음과 같습니다
p:nth-child(2)의 두 번째 자식 요소가 p가 아닌 h2이므로 일치하는 요소가 발견되지 않아 배경색이 적용되지 않았습니다.
먼저 공부한 다음, 페이지 요소를 초기에 표시하는 대신 투명도 표시 또는 숨기기를 제어하여 페이지 요소의 동적 로딩을 준비하는 시간을 갖도록 하겠습니다.
<br>
<br><br>
위 내용은 타임라인의 효과 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!