개발노예 코드와 일상

이번에는 메인에 애니메이션 효과를 주라는요청이있었다

보통 css로 대부분 처리해버렷는데

이번에는 css 만으로는 안될거같아서 javascript로 처리했다

안되는이유는 애니메이션 구성? 떄문이었는데

이미지가 계속줄어들고, 글자가 날라가고, 이게 계속 반복되고

하여튼 쪼금 귀찮았다 사실 많이

그렇게 복잡하진않았고 타이밍이나 순서 맞추는게 일이었다

기본은 

$(".test").delay(100).animate({ }); 이런느낌인데

딜레이와 순서를 위해서 

일단 순서 구성을짜고

$(".test").delay(100).animate({
        
        opacity:'1'

    },1000,function(){

            다음 애니메이션들 -

    };

});

이렇게 처음 animate 안에 코드를 넣고 그안에 또 넣고 이런식으로 했다

그리고 반복해야되니까

function _start(){} 으로 함수로만들어줬고

화면크기나 셋인터벌이나 이런 조건에따라 함수를 호출하도록 마지막 마무리

이미지 확대기능을 추가해달라는 요청이다

오픈된 코드가 많아서 작업은 어렵지않았다

javacsript 코드와 css 정도만 추가해주면 된다

이미지 해상도가 약간 영향을 미치긴하겠지만 크게 차이는없는듯?

일단 코드는

var target = $('.target');
//1
var zoom = target.data('zoom');

$(".target_wrap")
.on('mousemove', magnify)
.prepend("

var magnifier = $('.magnifier');

function magnify(e) {

// 마우스 위치에서 .magnify의 위치를 차감해 컨테이너에 대한 마우스 좌표를 얻는다.
var mouseX = e.pageX - $(this).offset().left;
var mouseY = e.pageY - $(this).offset().top;

// 컨테이너 밖으로 마우스가 벗어나면 돋보기를 없앤다.
if (mouseX < $(this).width() && mouseY < $(this).height() && mouseX > 0 && mouseY > 0) {
    magnifier.fadeIn(100);
} else {
    magnifier.fadeOut(100);
}

//돋보기가 존재할 때
if (magnifier.is(":visible")) {

    // 3
    var rx = -(mouseX * zoom - magnifier.width() /2 );
    var ry = -(mouseY * zoom - magnifier.height() /2 );

    //돋보기를 마우스 위치에 따라 움직인다.
    //돋보기의 width, height 절반을 마우스 좌표에서 차감해 마우스와 돋보기 위치를 일치시킨다.
    var px = mouseX - magnifier.width() / 2;
    var py = mouseY - magnifier.height() / 2;

    //적용
    magnifier.css({
        left: px,
        top: py,
        backgroundPosition: rx + "px " + ry + "px"
    });
}

}

//

-- css

/* 감싸는 div /
.target_wrap { position: relative; margin: 0 auto; width: 100%;}
/ 확대될 타겟이미지/
.target { display: block; width: 100%;}
/ 돋보기 */
.magnifier { width: 300px; height: 300px; position: absolute; border-radius: 100%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 3px 3px rgba(0, 0, 0, 0.25); display: none; z-index: 10000;}

게시판이외에 따로 페이지생성시에

체크박스를 체크하는기능을 사용하고있었는데

이제 리스트 하단부에 선택수정과 삭제등등 옵션을추가하면서

내가 몇개를 체크했는지와 하단에서도 전체체크를 추가하면서 약간 스크립트를 추가했다

별건아닌데 체크한 숫자가 눈에보이니까 좀 편한거같기도하고 쓸데없는거같기도하고

$('[name="chk[]"]').on('click',function(){ var $this = $(this), $number = $(".number").val(); var tmp; if($this.is(':checked')){ $tmp = parseInt($number)+1; }else{ $tmp = parseInt($number)-1; if(tmp<0){ $tmp = 0; } } $('.number').val($tmp); }) // 모두선택 $('#chkall').on('click', function() { var $this = $(this), $that = $this.closest('table').find('tr[data-bunch]'), check = $('[name="db_id[]"]:enabled'); check.prop('checked', $this.is(':checked') ? true : false); if ($this.is(':checked')) { $that.addClass('checked'); //선택된갯수추가 $(".number").val($that.length); } else { $that.removeClass('checked'); $('[data-proto]').val(function() { return $(this).data('proto') }); //선택된갯수추가 $(".number").val('0'); } });

엥 스크립트가 한줄로들어가보리네

html 관련은 뭐 input 쪽 네임정도와 클래스만 보고 따로 추가하면 될거같다

기본적인 홈페이지 콘텐츠중

메뉴 버튼 누를시 관련된 내용이 같은장소에서 내용만바뀌게 하는 것들이 종종있다.

다양한방법이있겠지만

내가 가장 자주쓰는 방법을 적어논다.

<ul>
  <li class="sw_li on" data-type="0"><a href="#" class="color_gray font_16" onclick="return false;">1</a></li>
  <li class="sw_li" data-type="1"><a href="#" class="color_gray font_16" onclick="return false;">2</a></li>
  <li class="sw_li" data-type="2"><a href="#" class="color_gray font_16" onclick="return false;">3</a></li>
  <li class="sw_li last" data-type="3"><a href="#" class="color_gray font_16" onclick="return false;">4</a></li>
</ul>

        <?php
        for($t=0;$t<4;$t++){
        ?>
        <div class="sw_con sw_con_<?php echo $t?>">
            <?php echo $t?>
        </div>    
        <?
        }
        ?>

  $(".sw_li").click(function(){
    $('.sw_li').removeClass('on');
    $(this).addClass('on');
    $(".sw_con").hide();
    var type =$(this).data('type');
    $(".sw_con_"+type).fadeIn();
    return false;
});

탭있고 ~ 컨텐츠부분은 for문 돌려서 내용 넣어줄꺼고 
스크립트는 type 속성으로 열고닫고~

:hover = 마우스 오버했을시 javscript보다 자연스럽고 편함 , 

:after = 안에 내용물을 float시켰을때 따로 높이값 안주고 구간잡을때

- ex) .list_wrap:after { display:block; visibility:hidden; clear:both; content:"" }

animation  => 애니메이션, 간단한 애니메이션 작업해줄때사용 (복잡해지면 부자연스러움)

.box {animation:animate_background 3s linear;}

@keyframes animate_background {

 0% {margin-top:0px}

 100% {margin-top:0}

}

:focus, :active = > 보통 a링크 클릭할때, 활성화되있을때

a:focus, a:active {color:#fff}

:first-child, :last-child => 순서에따른 하위 자식 스타일, ( 브라우저 버전타는경우도있는듯 )

프린트 기능을 사용할때

출력버튼까지 출력되버리면 신경쓰이는 경우가있더라

출력버튼을 눌렀을때 적용시키는 css 다

@media print {
        .print {display: none}
    }

반응형이나 모바일페이지 코딩할때 쓰던 미디어쿼리로 프린트 시에도 사용할수있다

나름 간단하게 처리되긴하는데

프린트할때 스타일을 다시 다줘야하는게 좀 귀찮긴 하더라