웹사이트 검색
자바스크립트 - 페이지 스크롤 위치에 대응하는 CSS 애니메이션
애니메이션이 페이지 스크롤 위치에 맞춰서 작동하도록 만들려면 어떻게 해야 하나요? 사용자가 해당 위치를 지나치면 애니메이션이 위치 A로 가고, 사용자의 페이지 스크롤 위치가 그 위에 있으면 위치 B로 가도록 만들려면 어떻게 해야 하나요?
제가 만들고 싶은 것의 모형은 다음과 같습니다:
(3개의 페이지의 기준점은 아래의 파란 점으로 표시되어 있습니다.)
나는 페이지 스크롤에 따라 한 번만 트리거되는 애니메이션(AOS나 ScrollTrigger와 같은)이나 여러 번 다시 트리거될 수 있는 애니메이션의 다양한 예는 찾았지만
더 많은 것을 읽으십시오 →javascript - material ui에서 makeStyles를 사용할 때, 요소가 두 개의 클래스를 모두 가질 경우에만 적용되는 CSS 규칙을 작성할 수 있나요?
나는 이것을 CSS로 할 수 있다는 것을 안다.
.makeStyles-mainNavWrapper-67.sticky{ position: fixed; top: 0px; opacity: 1; transition: opacity 1s ease; padding: 10px; }Material-UI에서 이것을 할 수 있는지 알고 싶습니다. 그렇게 하면 두 개의 별도 스타일시트(하나는 Mater
더 많은 것을 읽으십시오 →자바스크립트 - CSS에서 Stripe 요소 스타일 설정
나는 스트라이프의 스타일 옵션 객체에서 스타일을 설정할 수 있다
var elementStyles = { base: { textAlign: 'center', fontWeight: 400, fontSize: '12px', color: '#333' } }; var stripe = stripeElements.elements(); cardNumberStripeElement = stripe.create('cardNumber', { styles: elementStyles }); 더 많은 것을 읽으십시오 →자바스크립트 - Angular 11에서 Tailwindcss 2 스타일이 작동하지 않습니다
저는 새로운 Angular 11 프로젝트에서 Tailwindcss를 사용해 보고 있습니다. 다음과 같은 개발 패키지를 설치했습니다.
NOTE: Removed other packages for simplicity "@angular-builders/custom-webpack": "^10.0.1", "@angular-devkit/build-angular": "~0.1100.2", "@angular/cli": "~11.0.2", " 더 많은 것을 읽으십시오 →자바스크립트 - 서로 다른 시간에 시작/재시작된 CSS 애니메이션을 동기화하는 방법
저는 같은 애니메이션 클래스를 받는 여러 페이지 요소의 CSS 애니메이션을 동기화하려고 하고 있습니다.
이 주제에 대한 글이 많은 것 같지만 통일된 해결책은 없고, 제가 찾은 해결책 중 어느 것도 이 경우에 적용되는 것 같지 않습니다.
문제를 보여주기 위해 여기 jsfiddle을 준비했습니다:
https://jsfiddle.net/gdf7szo5/1/
어떤 글자를 클릭하면 해당 글자의 애니메이션이 시작됩니다
더 많은 것을 읽으십시오 →javascript - CSS 호흡 페이서에서 들이쉬기와 내쉬기의 길이를 변경하기
CSS를 사용하여 호흡 페이서를 만드는 방법에 대한 튜토리얼을 찾았습니다:
코드에서 들이쉬기와 내쉬기가 동일합니다(4초). 코드로 들이쉬기, 들이쉰 후 유지, 내쉬기, 내쉰 후 유지 시간을 제어하고 싶습니다.
어떻게 할 수 있나요?
튜토리얼 링크 - https://css-tricks.com/recreating-apple-watch-breathe-app-animation/ 코드펜 - https://codepen.io/geoffgraham/pen/zKMEPE
더 많은 것을 읽으십시오 →javascript - 페이지에 구글 지도가 포함되어 있을 때 IE7에서 CSS/JS 드롭다운을 수정하는 가장 좋은 방법
저는 탐색을 위해 <ul> 목록을 사용하는 페이지가 있습니다 (자바스크립트가 마우스 오버 시 표시 여부를 스타일링으로 변경합니다).
페이지에 구글 지도가 있을 때 IE6와 IE7에서는 제외하고, 이것은 나에게 잘 작동하고 있습니다.
이 경우 드롭다운은 단순히 작동하지 않습니다. 그러나 페이지는 FireFox 2에서는 계속 작동합니다.
저는 약간의 조사를 해보았고 이것이 IE 선택 상자 버그의 예일 수 있다고 발견했지만, 구
더 많은 것을 읽으십시오 →asp.net mvc - MVC 2 편집기 템플릿에서 JavaScript와 CSS를 올바르게 등록하기
ASP.NET MVC 2 (RTM) 편집기 템플릿에서 자바스크립트 블록을 올바르게 등록하려면 어떻게 해야 하나요?
제가 처한 구체적인 상황은 표준 날짜와 시간 선택기로 Dynarch JSCal2 DateTimePicker를 사용하고 싶지만, 이 질문은 일반적으로 재사용 가능한 자바스크립트 패키지에 관한 것입니다. 현재 제 템플릿은 제대로 작동하지만 JS와 CSS를 마스터 페이지에 포함하고 있으며, 실제로 필요할 때만 이러한 것들을 포함하고 싶습니다:
<link 더 많은 것을 읽으십시오 →javascript - jQuery-UI를 CSS 자산 없이 안전하게 사용할 수 있나요?
jQuery-UI를 CSS 자산을 포함하지 않고 안전하게 사용할 수 있나요? Google은 JS 파일을 호스팅하지만, 그 페이지에서는 jQuery-UI CSS 자원에 대한 참조를 찾을 수 없습니다. 만약 jquery-ui.js만 포함한다면 어떤 문제나 이슈를 예상할 수 있을까요?
답변 #1
당신은 이것과 같은 것에서 시작할 수 있습니다 (jQuery UI CSS와 함께):
더 많은 것을 읽으십시오 →자바스크립트 - CSS 또는 JS로 스크롤할 때만 세로 스크롤바 나타나게 하기
CSS나 JS로 스크롤할 때만 세로 스크롤바가 나타나게 하는 방법을 아는 사람이 있나요?
감사합니다
답변 #1
이것은 CSS 또는 JavaScript/jQuery를 사용하여 할 수 있습니다.
다음은 몇 가지 예입니다:
// JavaScript Example document.querySelector('.jsExample').addEventListener
더 많은 것을 읽으십시오 →