|
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<meta name="language" content="Korean">
|
|
|
|
|
<meta name="author" content="쏠라아이">
|
|
|
|
|
<meta name="robots" content="index, follow"/>
|
|
|
|
|
<!-- CSRF Token -->
|
|
|
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
|
@include('layouts.seo')
|
|
|
|
|
|
|
|
|
|
<title>쏠라아이 @yield('page-title')@yield('article-title')</title>
|
|
|
|
|
|
|
|
|
|
{{-- <link rel="alternate" type="application/rss+xml" title="쏠라아이" href="http://www..co.kr/rss.xml" /> --}}
|
|
|
|
|
<!-- Fonts -->
|
|
|
|
|
<link rel="dns-prefetch" href="//fonts.gstatic.com">
|
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost"/>
|
|
|
|
|
|
|
|
|
|
<!-- Styles -->
|
|
|
|
|
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"/>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/pageable@latest/dist/pageable.min.css"/>
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper@8.3.1/swiper-bundle.min.css"/>
|
|
|
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
|
|
|
|
|
|
@stack('style')
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<div class="slide-container" style="overflow: auto;">
|
|
|
|
|
<div style="position: fixed;" class="slide-body">
|
|
|
|
|
<div style="display:flex;flex-wrap:nowrap;overflow:auto;width:auto" id="container">
|
|
|
|
|
<section id="test1" class="vw-100 vh-100 section" style="background:url('/images/test/test1.png'); flex:0 0 auto; background-size:cover;">
|
|
|
|
|
<div class="w-100">test1</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="test2" class="vw-100 vh-100 section" style="background:url('/images/test/test2.png'); flex:0 0 auto; background-size:cover;">
|
|
|
|
|
<div class="w-100">test2</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="test3" class="vw-100 vh-100 section" style="background:url('/images/test/test3.png'); flex:0 0 auto; background-size:cover;">
|
|
|
|
|
<div class="w-100">test3</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="test4" class="vw-100 vh-100 section" style="background:url('/images/test/test4.png'); flex:0 0 auto; background-size:cover;">
|
|
|
|
|
<div class="w-100">test4</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<footer style="background: black; position: fixed;bottom:0;left:0;z-index:-1" class="vh-100 vw-100 text-white">
|
|
|
|
|
1111
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="https://unpkg.com/pageable@latest/dist/pageable.min.js"></script>
|
|
|
|
|
<script src="https://unpkg.com/swiper@8.3.1/swiper-bundle.min.js"></script>
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=52cafe4f03c6eb124e97eafc302f7240"></script>
|
|
|
|
|
<script src="/js/app.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
$(function () {
|
|
|
|
|
var controller = new ScrollMagic.Controller();
|
|
|
|
|
var tl = new TimelineMax();
|
|
|
|
|
|
|
|
|
|
var ww = window.innerWidth;
|
|
|
|
|
|
|
|
|
|
var noSlides = $(".section").length;
|
|
|
|
|
var slideWidth = $(".section").width();
|
|
|
|
|
|
|
|
|
|
var slideContainerWidth = slideWidth * noSlides - ww;
|
|
|
|
|
|
|
|
|
|
var actionHorizontal = new TimelineMax()
|
|
|
|
|
.to("#container", 1, {x: -slideContainerWidth, ease: Power0.easeNone});
|
|
|
|
|
|
|
|
|
|
var horizontal = createHorizontal();
|
|
|
|
|
// var wipeContainer = createWipe();
|
|
|
|
|
|
|
|
|
|
function createHorizontal() {
|
|
|
|
|
return new ScrollMagic.Scene({
|
|
|
|
|
triggerElement: ".slide-container",
|
|
|
|
|
triggerHook: "onLeave",
|
|
|
|
|
duration: '500vw',
|
|
|
|
|
})
|
|
|
|
|
.setPin('.slide-container')
|
|
|
|
|
.setTween(actionHorizontal)
|
|
|
|
|
.addIndicators()
|
|
|
|
|
.addTo(controller);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
controller.scrollTo(function (newpos) {
|
|
|
|
|
//TweenMax.to(window, 1, { scrollTo: { x: newpos } });
|
|
|
|
|
TweenMax.to(window, 1, {
|
|
|
|
|
scrollTo: {
|
|
|
|
|
y: newpos,
|
|
|
|
|
autoKill: true,
|
|
|
|
|
},
|
|
|
|
|
ease: Power3.easeOut,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$(window).resize(function () {
|
|
|
|
|
ww = window.innerWidth;
|
|
|
|
|
slideContainerWidth = slideWidth * noSlides - ww;
|
|
|
|
|
horizontal.destroy(true);
|
|
|
|
|
horizontal = createHorizontal();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
