트라이에이스 생활

mswitch.co.kr에 사용된 JS $(document).ready(function () { mswitch = { init: function () { mswitch.bubble(); mswitch.scroll(); mswitch.gnb(); mswitch.anchor(); mswitch.mobile(); mswitch.layer(); }, /* 거품 올라오는 애니메이션 */ bubble: function() { var bArray = []; var sArray = [6,8,10,12,20,50]; var $bubbles = $('.bubbles'); var $document_width = $(document).width(); if($document_width > 800) { for (var i = 0..

부드러운 스크롤 사용시 스크롤이 끝난 후에 이벤트를 적용할 경우 사용합니다. $.fn.scrollStopped = function(callback) { var that = this, $this = $(that); $this.scroll(function(ev) { clearInterval(scrollInterval); clearTimeout($this.data('scrollTimeout')); $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev)); }); }; $(window).scrollStopped(function(ev){ console.log('스크롤 정지'); });

www.blueb.co.kr 출처: www.blueb.co.kr/?c=1/6&uid=4147

1. animation animation-name: @keyframes 이름 (예제에서는 fadeOut 을 사용) animation-duratuion: 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용 animation-timing-function: 애니메이션 속도 조절/그래프 (linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier) animation-delay: 애니메이션을 시작하기 전 지연시간 설정 animation-iteration-count: 반복 횟수 지정 animation-direction: 반복 방향 설정 (normal/reverse/alternate/alternate-reverse) animation-fill-mode: 애니메이션 시..

1. 가로 리사이즈시 사용하는 소스 var fired = []; $(window).on('resize', function () { if ($(this).width() = 768 && !fired[1]) { fired[0] = false; fired[1] = true; } });

CSS clip-path를 사용해 IE에서는 제대로 나오지 않습니다. Bye Bye 2020 Happy New Year 2021 출처: www.youtube.com/watch?v=2xYN32DOGRE&list=LL&index=1&t=195s&ab_channel=OnlineTutorials

출처: github.com/loktar00/JQuery-Snowfall

Give me a clicky Go on, go already! Click it ya hear! Tappy tappy Go back 출처: www.youtube.com/watch?v=LKwXoaFwYFk&list=LL&index=1&t=256s&ab_channel=DesignCourse 사용라이브러리: animejs.com/ anime.js Javascript animation engine animejs.com animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your proj..