티스토리

odada

검색하기

블로그 홈

odada

odada.me/m

#프론트앤드 #Interactive Web #WebDesign #웹표준 # 웹접근성

구독자: 8

방명록 방문하기

주요 글 목록

GSAP을 이용한 Parallax Scrolling GSAP을 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현GSAP이란?웹 페이지나 웹 앱에서 다양한 애니메이션 효과를 만들 수 있도록 도와주는 강력한 도구로 널리 사용됩니다.GSAP이 라이브러리는 웹 개발자들에게 다양한 기능과 API를 제공하여 스무스하고 반응적인 웹 애니메이션을 쉽게 구현할 수 있게 해줍니다.GSAP (GreenSock Animation Platform)은 HTML5 기반의 애니메이션 라이브러리로, CSS, SVG, Canva.. 공감수 1 댓글수 0 2024. 5. 29.
AOS를 이용한 Parallax Scrolling AOS를 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현AOS(Animate On Scroll) 란?스크롤에 따라 요소에 애니메이션을 적용하는 라이브러리로 패럴랙스 스크롤링을 구현할 수 있음aos : https://michalsnik.github.io/aos/v1 : https://github.com/michalsnik/aosv2 : https://github.com/michalsnik/aos/tree/v2AOS 설치 태그 내에 AOS 라이브러.. 공감수 0 댓글수 0 2024. 5. 29.
Javascript를 이용한 Parallax Scrolling Javascript를 이용한 Parallax Scrolling패럴랙스 스크롤링이란?패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현js를 이용한 패럴랙스 스크롤링window.addEventListener('scroll', function() {})window.scrollY : 현재 스크롤된 y축의 위치- translate, transform, scrollY 등을 이용하여 패럴랙스 스크롤링 구현js를 이용하면 스타일을 변경할 수 있다. 이를 이용하여 스크롤에 따라 요소의 스타일을 변경할.. 공감수 1 댓글수 0 2024. 5. 29.
CSS를 이용한 Parallax Scrolling CSS를 이용한 Parallax Scrolling패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현1. Perspective- perspective 속성css perspective 속성을 이용한 패럴랙스 스크롤링해당 요소의 z = 0 평면과 사용자 사이의 거리transform 효과를 주고자 하는 부모 요소에 적용perspective에 따른 변형 효과perspective: 100px; => 100px만큼 멀어져 보임perspective가 클수록 (거리가 멀수록) 변형 효과가 줄어듦pers.. 공감수 0 댓글수 0 2024. 5. 28.
스크롤 트리거 (Parallax Scrolling) 구현하기 Parallax Scrolling (CSS, JS, AOS, ScrollMagic, GSAP)패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용javascript, css, 라이브러리 등을 이용하여 구현1. CSS를 이용한 패럴랙스 스크롤링css perspective 속성을 이용한 패럴랙스 스크롤링해당 요소의 z = 0 평면과 사용자 사이의 거리transform 효과를 주고자 하는 부모 요소에 적용perspective에 따른 변형 효과perspective: 100px; => 100px만큼 멀어져 보임perspective가 클수록 (거리가 멀수록.. 공감수 0 댓글수 0 2024. 1. 6.
splidejs 슬라이드 핵심 정리 home : https://splidejs.com/ option : https://splidejs.com/guides/options/#type 1. Getting Started CDN - html - scss .slide-intro { .splide { max-width: 800px; margin: 0 auto; position: relative; } .splide__track { overflow: visible; } .splide__slide img { width: 100%; height: auto; } } - js var splide = new Splide( '.splide', { type : 'slide', // perPage: 2, padding: '5rem', gap: '10px', start:.. 공감수 0 댓글수 0 2023. 9. 11.
GSAP & ScollMagic 사용하기 ScrollTrigger란? 동적인 사이트를 만들 때 빠지지 않고 사용하는 라이브러리 중 하나이다. 최소한의 코드로 스크롤 애니메이션을 구현할 수 있다. GSAP 공식사이트 https://greensock.com/docs/v3/Installation cdnjs https://cdnjs.com/libraries/gsap 1. setting //cdn //스크롤 트리거 불러오기(플러그인 안정화) 2. 기본 사용법 gsap.to(대상, { scrollTrigger:{ trigger:대상, 스크롤속성:값, 스크롤속성:값 }, 속성:값, duration:재생시간 }) 3. 샘플 https://greensock.com/scrollmagic/ See the Pen scrollTrigger by odada (@odad.. 공감수 0 댓글수 0 2023. 9. 11.
stickyjs (오브젝트를 고정) 1. sticky 예제 webflow.com/website/Sticky-On-Scroll Responsive web design tool, CMS, and hosting platform | Webflow Build responsive websites in your browser, then launch with our world-class hosting or export your code. Discover the professional website platform built for your business. webflow.com 2. 오브젝트를 고정시켜주는 라이브러리입니다. stickyjs.com/ 공감수 0 댓글수 0 2020. 11. 24.
slick kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 공감수 0 댓글수 0 2020. 11. 20.
10+ Best Javascript Scrolling Animation Plugins bashooka.com/coding/10-best-javascript-scrolling-animation-plugins/ 10+ Best Javascript Scrolling Animation Plugins – Bashooka Scrolling animation helps better control the user flow and make sure important content is appropriately shown to a given user. The idea is that, as a user scrolls through the site, different bashooka.com alexfox.dev/lax.js/ https://alexfox.dev/lax.js/ alexfox.dev github... 공감수 0 댓글수 0 2020. 11. 19.
Apple 제품 페이지 스크롤 애니메이션 Apple은 제품 페이지의 세련된 애니메이션으로 유명합니다. 예를 들어, 페이지를 아래로 스크롤하면 제품이보기에 들어가고, MacBook은 접 히고 iPhone은 회전하면서 하드웨어를 과시하고 소프트웨어를 시연하며 제품 사용 방식에 대한 대화식 이야기를 들려줍니다. iPad Pro의 모바일 웹 경험 비디오를 확인하십시오. 출처 : Twitter 당신이 보는 많은 효과는 HTML과 CSS에서만 만들어지지 않습니다. 그러면 무엇을 물어? 글쎄, 이해하기가 조금 어려울 수 있습니다. 브라우저의 DevTools를 사용하더라도 요소를 지나칠 수없는 경우가 많기 때문에 항상 답을 알 수있는 것은 아닙니다 . 이러한 효과 중 하나를 자세히 살펴보고 어떻게 만들어 졌는지 확인하여 자체 프로젝트에서 이러한 마법 효과 중.. 공감수 2 댓글수 2 2020. 11. 18.
GaugeMeter GaugeMeter.js jQuery 플러그인 jQuery로 제작 된 그래픽 게이지 미터 github.com/Mictronics/GaugeMeter Mictronics/GaugeMeter An elegant and dynamic animated graphical gauge meter built with jQuery. GaugeMeter.js is highly customizable and includes full-radial, semi-radial & arch dials. - Mictronics/GaugeMeter github.com 사용방법 1. jQuery & JavaScript Code 추가 태그 내에 아래 코드 추가 공감수 0 댓글수 0 2020. 10. 13.
무료 템플릿 사이트 html5up.net/ HTML5 UP Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license. html5up.net kalanidhithemes.com/ Kalanidhi Themes kalanidhithemes.com 부트스트랩 템플릿 themehunt.com/ Free Bootstrap Templates & WordPress Themes A great collection of multipurpose free templates and WordPress Themes. Browse and download theme for your personal, business or.. 공감수 0 댓글수 0 2020. 10. 13.
css Animate wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms after This animation will start 500m.. 공감수 0 댓글수 0 2020. 9. 22.
원페이지 애니메이션 스크롤링 (onepage animation scroll) 애니메이션 스크롤링 공용 CDN 사용 script 추가 // scrollTo $('nav a').on('click', function (event) { $.scrollTo(this.hash || 0, 500); event.preventDefault(); }) https://github.com/flesler/jquery.scrollTo flesler/jquery.scrollTo Lightweight, cross-browser and highly customizable animated scrolling with jQuery - flesler/jquery.scrollTo github.com 공감수 0 댓글수 0 2020. 8. 25.
scrollUp jQuery plugin https://github.com/eehd80/scrollup GitHub - eehd80/scrollup Contribute to eehd80/scrollup development by creating an account on GitHub. github.com ScrollUp은 모든 웹 사이트에서 쉽게 작동하는 사용자 정의 가능한 "Scroll to top"기능을 만드는 경량 jQuery 플러그인입니다. 사용하는 방법 jquery.scrollUp.min.js 파일을 포함하고 문서 헤드에 다음을 배치하기 만하면됩니다 (jQuery가 포함되어 있는지 확인). 기본 옵션 $(function () { $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistanc.. 공감수 0 댓글수 0 2020. 8. 25.
유용한 라이브러리 모음 이미지 갤러리 fancyapps.com/fancybox/3/ fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script Combination of jQuery, CSS transitions to spice up the way modal window opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh eu nibh scelerisque malesuada. Morbi mollis eleifend turpis. Mauris consequat convallis volutpa fancyapps.com http://fan.. 공감수 0 댓글수 0 2020. 4. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.