본문 바로가기

WEB/내맘대로 코딩

css3 효과주기

몇년전까지만해도 ie8 크로스브라우징 한다고 css3는 거의 사용할 기회가 없었는데 요즘은 ie8을 버리고 ie9이상으로 구축되는 일이 빈번하다보니 css3 사용할일이 부쩍 늘어난거 같다. css3를 좀체 사용해본 경험이 없는 나로선.. 그저 그 효과들이 신기할 따름. 특히 반응형에서는 ie10 이상에서 효과가 구현되다보니 css3를 공부하지 않을 수 없는 상황에까지 이르렀다. 아직 갈길이 멀지만 차근차근 학습해나가야하는 상황이다.

귀염둥이 예빈으로 효과들을 꾸며보았다.

앞으로 이 페이지에서 효과들을 덧붙여 나갈 예정이다. css3 효과는 무궁무진하니까~

반응형에서 스크립트 분기 처리 관련해서 현재 화면이 모바일인지, 피시인지 / 안드로이드인지, 아이폰인지 / 사이즈별 구분또한 참고-

 

See the Pen OJyMmVr by rainydaymusickr (@rainydaymusickr) on CodePen.

<div class="container">
	<div class="section ht1">
        <ul id="cardList" class="card_list">
            <li>
                <a href="javascript:void(0);" class="card_item bg3">
                    <h3 class="first">예빈이가 좋아하는 음식은?</h3>
                    <p>인스타그램에서 퍼왔어요~ <br>https://www.instagram.com/yeebeen99/</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);" class="card_item bg4">
                    <h3 class="last">예빈이 외모 실화냐? 브이 찰칵!</h3>
                    <p>인스타그램에서 퍼왔어요~ <br>https://www.instagram.com/yeebeen99/</p>
                </a>
            </li>
        </ul>
	</div>
	<div class="section ht2">
        <ul id="cardList2" class="card_list">
            <li>
                <a href="javascript:void(0);" class="card_item bg1">
                    <h3 class="first">꽃이 이뻐 예빈이가 이뻐? :)</h3>
                    <p>인스타그램에서 퍼왔어요~ <br>https://www.instagram.com/yeebeen99/</p>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);" class="card_item bg2">
                    <h3 class="last">벚꽃에서 사색중인 예빈이</h3>
                    <p>인스타그램에서 퍼왔어요~ <br>https://www.instagram.com/yeebeen99/</p>
                </a>
            </li>
        </ul>
	</div>
	<div class="section">
		<h2 class="tit">예빈나다 귀염둥이 삼춘이 응원한다~</h2>
		<p class="thumb"><img src="https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/e35/p1080x1080/90719873_240516163743998_5955046263581731777_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=102&_nc_ohc=hLdS56IR3qoAX-dRul8&oh=a155952a9e99b053e260b38440ed97dd&oe=5EC19410" alt=""></p>
	</div>
	<div class="section">
		<h2 class="tit">샤방샤방 예빈이~</h2>
		<p class="thumb"><img src="https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s750x750/62397212_453736015463047_1796493235642147277_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=107&_nc_ohc=fM9c1188-4IAX8XBGvj&oh=93ac5e421c091d8e9e120a58501f5f1b&oe=5EC23508" alt=""></p>
	</div>
	</div>
	<div class="section">
		<h2 class="tit">예빈이는 매력적이야~</h2>
		<p class="thumb"><img src="https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s750x750/72749535_756361784833377_7511214706664199405_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=109&_nc_ohc=wzSxhUIX6fEAX8UzeS2&oh=9bc3e6d94b5fa7cee2883e69f63eecea&oe=5EC0A9F4" alt=""></p>
	</div>
	</div>
</div>
*{margin:0;padding:0;}
:root{font-size:62.5%;}
body{font-size:1.8rem;background:#eee;}
.tit{font-size:3rem;}
.section{height:70rem;border-bottom:2px solid #000;}
.section .tit{position:relative;top:15rem;opacity:0;
	transition:all .8s ease-in;
	-webkit-transition:all .8s ease-in;
	-moz-transition:all .8s ease-in;
}
.section .thumb{position:relative;top:30rem;opacity:0;
	transition:all .8s ease-in;
	-webkit-transition:all .8s ease-in;
	-moz-transition:all .8s ease-in;
}
.section.current .tit{top:0;opacity:1;}
.section.current .thumb{top:0;opacity:1;}
.section.ht1,.section.ht2{height:30rem !important;}
.section.ht1{background:steelblue;}
.section.ht2{background:yellowgreen;}
.thumb{width:300px;}
.thumb img{max-width:100%;}
.card_list{font-size:0;}
.card_list li{display:inline-block;width:50%;font-size:16px;vertical-align:top;}
.card_item{display:block;position:relative;height:300px;}
.card_item.bg1{background:url(https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/p640x640/91619893_220415069066027_114223739052292844_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=111&_nc_ohc=Ud9uPbX0EQIAX-HlLdF&oh=d81de3207272af3fad22bccbebc5455d&oe=5EC0C875) no-repeat 50% 50%;background-size:cover;}
.card_item.bg2{background:url(https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/p640x640/92030409_213904483271001_5654075917355010151_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=109&_nc_ohc=TtufWoklGv4AX-ugw0k&oh=1084cf04f1b5cb3ebda7a6acf84d854c&oe=5EC14D3A) no-repeat 50% 50%;background-size:cover;}
.card_item.bg3{background:url(https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/88375954_594536301392138_4896769876647322864_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=102&_nc_ohc=Mo8tCntfEXsAX-seSz3&oh=02e180a9ed37a6f678a6efe1718f5d34&oe=5EC24C29) no-repeat 50% 50%;background-size:cover;}
.card_item.bg4{background:url(https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/84345607_611048452805476_6076410040355020422_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=gaKfSAwWOqcAX8FoBOK&oh=78d86459287c30b0bdc0c63f03f972f8&oe=5EC296E6) no-repeat 50% 50%;background-size:cover;}

.card_item h3{position:relative;height:50px;font-size:12px;opacity:0;text-align:center;color:#fff;transition:all .3s ease-in-out;}
.card_item h3.first {
	transform:translateX(-100%);
	-webkit-transition:translateX(-100%);
	-moz-transition:translateX(-100%);

	background: rgb(2,0,36);
	background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(161,23,140,1) 27%, rgba(0,212,255,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(161,23,140,1) 27%, rgba(0,212,255,1) 100%);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(161,23,140,1) 27%, rgba(0,212,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
}
.card_item h3.last {
	transform:translateX(100%);
	-webkit-transition:translateX(100%);
	-moz-transition:translateX(100%);

	background: rgb(2,0,36);
	background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,117,111,1) 27%, rgba(213,232,36,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,117,111,1) 27%, rgba(213,232,36,1) 100%);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,117,111,1) 27%, rgba(213,232,36,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#d5e824",GradientType=1);
}
.card_item h3:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
.card_item p{position:absolute;left:0;bottom:0;right:0;height:50px;background:rgba(0,0,0,.7);font-size:13px;color:#fff;transition:all .3s ease-in}
.card_list li.on .card_item p{height:50%;}
.card_list li.on .card_item h3{
	opacity:1;
	transform:translateX(0);
	-webkit-transition:translateX(0);
	-moz-transition:translateX(0);
}
@media all and (max-width:480px){
	.thumb{width:100%}
}
var $win = $(window),
    $doc = $(document),
    $html = $('html'),
    $body = $('body');

var viewMode,
    resizeTimer = null;

var sectionAni = function(className){        
    var hitArea = [];
    var timer = null;    

    $('.'+ className ).each(function(){
        hitArea.push( $(this).offset().top );

        $win.scroll(function(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                var hitTop = $win.scrollTop() + $win.height() - 50;

                $.each(hitArea, function(index, item){

                    if( hitTop >= hitArea[index] ){
                        $('.'+ className).eq(index).addClass('current');
                    }else{
                        $('.'+ className).eq(index).removeClass('current');
                    }
                });
            }, 10);
        });
        $win.trigger('scroll');
    });
};
var cardRollOver = function(idName){
	$('#'+ idName).find('a').bind({
        'focusin': function(){
            if(viewMode == 'm'){
                $(this).parent('li').addClass('on');
            }else{
                return;
            }
        },
        'focusout': function(){
            if(viewMode == 'm'){
                $(this).parent('li').removeClass('on');
            }else{
                return;
            }
        }
	});
    $('#'+ idName).find('a').bind({
        'mouseenter': function(){
            if(viewMode == 't' || viewMode == 'p'){
                $(this).parent('li').addClass('on');
            }else{
                return;
            }
        },
        'mouseleave': function(){
            if(viewMode == 't' || viewMode == 'p'){
                $(this).parent('li').removeClass('on');
            }else{
                return;
            }
        }
    });
};

$(document).ready(function(){
	sectionAni('section');
	cardRollOver('cardList');
	cardRollOver('cardList2');
	checkViewMode();

	$win.resize(function(){
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(checkViewMode,100);
	});
});

/*
* checkViewMode
* @func
* return 'm' (모바일) , 't' (태블릿), 'p' (데스크탑) 
* if(viewMode == 'm'){ 조건문으로 사용
*/
function checkViewMode(){
    if ($win.width() < 641){
        viewMode = 'm'	//mobile
    } else if ($win.width() < 1025){
        viewMode = 't'	//tablet
    } else {
        viewMode = 'p'	//PC
    }
    console.log(viewMode);
}

//pc인지 mobile인지 체크 
//버전 1
var renewalChk = function() {
    if (navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)) {
        $("body").addClass("is-mobile");
        $("body").removeClass("is-pc")
    } else {
        $("body").removeClass("is-mobile");
        $("body").addClass("is-pc")
    }
    $(window).resize(function() {
        if (navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)) {
            $("body").addClass("is-mobile");
            $("body").removeClass("is-pc")
        } else {
            $("body").removeClass("is-mobile");
            $("body").addClass("is-pc")
        }
    })
};
renewalChk();

//버전 2
//사용법: if ( Detect.isDesktop() ){ 조건문으로 사용
var Detect = {
    isDesktop : function(){
        var platform = "win16|win32|win64|mac", result = false;
        if( navigator.platform ){
            ( platform.indexOf(navigator.platform.toLowerCase()) < 0 ) ? result = false : result = true ;
        }
        return result;
    },
    isTouch : function(){
        var _isTouchDevice = 'ontouchstart' in document.documentElement;
        return _isTouchDevice;
    }
};

'WEB > 내맘대로 코딩' 카테고리의 다른 글

배열메서드 - 필터링[1]  (0) 2020.05.05
선택요소 추가 및 삭제  (0) 2020.04.20
css3 효과주기  (0) 2020.04.16
틀린그림찾기  (0) 2020.04.15
swiperjs - 앙케이트 설문지  (0) 2020.04.14
전체 체크박스  (0) 2019.08.21