인터렉티브하게 구성해보자.

Fade-In

레이아웃을 짜놓고, 화면을 보니 너무 딱딱한 느낌이 들었다. 어떻게 조금이나마 덜 지루할 수 있을까 생각을 하다가 결국에는 제이쿼리의 힘을 빌려 페이드인 기능을 추가하기로 하였다.

head태그에 제이쿼리cdn을 불러온 후, 구글링을 통해 페이드인을 찾아보았다.

페이드인에 관련된 자료가 많고, 하나하나 비교해보면서 나의 입맛대로 바꾸었다.

평소에는 컨텐츠에 투명도를 0으로 주어서 보이지 않게 하다가 컨텐츠에 도착했을 때 투명도를 1로 바꾸어 준다.

 $(document).ready(function() {
    $(window).scroll( function(){
        $('.fadein').each( function(i){
            
            var el = $(this).offset().top 
            var where = $(window).scrollTop() + $(window).height();
            
            if( where > el ){
                $(this).animate({'opacity':'1','margin-bottom':'0px'},1200);
            }
            
        }); 
    });
});

progressbar

해당 컨텐츠에 도착했을 때, 바의 게이지가 쭉 오르게 구현하고 싶다. 아직 까지는 progress태그로 비율만 표시해놨다.

 <progress value="80" max="100"></progress>

정말 쉬운것 같으면서도 엄청 어려운 것이 html과 css인 것 같다.

프로젝트

프로젝트 소개 영역은 또 어떻게 해야할지 생각해봐야한다..
간단하게 이미지와 텍스트하기에는 뭔가 심심하구.. 리스트 형식? 샤르르륵 하는 뭔가가 있을까? 유튜브가 요즘 잘되어 있다. 참고해야지

---

구글 크롬에서만 보다가 익스플로러에서 보니 깨지기도 한다.. 크로스브라우징 이슈도 해결해야하고, 정말 세세한 부분에 대해서 너무 찝찝하고, 고칠게 많지만 우선적으로 기본틀이 완성 되었다.

http://bathingape.github.io/portfolio