https://www.csia.or.kr/eng/js/main.js

1/*-------------------------------------------------
2
3Title       : Main
4Author      : EASESOFT
5Create Date : 2024-11
6
7-------------------------------------------------*/
8
9$(function()
10{
11
12    /*
13    if ($(window).width() > 1279 && $(window).width() < 2180)
14    {
15        const visual_loading = gsap.timeline();
16        visual_loading.from(".visual_slide .swiper-slide:first-child .img", {
17            duration: 3,
18            scale: 1.5,
19            transformOrigin: "center center",
20            ease: "easeOut",
21        },0.3);
22        visual_loading.from(".visual_slide .swiper-slide:first-child .img_box .child", {
23            duration: 2,
24            scale: 1.3,
25            opacity:0,
26        },0.5);
27        visual_loading.from(".visual_slide .swiper-slide:first-child .img_box .desc", {
28            duration: 1.5,
29            scale: 1.1,
30        },0.5);
31        visual_loading.to(".visual .control", {
32            duration: 0.5,
33            opacity: 1,
34        },3);
35
36        setTimeout(function(){
37            $(".visual_slide.swiper").addClass("zindex1");
38        },4600);
39    }
40        */
41
42    const visual_swiper = new Swiper('.visual_slide', {
43        loop: true,
44        effect:"fade",
45        autoplay: {
46            delay:6000,
47            disableOnInteraction: false,
48        },
49        speed: 2000,
50        slidesPerView: 1,
51        spaceBetween: 10,
52        pagination:
53        {
54            el: '.visual .control .paging',
55            type: 'fraction',
56            formatFractionCurrent: function (number) {
57                return ('0' + number).slice(-2);
58            },
59            formatFractionTotal: function (number) {
60                return ('0' + number).slice(-2);
61            },
62            renderFraction: function (currentClass, totalClass) {
63                return '<span class="' + currentClass + '"></span>' +
64                    '<em>/</em>' +
65                    '<span class="' + totalClass + '"></span>';
66            }
67        },
68    });
69
70    $(".visual .control .pause").click(function(){
71        visual_swiper.autoplay.stop();
72        $(this).hide();
73        $(".visual .control .play").show();
74    });
75    $(".visual .control .play").click(function(){
76        visual_swiper.autoplay.start();
77        $(this).hide();
78        $(".visual .control .pause").show();
79    });
80
81
82    // 섹션2 흘러가는 글씨
83    const marquee_box = document.querySelector('.section02 .marquee .box'); //marquee 박스 및 배경
84    const marquee_child = marquee_box.querySelector('.section02 .marquee .text'); //반복 대상의 실제 사이즈 (대상이 여러개라면 해당 대상들을 감싸는 부모)
85    const clone_marquee_time = Math.ceil(marquee_box.getBoundingClientRect().width / marquee_child.getBoundingClientRect().width) //marquee에 반복 요소를 넣을 횟수
86    for (let i = 0; i < clone_marquee_time; i++) {
87        const childClone = marquee_child.cloneNode(true); //반복 대상의 실제 사이즈로 지정한 대상으로 클론생성
88        marquee_box.appendChild(childClone); //설정한 클론 마지막에 추가
89    }
90    gsap.fromTo('.section02 .marquee .text', {
91        xPercent: 0
92    }, {
93        xPercent: -100,
94        repeat: -1,
95        duration: 10,
96        ease: 'none'
97    });
98});