2018/12 (8) 썸네일형 리스트형 그림자가 긴 텍스트 (only css) See the Pen Pure CSS Long Shadow by Rafael González (@rgg) on CodePen. 텍스트 네온사인 애니메이션 (only css) See the Pen cibuh by Timothy M. LeBlanc (@WhiteWolfWizard) on CodePen. 텍스트 배경 애니메이션 (only css) See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen. 텍스트가 스크롤 되는듯한 효과 (only css) See the Pen Title Scroller by Jordan Halvorsen (@halvo) on CodePen. 부드럽게 나타나는 텍스트 See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen. 오늘 하루동안 열지않기 레이어 팝업 html 오늘 하루동안 보지 않기 CLOSE css #pop{position:absolute; // 이외에는 자기 마음대로 설정} .close div{float:left; text-align:right;} #check{font-size:12px; font-family:'돋움'; padding-left:10px;} #close{float:right; font-size:13px; padding:5px; font-weight:bold;} #close a {color:#fff;} javascript 1.head 태그 안에서 먼저 cookie 세팅을 해줘야한다. 2. 팝업 소스가 적힌 뒤에 적용되어야 하는 script가 있다. 와 사이에 script 로 넣음. 화면이 로드되었을때 delay 후 스크립트 적용 화면이 로드되었을때 무언가 fade in 된다던지, 효과를 넣을때 간단하게 쓸수있는 함수. $('#section_01').delay(200).queue(function(){ $(this).addClass('active1'); }); 이런식으로 선택자에게 delay함수를 써주고, addClass를 해주면 된다. 이때, 미리 css 에서 section_01이 active1 클래스를 가졌을 때 특정 부분의 opacity가 1이 되도록 하고, section1에는 transition: all 1s ease 0.5s 등으로 애니메이션 효과를 준다. 예시) html 나타나는 부분 css #section1 .content{opacity: 0; transition: all 0.3s;} #section1.active .c.. 화면 크기(width)에 따라 스크립트 적용 pc버전과 모바일 버전에서 적용되어야 하는 script가 다른 경우가 많다. 이럴때 쓸 수 있는 함수. 스크립트 적용시, 하나의 함수를 선언해서 함수 안에서 적용하는게 훨씬 안정적이다. function 함수이름(){ var winWidth = $(window).width(); if (winWidth >= 1024) { //viewport가 1024보다 클때 적용되는 스크립트 } else { //viewport가 1024보다 작을때 적용되는 스크립트 } } //함수지정 함수이름(); // 함수선언 이런식으로 함수 지정 후 선언해주면 끝 ! 이전 1 다음
