랜딩 페이지 애니메이션 효과 추가

src/main/resources/static/css/index.css

@@ -168,14 +168,25 @@ a.bd_title:hover {
     font-family: "Black Han Sans", sans-serif;
     font-weight: 400;
     font-style: normal;
+    opacity: 0; /* 초기 투명도 */
+    transition: opacity 2s ease-in-out; /* 서서히 나타나는 효과를 위한 트랜지션 설정 */
 }
 
 .banner_sub {
-    font-family: "Pacifico", cursive;
+    /*font-family: "Pacifico", cursive;*/
     font-weight: 20;
     font-style: normal;
+    opacity: 0; /* 초기 투명도 */
+    transition: opacity 2s ease-in-out; /* 서서히 나타나는 효과를 위한 트랜지션 설정 */
 }
 
 a {
     text-decoration: none;
+}
+
+/* 애니메이션 커스텀 */
+
+
+.visible {
+    opacity: 1; /* 최종 투명도 */
 }

src/main/resources/static/js/index/index.js

@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let textElement = document.getElementById('title_container');
+    console.log(textElement.classList)
+    textElement.classList.add('visible'); // visible 클래스 추가
+    let subElement = document.getElementById('sub_container');
+    subElement.classList.add('visible'); // visible 클래스 추가
+});

src/main/resources/templates/html/about.html

@@ -26,7 +26,7 @@
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
         <div class="carousel-inner">
             <div class="carousel-item active">
-                <img src="/image/banner-about2.jpg" alt="">
+                <img src="/image/banner-about2.jpg" alt="" style="filter: brightness(60%)">
 
                 <div class="container">
                     <div class="carousel-caption">

src/main/resources/templates/html/business-sector.html

@@ -28,7 +28,7 @@
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
         <div class="carousel-inner">
             <div class="carousel-item active">
-                <img src="/image/banner-business2.jpg" alt="">
+                <img src="/image/banner-business2.jpg" alt="" style="filter: brightness(60%)">
 
                 <div class="container">
                     <div class="carousel-caption">

src/main/resources/templates/html/contact-us.html

@@ -31,7 +31,7 @@
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
         <div class="carousel-inner">
             <div class="carousel-item active">
-                <img src="/image/banner-contact2.jpg" alt="">
+                <img src="/image/banner-contact2.jpg" alt="" style="filter: brightness(60%)">
 
 
                 <div class="container">

src/main/resources/templates/html/index.html

@@ -29,11 +29,11 @@
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
         <div class="carousel-inner" id="myBanner">
             <div class="carousel-item active">
-                <img alt="main" src="/image/banner-ships.jpg" class="d-block w-100" id="banner_img">
+                <img alt="main" src="/image/banner-ships.jpg" class="d-block w-100" id="banner_img" style="filter: brightness(60%)">
                 <div class="container">
                     <div class="carousel-caption">
-                        <h1 class="banner_title">(주)국제종합물류 홈페이지를 찾아주신 여러분 환영합니다</h1>
-                        <p>" 혁신경영으로 고객만족에 최선을 다하겠습니다 "</p>
+                        <h1 class="banner_title" id="title_container">(주)국제종합물류 홈페이지를 찾아주신 여러분 환영합니다</h1>
+                        <p class="banner_sub" id="sub_container">" 혁신경영으로 고객만족에 최선을 다하겠습니다 "</p>
                     </div>
                 </div>
             </div>
@@ -92,12 +92,13 @@
                 </div>
             </div>
 
-            <hr class="featurette-divider">
+
 
 
         </div><!-- /.container -->
 
     </div>
+    <hr class="featurette-divider">
         <footer class="footer" th:include="html/common/footer">
 
         </footer>
@@ -106,8 +107,8 @@
 </body>
 <!-- 부트스트랩 JS -->
 <script src="/js/bootstrap.bundle.min.js"></script>
-
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+<script src="/js/index/index.js"></script>
 <!--<script src="/js/swiper/swiper.js"></script>-->
 </html>

src/main/resources/templates/html/info-plaza.html

@@ -31,7 +31,7 @@
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
         <div class="carousel-inner">
             <div class="carousel-item active">
-                <img src="/image/banner-info-plaza.jpg" alt="">
+                <img src="/image/banner-info-plaza.jpg" alt="" style="filter: brightness(60%)">
 
                 <div class="container">
                     <div class="carousel-caption">

src/main/resources/templates/html/land.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <title>플랫폼 메인 페이지</title>
-    <link href="/css/style.css" rel="stylesheet" type="text/css">
-    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
-          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
-
-</head>
-<body>
-<div class="container">
-    <header class="d-flex justify-content-center py-3" id="header_top">
-        <a class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
-            <div class="logo">
-                <img alt="로고" src="/image/logo.png" width="201px">
-            </div>
-        </a>
-
-        <ul class="nav nav-pills" style="color : black">
-            <li class="nav-item"><a class="nav-link fw-bold" href="#">회사소개</a></li>
-            <li class="nav-item"><a class="nav-link fw-bold" href="#">사업영역</a></li>
-            <li class="nav-item"><a class="nav-link fw-bold" href="#">정보광장</a></li>
-            <li class="nav-item"><a class="nav-link fw-bold" href="#">고객센터</a></li>
-        </ul>
-        <button class="btn btn-primary" id="login-btn" type="button">물류회원 전용라인</button>
-    </header>
-</div>
-<header id="header_img">
-    <div id="banner_parent">
-        <img alt="무역" class="img-fluid" id="banner_01" src="/image/banner01.jpg">
-    </div>
-</header>
-
-<section id="section1">
-    <div class="services">
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/cargo-ship.png">
-            <p>해상운송</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/airplane.png">
-            <p>항공운송</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/chuyen-phat-nhanh-quoc-te.png">
-            <p>서비스 설명</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/customer-care-1-1.png">
-            <p>물류컨설팅</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/delivery-truck.png">
-            <p>국제특송</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/distinction-1.png">
-            <p>서비스 설명</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/handshake-1.png">
-            <p>무역컨설팅</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" class="img-fluid" src="/image/service_item/Kho-luu-tru.png">
-            <p>서비스 설명</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" src="/image/service_item/Phan-phoi-hau-can.png" class="img-fluid">
-            <p>서비스 설명</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" src="/image/service_item/Thong-quan-hoan-thue.png" class="img-fluid">
-            <p>서비스 설명</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" src="/image/service_item/Thuong-mai-dien-tu.png" class="img-fluid">
-            <p>서비스 설명</p>
-        </div>
-        <div class="service">
-            <img alt="서비스1" src="/image/service_item/train.png" class="img-fluid">
-            <p>철도운송</p>
-        </div>
-    </div>
-</section>
-
-<section id="section2">
-</section>
-
-<section id="section3">
-    <h2>With over 20 countries</h2>
-    <div class="swiper-container">
-        <div class="swiper-wrapper">
-            <div class="swiper-slide"><img src="/image/nation/australia.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/brazil.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/china.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/colombia.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/france.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/india.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/italy.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/pakistan.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/peru.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/qatar.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/spain.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/tanzania.svg" alt="호주"></div>
-            <div class="swiper-slide"><img src="/image/nation/vietnam.svg" alt="호주"></div>
-            <!-- 필요한 만큼의 슬라이드 추가 -->
-        </div>
-        <!-- 페이지네이션 -->
-        <div class="swiper-pagination" style="display: none"></div>
-    </div>
-</section>
-
-<footer class="footer">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-6">
-                <h4>회사 소개</h4>
-                <p>CEO 인사말</p>
-                <p>회사연혁</p>
-                <p>경영이념</p>
-            </div>
-            <div class="col-md-6">
-                <h4>Contact Us</h4>
-                <p>연락처 및 위치 정보</p>
-            </div>
-        </div>
-    </div>
-    <div class="bottom-footer">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12">
-                    <p>&copy; 2024 Your Company. All rights reserved.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</footer>
-</body>
-<script crossorigin="anonymous"
-        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
-<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
-<!-- 부트스트랩 JS -->
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
-<script>
-    var swiper = new Swiper('.swiper-container', {
-        slidesPerView: 3,
-        spaceBetween: 30,
-        centeredSlides: true,
-        loop: true,
-        pagination: {
-            el: '.swiper-pagination',
-            clickable: true,
-        },
-        autoplay: {
-            delay: 3000, // 3초마다 자동 슬라이딩
-            disableOnInteraction: false // 사용자 상호 작용 시에도 자동 슬라이딩 유지
-        }
-    });
-</script>
-</html>