반응형
페이지 로드에 대한 페이드인 효과를 위해 CSS 사용
CSS 전환을 사용하여 페이지 로드에 텍스트 단락이 페이드인되도록 허용할 수 있습니까?
저는 http://dotmailapp.com/ 에서 어떻게 보였는지 정말 좋아하고 CSS를 사용해서 비슷한 효과를 사용하고 싶습니다.도메인을 구입한 이후로 더 이상 해당 효과가 언급되지 않습니다.보관된 복사본은 Wayback Machine에서 볼 수 있습니다.
일러스트
마크업 기능:
<div id="test">
<p>This is a test</p>
</div>
다음과 같은 CSS 규칙을 사용합니다.
#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
로드 시 전환을 트리거하는 방법은 무엇입니까?
방법 1:
자동 호출 전환을 찾고 있다면 CSS 3 애니메이션을 사용해야 합니다.그들도 지원되지 않지만, 이것은 정확히 그들을 위해 만들어진 것입니다.
CSS
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
데모
브라우저 지원
모든 최신 브라우저 및 Internet Explorer 10(이후 버전): http://caniuse.com/ #http=http-http://animation
방법 2:.
또는 jQuery(또는 일반 자바스크립트; 세 번째 코드 블록 참조)를 사용하여 로드 시 클래스를 변경할 수 있습니다.
jQuery
$("#test p").addClass("load");
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
일반 자바스크립트(데모에 없음)
document.getElementById("test").children[0].className += " load";
데모
브라우저 지원
모든 최신 브라우저 및 Internet Explorer 10(이후 버전): http://caniuse.com/ #http=http://transitions
방법 3:
또는 다음 방법을 사용할 수 있습니다.메일 용도:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
데모
브라우저 지원
jQuery 1.x: 모든 최신 브라우저 및 Internet Explorer 6(이상): http://jquery.com/browser-support/
jQuery 2.x: 모든 최신 브라우저 및 Internet Explorer 9(이상): http://jquery.com/browser-support/
이 방법은 대상 브라우저가 CSS 3 전환이나 애니메이션을 지원할 필요가 없기 때문에 가장 호환성이 높습니다.
사용할 수 있습니다.onload=""HTML 속성을 지정하고 JavaScript를 사용하여 요소의 불투명도 스타일을 조정합니다.
제안하신 대로 CSS를 그대로 두십시오.HTML 코드를 다음으로 편집합니다.
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
로드가 완료되면 전체 페이지가 페이드인 상태로 전환됩니다.
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
W3Schools 웹사이트: 전환과 자바스크립트로 스타일을 바꾸는 기사를 확인하세요.
@A.M.에 대한 응답.jQuery 없이 전환하는 방법에 대한 K의 질문.내가 함께 던진 아주 간단한 예.이것을 좀 더 생각해 볼 시간이 있다면 자바스크립트 코드를 완전히 제거할 수 있을 것입니다.
<style>
body {
background-color: red;
transition: background-color 2s ease-in;
}
</style>
<script>
window.onload = function() {
document.body.style.backgroundColor = '#00f';
}
</script>
<body>
<p>test</p>
</body>
JS의 웹애니메이션 API를 CSS와 결합해 사용하는 것도 방법입니다.
예
async function moveToPosition(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
transform: `translateY(${el.getBoundingClientRect().top}px)`
},
], {
duration: durationInMs,
easing: 'ease-in',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}
async function fadeIn(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
opacity: '0.5',
offset: 0.5
},
{
opacity: '1',
offset: 1
}
], {
duration: durationInMs,
easing: 'linear',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}
async function fadeInSections() {
for (const section of document.getElementsByTagName('section')) {
await fadeIn(section, 200);
}
}
window.addEventListener('load', async() => {
await moveToPosition(document.getElementById('headerContent'), 500);
await fadeInSections();
await fadeIn(document.getElementsByTagName('footer')[0], 200);
});
async function moveToPosition(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
transform: `translateY(${el.getBoundingClientRect().top}px)`
},
], {
duration: durationInMs,
easing: 'ease-in',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}
async function fadeIn(el, durationInMs) {
return new Promise((resolve) => {
const animation = el.animate([{
opacity: '0'
},
{
opacity: '0.5',
offset: 0.5
},
{
opacity: '1',
offset: 1
}
], {
duration: durationInMs,
easing: 'linear',
iterations: 1,
direction: 'normal',
fill: 'forwards',
delay: 0,
endDelay: 0
});
animation.onfinish = () => resolve();
});
}
async function fadeInSections() {
for (const section of document.getElementsByTagName('section')) {
await fadeIn(section, 200);
}
}
window.addEventListener('load', async() => {
await moveToPosition(document.getElementById('headerContent'), 500);
await fadeInSections();
await fadeIn(document.getElementsByTagName('footer')[0], 200);
});body,
html {
height: 100vh;
}
header {
height: 20%;
}
.text-center {
text-align: center;
}
.leading-none {
line-height: 1;
}
.leading-3 {
line-height: .75rem;
}
.leading-2 {
line-height: .25rem;
}
.bg-black {
background-color: rgba(0, 0, 0, 1);
}
.bg-gray-50 {
background-color: rgba(249, 250, 251, 1);
}
.pt-12 {
padding-top: 3rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.text-lightGray {
color: lightGray;
}
.container {
display: flex;
/* or inline-flex */
justify-content: space-between;
}
.container section {
padding: 0.5rem;
}
.opacity-0 {
opacity: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site created using create-snowpack-app" />
<link rel="stylesheet" type="text/css" href="./assets/syles/index.css" />
</head>
<body>
<header class="bg-gray-50">
<div id="headerContent">
<h1 class="text-center leading-none pt-2 leading-2">Hello</h1>
<p class="text-center leading-2"><i>Ipsum lipmsum emus tiris mism</i></p>
</div>
</header>
<div class="container">
<section class="opacity-0">
<h2 class="text-center"><i>ipsum 1</i></h2>
<p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
</section>
<section class="opacity-0">
<h2 class="text-center"><i>ipsum 2</i></h2>
<p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
</section>
<section class="opacity-0">
<h2 class="text-center"><i>ipsum 3</i></h2>
<p>Cras purus ante, dictum non ultricies eu, dapibus non tellus. Nam et ipsum nec nunc vestibulum efficitur nec nec magna. Proin sodales ex et finibus congue</p>
</section>
</div>
<footer class="opacity-0">
<h1 class="text-center leading-3 text-lightGray"><i>dictum non ultricies eu, dapibus non tellus</i></h1>
<p class="text-center leading-3"><i>Ipsum lipmsum emus tiris mism</i></p>
</footer>
</body>
</html>언급URL : https://stackoverflow.com/questions/11679567/using-css-for-a-fade-in-effect-on-page-load
반응형
'programing' 카테고리의 다른 글
| 표의 불일치 - Galera 군집 분석 (0) | 2023.09.09 |
|---|---|
| 특정 파일/파일 이름을 찾기 위한 파워셸 스크립트? (0) | 2023.09.09 |
| GET 매개 변수에 대한 SpringMVC 요청 매핑 (0) | 2023.09.04 |
| C#에서 powershell cmdlet 호출 중 (0) | 2023.09.04 |
| MariaDB 10.4.21에서 세션 없이 읽기 전용으로 테이블을 잠그려면 어떻게 해야 합니까? (0) | 2023.09.04 |