*branch는 초기 init으로 생성된 master나무에는 영향을 미치지않으므로 master로 만들어진 netlify에도 영향이없으므로 master에서 만들어진 웹페이지에서 signin 같은 것들을 branch에서 만들어 작업이 완료되면 signin과 master를 병합하여 하나로 만들면 나타나게 된다.
spyEls.forEach( function (spyEl) { new ScrollMagic .Scene({ //감시기능 triggerElement: spyEl, // 보여짐을 감시한다. triggerHook: .8 // 뷰포트 기준 80% 부근에 위 요소가 도달하면 작동 }) .setClassToggle(spyEl, 'show') //.Scence에서 감시완료된 것 spyeEl에 show클래스를넣음 .addTo(new ScrollMagic.Controller()); });
var firstScriptTag = document.getElementsByTagName('script')[0]; => html에서 script태그들의 0번인 맨처음을 변수 firstScriptTag에 생성
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); => html에서 firstScriptTag인 script태그의 맨처음의 부모 즉 header의 맨 앞인 firstScriptTag앞에 tag를 삽입 즉, 맨 처음 이 스크립트가 실행되도록 설정하는것
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubeIframeAPIReady() {
new YT.Player('player', { =>html에서 선언한 <div id="player></div>
videoId: 'M7lc1UVf-VE',
playVars:{autoplay:true, loop:true, playlist:'비디오번호'}, =>재생옵션들(loop는 반복한 playlist로 영상번호가 함께 다시작성 되어야한다.)
events:{
onReady: function(event){ => 영상시작 준비가 되면 function 함수작동 / event 는 위 모든 영상 요소들이다.
event.target.mute();
}
});
}
─────────────────────────────────────────────────────g[gsap로 이미지 반복움직이기]
function floatingObject(selector){
gsap.to(selector, 1, {
y:20, //y로 20움직이기
repeat:-1, //반복횟수로써 -1로할 시 무한반복
yoyo:true, //1회 끝날시 반대로 되돌림
//+gsap easing 함수로 부드러운 처리를 할수있다.
//+delay 로 시작 시간을 조절 할 수 있다.
});
}
floatingObject('.floating') // 바로 작동시키기
[gsap로 이미지 랜덤 수치로 움직이기]
// 범위 랜덤 함수(소수점 2자리까지) function random(min, max) { // `.toFixed()`를 통해 반환된 문자 데이터를, // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환 return parseFloat((Math.random() * (max - min) + min).toFixed(2)) }
2. 기존 슬라이드 구동을 할 수 있도록 JS에 작성된 new Swiper에 pagination을 작성한다. el에 index.html에서 pagination의 선택요소자를 연결하고 clickable을 설정하여 클릭하여 반응하도록 설정한다. 아래에는 navigation을 작성하여 prevEl에는 index.html에서 swiper-prev 선택요소자를 nextel에는 swiper-next를 연결한다.
