210802_포트폴리오 사이트 작업

Yjin·2021년 8월 2일
0

얼레벌레 기능 탐구 (Updating...)

목록 보기
1/1
post-thumbnail
(아너무너무어렵고힘들다!)

이 곳엔 포트폴리오 작업 시 새로 알게 된 기능들을 아카이빙합니다.
(latest update. 2021.08.04)


1.360도 무한히 회전하는 CSS code

<!--html code-->
<div class="infinity-img">
  <img src="../portfolio_GY/img/intro_rotate.png" alt="">
</div>
/* CSS, Keyframes code */
.intro .infinity-img img{
	width: 100%;
	animation: rotate_image 10s linear infinite;
	transform-origin: 50% 50%;
    }

@keyframes rotate_image {
  0%{}
  100% {
    transform: rotate(360deg);}
}

transform-origin의 50% 50%은 회전의 중심 위치를 나타내는데, 완전 원형으로 회전시키려면 이미지 파일의 정중앙에 회전시키려는 중심이 위치 해야한다.

만약 이미지가 중심위치에서 상하좌우 비대칭이라면 다른 이미지 편집 툴을 사용하여 대칭으로 맞춰줘야 함.

animation 특성의 10s는 time period를 뜻하는데, 적을수록 빠르게 회전하므로 적절히 조절하여 설정해주면 됨

2.가로 스크롤 마우스 휠 이벤트

포트폴리오 부분 가로 스크롤

HTML

   <body>
    <section class="pf">
      <div class="bg"></div>
      <div class="center">
        <div class="title-text">
          <h3>Portfolio.</h3>
          <p>이런 것들을 즐겁게 뚝딱거렸어요!</p>
        </div>
        <div class="pf-box">
          <div class="each-pf-box">
            <div class="pf-imgbox">
              <div class="pfimg"></div>
            </div>
            <div class="pf-txtbox">
              <b>My Schedule</b>
              <p>스케줄을 업데이트 할 수 있는 홈페이지.<br>글쓰기 수정·삭제 / 차트 값 반영 구현.</p>
              <span class="first">프로젝트 인원 | 1인</span>
              <span>작업 기간 | 2주</span>
              <a href="#">DETAIL</a>
              <a href="#">WEB SITE</a>
            </div>
          </div>
          <div class="each-pf-box">
            <div class="pf-imgbox">
              <div class="pfimg"></div>
            </div>
            <div class="pf-txtbox">
              <b>My Schedule</b>
              <p>스케줄을 업데이트 할 수 있는 홈페이지를 만들었습니다.</p>
              <span>프로젝트 인원</span>
              <span>작업 기간</span>
            </div>
          </div>
        </div>
      </div>
    </section>
   </body>

CSS

.pf {position: relative;}
.pf .bg {background: url(../img/portfolio_bg.png) no-repeat center center; background-size: cover; width: 100%; height: 100%; position: absolute; z-index: -1;}
.pf .center {overflow-x:scroll;}
.pf-box {width: 400%; position: relative; margin: 50px 0; display: flex;}
.pf-box .each-pf-box {width: 25%; display: flex; align-items: center;}
.each-pf-box .pf-imgbox {width: 70%; height: 600px; overflow: hidden;}
.each-pf-box .pf-imgbox .pfimg {background: url(../img/slide_01.jpg) no-repeat center center; background-size: cover; width: 100%; height: 100%;}
.each-pf-box .pf-txtbox {padding: 0 0 0 40px; transform: translate(0, 50%);}
.each-pf-box .pf-txtbox b{font-size: 30px;}
.each-pf-box .pf-txtbox p {font-size: 16px; padding: 10px 0;}
.each-pf-box .pf-txtbox span {font-weight: 300; padding-top: 10px; display: block;}
.each-pf-box .pf-txtbox .first {margin-top: 10px;}
.each-pf-box .pf-txtbox a {padding: 15px 20px; margin-top: 20px; display: inline-block; border: 1px solid #222; margin-right: 10px;}

jQuery

$(function(){
  $(".pf .center").on('mousewheel',function(e){
    var wheelDelta = e.originalEvent.wheelDelta;
    if(wheelDelta > 0){
      //console.log("up");
      $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
    }else{
    //console.log("down");
      $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
    }
  });
});

↑ 아직 로직이 이해안되기 때문에 일단 적어둔다. 이해는 나중에ㅠ

3. 메인페이지에서 버튼 클릭 시 해당 컨텐츠로 이동하는 로직

Javascript

const navButton = document.querySelectorAll('.nav button');
//console.log(navButton);
const home = document.querySelector('.intro');
const aboutMe = document.querySelector('.about');
const portFolio = document.querySelector('.pf');
const design = document.querySelector('.design');

const homeTop = home.offsetTop;
const aboutMeTop = aboutMe.offsetTop;
const portFolioTop = portFolio.offsetTop;
const designTop = design.offsetTop;

navButton[0].onclick = function(){
  window.scroll({top:homeTop, behavior: 'smooth'})
}

navButton[1].onclick = function(){
  window.scroll({top:aboutMeTop, behavior: 'smooth'})
}

navButton[2].onclick = function(){
  window.scroll({top:portFolioTop, behavior: 'smooth'})
}

navButton[3].onclick = function(){
  window.scroll({top:designTop, behavior: 'smooth'})
}

↑ 노가다의 결정체. 추후 리팩토링 필요!

4. 텍스트 말줄임표 치환

CSS

/* 긴 대쉬보드명이 오는 경우에 "..." 표시를 위함 */
.Button.dashboard-menu {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*중요!! 까먹지 말기 */
    -webkit-box-orient:vertical; 
  	-webkit-line-clamp:2; 
  	display: -webkit-inline-box;
}

↑-webkit-line-clamp

-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한.

1.display 속성을 -webkit-box 또는 -webkit-inline-box설정
2.-webkit-box-orient (en-US) 속성을 vertical로 설정
위 두가지 조건이 충족해야 적용됨.

-webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 overflow 속성 또한 hidden으로 설정해야 합니다.

앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp

JS

var length = 13; // 표시할 글자수 기준
if (temp.length > length) {
  temp = temp.substr(0, length-2) + '...';
}

↑ 글자수 기준 말고 박스 크기 기준은 안되나? 해봐야지!


5. 가로 스크롤 시 body 세로 스크롤 멈추기

1차 : mouseover 와 mouseout 활용

$(function () {
  $(".artist_container")
    .mouseover(function () {
      $("body").css("overflow-y", "hidden");
    })
    .mouseout(function () {
      $("body").css("overflow-y", "auto");
    });
 });

결과 : 실패!
why? : 정상 작동은 했지만 마우스가 들어오고 나갈때를 설정하니 컨텐츠가 거의 안 보이는 곳에서도 멈춰버림.

2차 : 컨텐츠 박스 (artist_container)의 스크롤값을 읽어 조건문 활용

$(".artist_container").on("mousewheel", function (e) {
    var wheelDelta = e.originalEvent.wheelDelta;
    var boxWidth = $(this).scrollLeft(); //최소 0 ~ 최대 2464
    //console.log(boxWidth);
    if (boxWidth == 0 || boxWidth == 2464) {
      $("body").css("overflow-y", "auto");
    } else {
      $("body").css("overflow-y", "hidden");
    }
  });

결과 : 절반은 성공?
why? : 이것도 정상작동했지만, 최초로 마우스휠을 돌려야 기능 수행이 된다. (마우스 휠 이벤트를 실행할 때 같이 넣어서 그렇다.)
다른 방법 생각해봐야 할 듯 하다.

3차 : 컨텐츠 박스 (artist_container)의 스크롤값+mouseover&mouseout 함수 붙이기

$(".artist_container")
    .on("mousewheel", function (e) {
      var wheelDelta = e.originalEvent.wheelDelta;
      var boxWidth = $(this).scrollLeft(); //최소 0 ~ 최대 2464
      //console.log(boxWidth);
      if (boxWidth == 0 || boxWidth == 2464) {
        $("body").css("overflow-y", "auto");
      } else {
        $("body").css("overflow-y", "hidden");
      }

      if (wheelDelta > 0) {
        //스크롤 up 시 -150 찍힘
        $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
        //-(-150)+ 현재 요소의 스크롤 위치
      } else {
        //스크롤 down tl +150 찍힘
        $(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
      }
    })
    .mouseover(function () {
      $("body").css("overflow-y", "hidden");
    })
    .mouseout(function () {
      $("body").css("overflow-y", "auto");
    });

결과 : 성공..?
why? : 다 정상작동 하지만 스크롤값 처음 읽어들일때와 마우스 호버할 때 약간 충돌이 있는 듯 함. 일단 디자인 완성해놓고 다시 보기!

6. 시간 변화에 따른 이미지 변경

$(function(){
  function nightCheck(){
    var todayHour = new Date().getHours(); //그 날의 시간만 추출
    //console.log(todayHour);

    if(todayHour < 18){
      // day time
      //alert('day');
      $('.lobby_bg .bg_img').attr('src', 'img/lobby.jpg');
      $('.contents').removeClass('is_night');
    }else if(todayHour > 18){
      // night time
      //alert('night');
      $('.lobby_bg .bg_img').attr('src', 'img/lobby-night.jpg');
      $('.contents').addClass('is_night');
    }
  }

  nightCheck();

  var landingInt = setInterval(function(){
    nightCheck();
  },1000) //check time on 1s
});

*단순하게 시간만 불러와서 1초단위로 체크하는 기능

7. clip-path (css)

clip-path CSS 속성은 요소의 클리핑 범위를 지정한다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨짐.
참고 : https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

min()/max() : ,로 값들을 나열한 후, 그 중 작은 것/큰 것을 선택한다.
ex) width: max(100%, 500px) 인 경우, 가로를 꽉 채우다가 500px보다 작아지게 되면 더 이상 줄어들지 않는다.

profile
Yjin
검색의 굴레에 갇힌 신입개발자

0개의 댓글