You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

121 lines
5.9 KiB
PHTML

2 years ago
<!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="쏠라아이">
2 years ago
<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" /> --}}
2 years ago
<!-- 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>
2 years ago
<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>
2 years ago
<script>
$(function () {
var controller = new ScrollMagic.Controller();
var tl = new TimelineMax();
var ww = window.innerWidth;
var noSlides = $(".section").length;
var slideWidth = $(".section").width();
2 years ago
var slideContainerWidth = slideWidth * noSlides - ww;
2 years ago
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>