콘디쌤2017.04.28 10:33
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
    <!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
    * Create your own at http://cspisawesome.com
    -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

<body>
    <div class="page">
        <header>
        	<div class="title">씨레시피</div>
            <nav>
            	<div class="gnb sel">홈</div>
            	<div class="gnb">레시피</div>
            	<div class="gnb">동영상</div>
            	<div class="gnb">마이페이지</div>
            </nav>
        </header>
        
        <div class="content">
        	
            <section class="visual">
                <div class="swiper">
                    <div class="swiper-wrap">
                        <div class="swipe">
                        	<div class="image"><img src="img/Koala.jpg" /></div>
                        </div>
                        <div class="swipe">
                        	<div class="image"><img src="img/Penguins.jpg" /></div>
                        </div>
                        <div class="swipe">
                        	<div class="image"><img src="img/Jellyfish.jpg" /></div>			
                        </div>
                    </div>
                </div>
            
            </section>
            
            <section>
            HELLO
            </section>
        
        
        </div>
        <footer></footer>
    </div>
    
    
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/swipe.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

</html>


* {
	font-family: sans-serif;
	letter-spacing: -1px;
}

body {
	margin: 0;
}

div, section, header, footer, nav {
	position: relative;
}

img {
	vertical-align: top;
	width: 100%;
}

.page {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: auto;
	background-color: #eee;
}

header {
	position: fixed;
	top: 0; left: 0; right: 0; height: 96px;
	background-color: orangered;
	transition: transform 0.4s;
	z-index: 999;
}
header.small {
	transform: translateY(-50%);
}

header .title {
	color: #fff;
	font-size: 1.2em;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 12px;
}

.content {
	margin-top: 96px;
	height: 4000px;
}

nav {
	position: absolute;
	top: 48px;
	left: 0; right: 0;
	height: 48px;
}

nav .gnb {
	color: rgba( 255, 255, 255, 0.9);
	float: left;
	width: 25%;
	text-align: center;
	height: 46px;
	font-size: 1em;
	line-height: 46px;
	border-bottom: 2px solid rgba( 255, 255, 255, 0);
}
nav .gnb.sel {
	color: rgba( 255, 255, 255, 1);
	border-bottom: 2px solid rgba( 255, 255, 255, 1);
}

.swiper {
	position: relative;
	overflow: hidden;
	visibility: hidden;
}
.swiper-wrap {
	position: relative;
	overflow: hidden;
}
.swiper-wrap .swipe {
	position: relative;
	float:left;
	width:100%;
	padding-top: 25%;
}
.swiper-wrap .swipe .image {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}



var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

$(document).ready(function(){
	
	window.mySwipe = $('.swiper').Swipe().data('Swipe');
	
	$("nav .gnb").click(function(){
		
		$("nav .gnb.sel").removeClass("sel");
		$(this).addClass("sel");
		
	});
	
	$(".page").scroll(function(){
		
		var scrollTop = $(".page").scrollTop();
		
		if (scrollTop >= 50) {
			$("header").addClass("small");
		} else {
			$("header").removeClass("small");
		}
		
	});
	
	
	
});









문서 첨부 제한 : 0Byte/ 10.00MB
파일 크기 제한 : 10.00MB (허용 확장자 : *.*)