index.html

---
layout: home
title: Home
---

<div stlye="position:absolute; bottom:10%;">
	<div class="container">
	</div>
</div>

<div id="work-content">
	<div class="article">
	</div>
</div>

<script src="https://corentinfardeau.github.io/horizontal-scroll/index.js"></script>
<script>
  $(document).ready(function(){
    $.ajax({
      url : "{{ site.work_url }}/work.json",
      dataType : "json",
      success : function(data){
        var card_wrap = $('.container');
        var show = "";
        $.each(data,function(index, item){
						show += '<div class="block">';
						show += '	<a href="#none" class="thumb" onClick=abs('+item.ID+'); title="'+item.tit+' 포트폴리오">'
						show += '		<p class="ptit">'+item.tit+'</p>';
						show += '		<p class="pcnt">'+item.cnt+'</p>';
						show += '	</a>'
						show += '	<div class="card-area" style="background-image:url({{ site.work_url }}/img/id'+item.ID+'/card_img.jpg);">'
						show += '		<div class="info">';
						show += '			<p class="effect-box"></p>';
						show += '			<p class="cnteffect-box"></p>';
						show += '		</div>';
						show += '	</div>'
						show += '</div>';
        });
        card_wrap.append(show);
      },
			complete: function(){
			},
    });
	});

	$( document ).ajaxStop(function() {
		var blocks = document.getElementsByClassName('block');
		var container = document.getElementsByClassName('container');
		var hs = new HorizontalScroll.default({
			blocks : blocks,
			container: container,
			isAnimated: false,
			springEffect: 0.8
		});
	});

  function abs(listNumber){
  	$.ajax({
      url : "{{ site.work_url }}/work"+listNumber+".html",
      dataType : "html",
      success : function(data){
				$('#work-content').css('display','block');
        $('#work-content>.article').append(data);
				$('.home-template>#wrapper').css('z-index','10');
				setTimeout(function(){
					$('#work-content').addClass('active');
					let close = '<button class="close" type="button" onClick="contentClose()";><img src="{{ site.work_url }}/img/down-arrow.svg"></button>'
					$('#work-content>.article').append(close);
				}, 10);
				setTimeout(function(){
					articleEffect(1,0);
				},200);
      },
    });

  };

	function articleEffect(opacity, topPosition){
		$('#work-content>.article').css({
			'opacity':opacity,
			'transform':'matrix(1, 0, 0, 1, 0, '+topPosition+')',
		})
	}

  function contentClose(){
	  $('#work-content').removeClass('active');
	  $('#work-content>.article').empty();
		$('.home-template>#wrapper').css('z-index','1');
		articleEffect(0,100);
  }

	let cardList = document.querySelector('.container');
	let timer;
	cardList.addEventListener("mouseover", cardOverEventHandler)
	cardList.addEventListener("mouseout", cardOutEventHandler)

	function randDelay(min, max) {
		return Math.floor(Math.random() * (max-min+1)+min);
	}

	function cardOverEventHandler(event){
	  let target = event.target;
	  if(target.className === 'thumb'){
			const card = target.parentNode;
			const titEffectTarget = card.querySelector('.effect-box');
			const cntEffectTarget = card.querySelector('.cnteffect-box');
			titEffectTarget.innerHTML = '';
			cntEffectTarget.innerHTML = '';
			const titTypingText = target.querySelector('.ptit').innerText;
			const cntTypingText = target.querySelector('.pcnt').innerText;
			TypingEffect(titEffectTarget, titTypingText);
			TypingEffect2(cntEffectTarget, cntTypingText);
	  }
	}

	function cardOutEventHandler(event){
	  let target = event.target;
	  if(target.className === 'thumb'){
	    clearInterval(timer);
			clearInterval(timer2);
	  }
	}

	function TypingEffect(effectTarget, typingText){
		let i = 0;
		timer = setInterval(function() {
			if (i < typingText.length) {
				let text1 = document.createTextNode(typingText.charAt(i));
				effectTarget.appendChild(text1);
				i++;
			} else {
				clearInterval(timer);
			}
		}, randDelay(30, 40));
	}

	function TypingEffect2(effectTarget, typingText){
		let a = 0;
		timer2 = setInterval(function() {
			if (a < typingText.length) {
				let text1 = document.createTextNode(typingText.charAt(a));
				effectTarget.appendChild(text1);
				a++;
			} else {
				clearInterval(timer2);
			}
		}, randDelay(30, 40));
	}

</script>