본문 바로가기
반응형

Dev

 (122)
모션 함수들 스크롤 모션 function scrollMotion(tl, obj) { var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: obj, offset: -300 }) .setTween(tl) .reverse(false) .addTo(controller); //.addIndicators(true); } 돈 흩날리면서 떨어지는 모션 function moneyMotion1(obj, d, tg) { var tl = new TimelineMax(); tl.to(obj, 0.7, { opacity: 1, delay: d }).to(obj, 3, { bezier: [ { x: 70, y: 100 }..
슬라이드 진행시 다음 모션 미리 작동 되어 있을 때 // 슬라이드 시, 200ms의 시간안에 다음 슬라이드로 넘어갈 때 //기존 슬라이드의 높이가 보이기 때문에 모션이 이미 진행된 상태로 인식 됨.. // 해결방법 function scrollUp() { $('body, html').stop(true).animate( { scrollTop: '0', }, 200, // scrollUp() 함수 안에 함수를 만들어서 초기화코드 추가! function() { motionReset(); mainMotion(); mainMotion2(); } ); }
스크롤 했을 때 헤더 고정 참고해라 ilottedfs.com/LDFmagazine/201022/sub3/index.html function topScrollMotion() { // IE하위 버전 호환용 var supportPageOffset = window.pageXOffset !== undefined; var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat'; var header = $('.header'); var back = $('.header_back'); var title = $('.header_title'); var share = $('#main_share'); // 현재 스크롤 값 var _top = supportPageOffset ? window.pageYOff..
가운데 정렬 하는법 상하좌우 가운데 맞추는 법!! cdn-origin-1.imform.net/test/shinsegae/promotion/index.html 개발자도구 해서 확인해봐
Swiper 자주 사용하는 기능 [Swiper Parameters] - autoHeight: boolean - speed: number (Duration of transition between slides (in ms)) - on: object (Register event handlers) - loop: boolean * slide - spaceBetween - slidesPerView - centeredSlides * swiping - allowSlidePrev: boolean - allowSlideNext: boolean // false하면 드래그 슬라이드 작동 x, 네비게이션 클릭 이동은 작동함! [Slider Methods & Properties] - mySwiper.slides (Dom7 배열과 유사한 슬라이드 HTML 요소 ..
함수 인자 사용법 보호되어 있는 글입니다.
React를 박살내보자ㅏㅏㅏㅏ React는 Facebook이 만든 사용자 UI 구축을 위한 라이브러리다! 따라서 오직 사용자의 View에만 초점을 맞추고 있음! 즉, Routing 같은 기술이 리액트 자체에 들어가있지 않는다는 얘기!! 하지만 개발자들이 두고 볼 쏘냐~ 리액트에 필요한 여러가지를 만들어놔서 사실상 프레임워크라고 봐도 무방할 정도!(지금까지 프레임워크인줄 알았어..) 뭐가 됐든, 리액트는 3가지 대표적인 특징이 있다 1. JSX 문법 JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 줌. 아래 코드를 보자. 지금은 이해 못해도 괜찮괜찮! class HelloMessage extends React.Component { render(..
git 늅늅을 위한 기초 사용법 - 2 !!!! 가자ㅏㅏㅏㅏㅏㅏ 이번 포스팅에서는 저번 포스팅에서 설명했던 기본적인 명령어보다 좀 더 나아가서 몇 가지 개념과 명령어를 더 공부해보려고 한다. 저번 포스팅에서는 리모트 서버에서 소스를 클론하고 수정한 후 다시 리모트 서버에 업데이트하는 과정에 대해 집중해서 설명했다면 이번 포스팅에서는 Git의 메인 주제인 버전 관리에 대해 더 다뤄볼 예정이다. 그럼 저번 포스팅과 마찬가지로 간단한 용어와 개념에 대한 설명한 후, 그 개념들을 사용하기 위한 명령어를 설명하도록 하겠다. 용어와 개념 알아보기 Git은 버전을 효율적으로 관리하기 위해 몇 가지 개념을 제시하고 있다. 현재 나의 버전 상태를 의미하는 HEAD, 작업 공간인 브랜치(Branch), 브랜치를 합치는 머지(Merge)와 리베이스(Rebase)등이 그렇다. 그리고 이런..
반응형

티스토리툴바