한국어
한국어
최신 인터넷에서 웹 사이트의 디자인 및 대화식 경험은 사용자를 유치하고 유지하는 데있어 핵심 요소 중 하나가되었습니다. 영리한 애니메이션 효과를 통해 웹 사이트는 사용자에게 풍부한 시각적 경험을 제공 할뿐만 아니라 웹 사이트의 상호 작용을 향상시킬 수 있습니다. 이 기사는 PHP 및 CGI (일반 게이트웨이 인터페이스)를 사용하여 몇 가지 일반적인 애니메이션 효과를 구현하고 샘플 코드로 시연하는 방법을 살펴 봅니다.
회전 목마 사진은 여러 사진이나 콘텐츠를 표시 할 수있는 일반적인 웹 애니메이션 효과 중 하나입니다. PHP 및 CGI를 사용하여 간단하고 효과적인 회전식 효과를 달성 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>회전식 애니메이션 효과</title>
<style>
.slideshow-container {
position: relative;
}
.slideshow-container img {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="slideshow-container">
<?php
$images = array("image1.jpg", "image2.jpg", "image3.jpg");
foreach ($images as $image) {
echo "<img src='images/{$image}' alt='회전 목마'> ";
}
?>
</div>
<script>
var slides = document.querySelectorAll(".slideshow-container img");
var currentSlide = 0;
function showSlide(n) {
slides[currentSlide].style.display = "none";
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].style.display = "block";
}
setInterval(function() {
showSlide(currentSlide + 1);
}, 2000);
</script>
</body>
</html>
이 코드에서는 먼저 그림이 포함 된 배열을 정의한 다음 PHP 루프를 통해 그림 태그를 출력합니다. 다음으로 JavaScript를 사용하여 회전식 효과를 제어하고`setInterval '함수를 사용하여 2 초마다 이미지를 전환합니다.
동적 컨텐츠로드가 필요한 웹 페이지의 경우 PHP 및 CGI 기술을 통해 주문형로드를 달성 할 수 있습니다. 이렇게하면 페이지의 초기 부하로드를 효과적으로 줄이고 사용자 경험을 향상시킬 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#content {
width: 400px;
height: 200px;
overflow: auto;
}
</style>
</head>
<div id="content">
<?php
for ($i = 1; $i <= 10; $i++) {
echo "<p> 줄 {$ i} 컨텐츠</p> ";
}
?>
</div>
<script>
var content = document.getElementById("content");
content.addEventListener("scroll", function() {
var scrollTop = content.scrollTop;
var scrollHeight = content.scrollHeight;
var clientHeight = content.clientHeight;
if (scrollTop + clientHeight >= scrollHeight) {
// 더 많은 콘텐츠를 동적으로로드합니다
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
content.innerHTML += xhr.responseText;
}
};
xhr.open("GET", "load_more.php?start=" + content.scrollHeight, true);
xhr.send();
}
});
</script>
</html>이 예에서는 PHP를 통해 초기 10 줄의 컨텐츠를 출력합니다. 사용자가 하단으로 스크롤하면 JavaScript는`scroll '이벤트를 듣고 xmlhttprequest를 사용하여 더 많은 컨텐츠를 요청하고 동적으로로드합니다.
PHP 및 CGI는 애니메이션 효과와 동적 상호 작용을 가능하게하는 많은 도구를 제공하여 웹 사이트의 사용자 경험과 활력을 크게 향상시킬 수 있습니다. 이 기사에 소개 된 회전 목마 및 동적로드 컨텐츠는 두 가지 구현 방법입니다. 실제로 개발자는 웹 사이트의 매력과 상호 작용을 더욱 향상시키기 위해 필요에 따라보다 다양한 애니메이션 효과와 대화식 기능을 만들 수 있습니다.
