29일차 - js 애니메이션 (2)

밀레·2022년 11월 3일

웹기능사 코딩공부

코딩공부

목록 보기

83/135

어제에 이어 HTML CSS 기본 세팅

1. 좌우형 애니메이션 ('marginLeft')

1-1. 변수 지정

aniBox의 자식div 너비(1200px)를 변수 지정! 값이 바뀌어도 일일이 수정할 필요 없음

const wdata = $('.aniBox > div').width();

1-2. 객체 - 변수를 한꺼번에 선언하는 방법

오브젝트는 함수를 가질 수 있다!

2. fade 애니메이션

fade 시나리오를 먼저 생각하라 (지하철같은 좌우형과 달리! 빨간박스 3개 겹쳐짐)

포지션 abe / rel
div 영역 123을 포개놓는다!

2-1. 빨간 박스{ position: absolute }

<style>
    .aniitem{
        position: absolute; /* left: 0 top 0 위치로 이동 */
        left: 0;
        top: 0;

        width: 1200px;
        height: 300px;
        background-color: red;

        color: white; font-size: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }
 </style>

2-2. 빨간 박스.show { z-index: 10, opacity: 1 }

클래스 '.show'가 추가되면

z-index: 10 // 다른 애들보다 위로 올린다
opacity: 1

↓
그러므로, 클래스 '.show'를 add / remove 하는 제이쿼리를 삽입해야 한다!
↓

2-3. 번갈아가며 반복될 땐? 순환식 %=

포개놓은 div 영역 123이 번갈아가며 등장한다!

요소검사 시 .show가 add / remove 된다

2-4. 할머니에게 포지션:rel 주기

.aniitem{ position: absolute; width: 100%; height: 100%; }

<style>

	.banner{ 
    	position: relative; /* 아이템이 포개져(fade)있기 때문에 */
        너비 : 1200px
        높이 : 300px
        margint : 0 auto; /* 가운데 정렬 */
    }
    
    .aniBox{ /* 엄마 너비값 1000000px... 걍 뺌! */ }
    
    .aniitem{
        position: absolute; /* 위치를 부모 기준으로 지정!! */
        left: 0;
        top: 0;

        width: 100%; /* 포지션:abs / 위치를 부모 기준으로 지정!! */
        height: 100%; /* 포지션:abs / 부모 너비/높이를 가져오겠다 */
    }

</style>