Notice
Recent Posts
반응형
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 티스토리챌린지
- 크리에이터링크 이미지클릭
- css 화면이동
- javascript 자식 노드 복사
- 당연해?뭐가?
- css변수
- 크리에이터링크 이미지링크
- javascript 자식 노드 추가
- javascript 자식 노드 삭제
- 덕수궁 석조전
- 종묘대제
- html 다운로드 버튼 만들기
- 셀렉트 태그 링크
- 클린 서구
- 포토샵 핸드툴 오류
- 매일두유
- 일러스트 핸드툴 오류
- 자바스크립트 링크
- 대한제국역사관
- 후두골이형성증
- 다른 사이트로 연결
- 애드센스
- 당연해?왜?
- css사칙연산
- 크리에이터링크 상세페이지
- 강아지 발작
- 자바스크립트 타이머 만들기
- 오블완
- 포토샵 스페이스바 오류
- 쏜살치킨
Archives
- Today
- Total
열정과 게으름 사이
페럴릭스 만들기 본문
--html--
<div class="wrap">
<section class="section_01"></section>
<section class="section_02"></section>
<section class="section_03"></section>
</div>
---css---
.wrap{width:100%; height: 1500px; }
.section_01,.section_02,.section_03{widht:100%; height:500px}
--js---
$(function(){
$(window).scrollTop(1); 로딩시 엘리먼트 자리 잡기
var section = $('section');
var sectionTop = [];
section.each(function(){
var tg = $(this);
sectionTop.push(tg.offset().top);
});
section.css({position:'fixed'});
$(window).scroll(function(){
var scrT = $(window).scrollTop();
section.each(function(i){
var tg = $(this);
var tt = -1 *scrT + sectionTop[i];
if(scrT > scrtionTop[i]){
tt*= 0.5; 속도
tg.css({top:tt});
}
});
});
반응형
'공부 메모 > javaScript' 카테고리의 다른 글
팝업 목록. (0) | 2020.12.31 |
---|---|
form에서 enter키로 전송 될 때/유효성 검사 (0) | 2020.12.03 |
윤년 계산& 14세 미만 가입방지. (0) | 2020.11.28 |
자동으로 움직이는 무한 반복 슬라이드 (2) | 2020.08.24 |
ajax으로 html불러와서 최근글 적용 (0) | 2020.08.20 |
Comments