본문 바로가기
아카이브

02 . NAVER clone , 동적효과를 위한 js 추가

by PilYeooong 2019. 11. 14.

추가 기능

1. 급상승 검색어 및 연합뉴스 컨텐츠 슬라이드 효과

네이버 페이지

2. 검색창 위에 마우스 오버시 나오는 급상승 검색어 리스트

네이버 페이지 급상승 검색어 원본

 

급상승 검색어

<div class="navbar-rank">
	<ul class="rank">
		<li class="rank-item"><span>1</span> 필영</li>
		<li class="rank-item"><span>2</span> 네이버</li>
		<li class="rank-item"><span>3</span> 클론</li>
		<li class="rank-item"><span>4</span> 페이지</li>
		<li class="rank-item"><span>5</span> 입니다</li>
		<li class="rank-item"><span>6</span> using</li>
		<li class="rank-item"><span>7</span> HTML</li>
		<li class="rank-item"><span>8</span> CSS</li>
		<li class="rank-item"><span>9</span> JS</li>
		<li class="rank-item"><span>10</span> WEB</li>
	</ul>
	<i class="fas fa-angle-down"></i>
</div>
.navbar-rank{
    display:flex;
    width:200px;
    height:17px;
    padding-left: 145px;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
}

.rank{
    position: absolute;
    top:0px;
    left:135px;
    display: flex;
    flex-direction: column;
    width:60%;
    justify-content: space-around;
    overflow: hidden;
}

.rank-item{
    margin-right: 105px;
    width:100px;
}

.navbar-rank ul, li {
    -webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
    -o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
    transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
var rankWrapper = document.querySelector('.navbar-rank'); // 부모박스
var rank = document.querySelectorAll('.rank-item'); // 컨텐츠
var totalRank = rank.length //rank-item의 갯수
var rankboxHeight = rankWrapper.clientHeight; // rankWrapper의 내부 높이를 픽셀로 반환 -> 17px
var rankIndex = 0;
var slider = document.querySelector('.rank'); // rank-item을 담고있는 박스

slider.style.height = rankboxHeight * totalRank + 'px';



showRanks();

function showRanks() {
    
    for(var i=0;i<rank.length;i++){
        slider.style.top = -(rankboxHeight * rankIndex) + 'px';    
    }
    rankIndex++;
    if (rankIndex === totalRank) {
        rankIndex = 0;
    }
    setTimeout(showRanks, 2500); 
}

급상승검색어 파트의 코드 구성은 이런식으로 되어있다.
슬라이드는 효과는 슬라이드할 컨텐츠들을 쭉 이어붙여놓고 overflow:hidden을 적용하여 넘치는 부분의 컨텐츠들은 보이지 않게 해두어 컨텐츠 하나씩만 보이도록 한다.
그리고 이 프로젝트에서는 위또는 아래로 슬라이드 되는 효과이기때문에 position:absolute와 top속성을 이용해 표시하는 컨텐츠가 바뀌도록 효과를 적용하였음. 마무리로 transition효과를 적용함으로써 슬라이드되는 효과를 주면 마무리 됨.

 

 

연합뉴스 

<div class="newswrapper">
	<ul class="yeonhap-contents">
		<li class="news-item"><a href="">'손흥민, 고메스에 '사과' 문자…에버턴 감독 "고메스 복귀 가능'</a></li>
		<li class="news-item"><a href="">흑사병, 중국서 2명 확진 '비상'… 감염 경로는 무엇?</a></li>
		<li class="news-item"><a href="">[날씨] 요란한 비, 첫눈 가능성...서울·경기·영서 한파주의보</a></li>
		<li class="news-item"><a href="">'무신사TV 10만' 랜덤 쿠폰 퀴즈 …정답 공개</a></li>
		<li class="news-item"><a href="">무선 충전기, 충전할 때 오히려 전자파 덜 나온다</a></li>
	</ul>
</div>
.newswrapper{
    position: relative;
    overflow: hidden;
    /* padding-top: 12px; */
    height:18px;
}
.yeonhap-contents{
    position: relative;
    margin: 0 0 0 16px;
    height:20px;
}
.news-item{
    height:18px;
}
.newswrapper ul, li {
    -webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
    -o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
    transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
var newsWrapper = document.querySelector('.newswrapper');
var news = document.querySelectorAll('.news-item');
var totalnews = news.length;
var newsboxHeight = newsWrapper.clientHeight;
var newsIndex = 0;
var newsslider = document.querySelector('.yeonhap-contents');

newsslider.style.height = newsboxHeight * totalnews + 'px';

showNews();

function showNews() {
    
    for(var i=0;i<news.length;i++){
        newsslider.style.top = -(newsboxHeight * newsIndex) + 'px';    
    }
    newsIndex++;
    if (newsIndex === totalnews) {
        newsIndex = 0;
    }
    setTimeout(showNews, 3000); 
}

급상승검색어와 컨텐츠 크기만 다를뿐 같은 코드를 사용하였으므로 주석과 설명은 생략

 

 

급상승검색어 박스

<div class="rankbox" >
           <div class="rankbox-header">
                <div class="title">급상승 검색어</div>
                <div class="title-option"><span>전체연령<span>·</span></span><span>현재</span></div>
            </div>
            <div class="rank-tab">
                <div class="top10">
                    1-10위
                </div>
                <div class="top20">
                    11-20위
                </div>
            </div>
            <ul class="rankbox-list">
                <li class="item"><div>1</div>필영<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>2</div>네이버<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>3</div>클론<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>4</div>페이지<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>5</div>입니다<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>6</div>using<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>7</div>HTML<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>8</div>CSS<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>9</div>JS<img src="imgs/rankbox.png" alt=""></li>
                <li class="item"><div>10</div>WEB<img src="imgs/rankbox.png" alt=""></li>
            </ul>
            <div class="rank-time">
                <div class="time">2019.11.13 16:53 기준</div>
                <div class="question-img"><img src="imgs/rankquestion.png" alt=""></div>
                <div class="datalab"><img src="imgs/datalab.png" alt=""></div>
                <div class="tracking">급상승트래킹</div>
                <div class="rank-arrow"><img src="imgs/rankarrow.png" alt=""></div>
            </div>
       </div>    
</div>
.rankbox{
    display: none;
    position: absolute;
    top:6.7%;
    left:64.5%;
    width:329px;
    height:332px;
    background-color: #fff;
    border:1px solid #bec8d8;
    z-index: 100;
}
.rankbox-header{
    padding:16px 16px 0;
    color:#000;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: -1px;
    display: flex;
}
.title-option{
    color:#666;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 400;
    padding-left: 145px;
}
.title-option span{
    padding-left: 5px;
}
.rank-tab{
    /* padding:7px 9px 6px 17px; */
    margin:12px 0 0 15px;
    width:295px;
    height:22px;
    color:#888;
    border: 1px solid #e3e7ee;
    display: flex;
}
.top10{
    display: flex;
    justify-content: center;
    align-items: center;
    width:50%;
    height:100%;
    color:#222;
    font-size: 12px;
    background-color: #fff;
    border-right: 1px solid #e3e7ee;
}
.top20{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    background-color: #f9fafc;
    text-align: center;
    width:50%;
}
.rankbox-list{
    font-size: 12px;
    margin-top:12px;
    margin-left: 20px;
    width:285px;
    height:215px;
    border-bottom: 1px solid #f1f3f6;
}
.rankbox-list .item{
    display: flex;
    align-items: center;
    margin-bottom:7px;
    font-weight: 500;
}
.rankbox-list .item:nth-child(1){
    font-weight: 750;
}

.rankbox-list .item div{
    /* padding-left: 5px; */
    width:20px;
    /* margin-right: 5px; */
    font-size: 14px;
}
.rankbox-list img{
    position: absolute;
    width:20px;
    height:20px;
    right:20px;
}
.rank-time{
    display: flex;
    font-size: 11px;
    align-items: center;
    color:#888888;
    /* justify-content: space-around; */
    height:35px;
}
.rank-time .question-img img{
    width:16px;
    height:16px;
}
.rank-time .datalab img{
    width:58px;
    height:18px;
}
.rank-time .rank-arrow img{
    width:12px;
    height:13px;
}
.rank-time .time{
    padding-left: 18px;
}
.rank-time .question-img{
    padding-left: 3px;
}
.rank-time .datalab{
    padding-left: 35px;
}
.rank-time .tracking{
    padding-left: 4px;
    font-size: 12px;
    color:#666;
}
var rankboxrange = document.querySelector('.navbar-rank')
var rankbox = document.querySelector('.rankbox')

rankboxrange.addEventListener('mouseover', function(){
    rankbox.style.display = 'block';
})

rankbox.addEventListener('mouseover', function(){
    rankbox.style.display = 'block';
})

rankbox.addEventListener('mouseout', function(){
    rankbox.style.display = 'none';
})

 

마우스오버시 나타나는 급상승검색어박스의 코드이다.
처음은 CSS hover로 구성해보려했으나, 박스를 숨겨둬야하는데 display:none속성에는 hover할수가 없어 적용이 불가하였다. 물론 방법은 있겠지만 JavaScript로 하는 좀 더 편한 방법이 있어 자바스크립트로 구성하였다.
마우스 오버시 급상승검색어박스의 display를 block으로 바꾸어 나타나게 하고, 마우스가 박스 범위밖으로 나갈시 display속성을 none 변경한다.

 

구현 결과

클론 페이지 슬라이드 구축 결과

 

클론 페이지 급상승검색어 구현 결과

 

 

깃헙 저장소 - https://github.com/PilYeooong/naverclone

'아카이브' 카테고리의 다른 글

01. JavaScript - 이미지 슬라이드 ImageSlide  (0) 2019.11.15
191113 / Today I Learned  (0) 2019.11.14
191111 / Today I Learned  (0) 2019.11.11
191110 / Today I Learned  (0) 2019.11.10
191109 / Today I Learned  (0) 2019.11.09

관련글

티스토리툴바