smarti,스마트아이

CSS, jquery로 풍경 애니메이션 만들기 에제

CSS와 jQuery로 풍경 애니메이션 만들기

예제보기

다운로드

jQuerySceneryAnimation.zip

0.28MB

html에 배경 이미지로 풍경을 구성할 div를 만든다. 하늘, 구름, 태양, 달, 별 그리고 별똥별로 이루어 질 것이다.

<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>

석양의 색변화는 노란색 태양에서 붉은색 태양으로 변해짐으로 시뮬레이션 된다.

 

CSS

모든 요소는 절대적인 위치를 가진다. 공통 속성을 가질때 쉼표로 구분된 모든 클래스에 지정할 수 있다.

body{
    overflow:hidden;
}
#clouds, #sky, #night, #stars{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}

#sky{
    background:#fff url(../images/sky.png) repeat-x top left;
    z-index:1;
}

하늘은 파란색에서 흰색으로 그라데이션이 있는 반투명 이미지로 구성

#sun_yellow{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun.png) no-repeat center center;
    z-index:2;
}
#sun_red{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun2.png) no-repeat center center;
    z-index:2;
    opacity:0;
}

애니메이션 시작 부분에서 낮이되면 노란색 태양을 보여주고, 아래로 내려가면서 붉은색 태양으로 변하면서 사라진다. 

이 움직임과 페이드 아웃, 페이드 인 효과를 애니메이션 한다.

#clouds{
    background:transparent url(../images/clouds.png) repeat-x top left;
    z-index:3;
}
#ground{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(../images/ground.png) repeat-x bottom center;
    z-index:3;
}

#night{
    background-color:#000;
    z-index:4;
    opacity:0;
}
#stars{
    bottom:200px;
    background:transparent url(../images/stars.png) repeat bottom center;
    z-index:5;
    opacity:0;
}

밤은 배경색이 검은색 화면으로 채워진다. 불투명도를 높게 설정하여 투명도를 낮춰 천천히 보이게 한다.

#sstar{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
}

별똥별은 단순히 기울어진 흰색 선이다. 이동하면서 페이드 아웃하여 별똥별처럼 보이게 한다.

초기 배경 위치를 가로 80px 및 세로 -200px로 설정한다. 

#moon{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(../images/moon.png) no-repeat center center;
    z-index:6;
    opacity:0;
}

JavaScript

하늘의 배경색에 애니메이션을 적용하기 위해 jQuery 플러그인을 사용한다.

$(function() {
   $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#stars').animate({'opacity':1}, 5000,function(){
            $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#sstar').animate({'opacity':1}, 300);
                $('#sstar').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
   $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#night').animate({'opacity':0.8}, 20000);
});

Quotation : 메리 루 (웹디자이너 겸 개발자)

 

[코딩공부] - CSS fixedNavigation1 예제 다운로드

CSS fixedNavigation1 예제 다운로드

[세상살이] - 엣지 브라우저 확장 기능으로 마우스 우클릭 해제

엣지 브라우저 확장 기능으로 마우스 우클릭 해제

[세상살이] - 유튜브 자막 다운로드 하는 방법

유튜브 자막 다운로드 하는 방법

[세상살이] - 성공과 실패는 습관이 좌우한다

성공과 실패는 습관이 좌우한다

[디자인공부] - 포토샵으로 3D 레트로 문자 만들기

포토샵으로 3D 레트로 문자 만들기