메인화면 이미지를 고정하고 화면만 올라가게하는 방법좀 알려주세요.
관련링크
본문
아래 사이트에 보면 메인 이미지가 고정이되어서 아래로 스크롤하면
이미지는 움직이지 않고 이미지 밑에서부터 화면만 올라가는데요
위 사이트 처럼 메인이미지는 움직이지않게 고정하고 싶습니다.
현재는 그누보드 테마(COMPANY THEME) https://sir.kr/g5_theme/228?page=4 를 사용하고 있습니다.
아래는 현재 만들고 있는 사이트입니다.
https://sir.kr/g5_theme/228?page=4
아래로 스크롤할때 메인 배너(이미지)는 고정되어 있고 다른 화면만 위로 올라가게 하려면
어떻게 해야하나요?
프로그래머가 아니라서 어렵게 답변을 받았는데도 활용을 못 했습니다.. ㅠ ㅠ
초보중에 초보라 생각하시고 부탁 좀 드립니다...
메인화면과 관련된 CSS 파일과 index_head.php 소스코드 올려드립니다.
잘 부탁 드립니다...
1. CSS 파일(default.css)
=============================================================================
/*메인배너*/
#main_bn {background:#f1f1f1;position:relative;overflow: auto;width:100% !important}
#main_bn .bn_ul li{height:645px;float: left;}
#main_bn li.bn_bg1{background:url(../img/main_bn.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li .bn_wr{width:1000px; margin:0 auto;padding-top:217px}
#main_bn li .bn_txt{background-color:rgba(39, 120, 197,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);width:283px; height:205px;padding:25px}
#main_bn li .bn_txt h2{text-shadow: 0 1px 1px rgba(0, 0, 0, .3);color:#fff;font-size:2.667em;line-height:40px;margin-top:35px}
#main_bn li .bn_txt p{color:#fff;background:url(../img/bn_pbg.jpg) no-repeat top left;padding-top:20px;margin-top:20px ;font-size:1.34em;line-height:23px;}
#main_bn .bn_btn{position:absolute;top:240px;left:50%;width:1000px;margin-left:-470px}
#main_bn .bn_btn .prev{background:url(../img/bn_btn.gif) no-repeat;border:none;width:24px;height:24px;text-indent:-9999999px;overflow:hidden;display:inline-block}
#main_bn .bn_btn .next{background:url(../img/bn_btn.gif) no-repeat -27px 0;border:none;width:24px;height:24px;text-indent:-99999999px;overflow:hidden;display:inline-block}
#main_bn .dots{position:absolute;bottom:70px;text-align:center;width:100%}
#main_bn .dots li{border:none;text-indent:-9999px;width:48px;height:4px;background:#3e3c52;overflow:hidden;display:inline-block;margin:0 ; zoom:1; *display:inline /*IE7 HACK*/; _display:inline; /*IE6 HACK*/}
#main_bn .dots li.active{background:#3d96d6}
===============================================================================
2. index_head.php
==============================================================================
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
add_javascript('<script src="'.G5_THEME_JS_URL.'/unslider.min.js"></script>', 10);
?>
<!-- 상단 시작 { -->
<div id="hd">
<h1 id="hd_h1"><?php echo $g5['title'] ?></h1>
<div id="skip_to_container"><a href="#container">본문 바로가기</a></div>
<?php
if(defined('_INDEX_')) { // index에서만 실행
include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
}
?>
<div id="hd_wrapper">
<div id="logo">
<a href="<?php echo G5_URL ?>"><img src="<?php echo G5_THEME_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>"></a>
</div>
<?php include_once(G5_THEME_PATH.'/head.menu.php'); ?>
<ul id="tnb">
<?php if ($is_member) { ?>
<?php if ($is_admin) { ?>
<li class="tnb_adm"><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>
<?php } ?>
<li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
<?php } else { ?>
<li><a href="<?php echo G5_BBS_URL ?>/login.php" ><b>로그인</b></a></li>
<?php } ?>
</ul>
</div>
<hr>
</div>
<!-- } 상단 끝 -->
<hr>
<!-- 콘텐츠 시작 { -->
<div id="idx_wrapper">
<!--메인배너-->
<div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>신뢰와 나눔속에 <br>사랑받는 기업으로</h2>
<p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
</div>
</div>
</li>
</ul>
<div class="bn_btn">
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>
</div>
</div>
<!--메인배너-->
<script>
$(function() {
var unslider = $("#main_bn").unslider({
speed: 700, // The speed to animate each slide (in milliseconds)
delay: 5000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
});
</script>
<div id="idx_container">
<?php if ((!$bo_table || $w == 's' ) && !defined("_INDEX_")) { ?><div id="container_title"><?php echo $g5['title'] ?></div><?php } ?>
===========================================================================
답변 3
http://theme.sir.kr/gnuboard5/theme/company/css/default.css
파일에 32줄에 position:absolute; 를 position: fixed; 로 변경하시면 메뉴영역이 고정됩니다.
패럴렉스 스크롤(Parallax Scrolling)
로 검색하시면 많이 나올거예요~
저도 마침 어제 작업하느라 검색 좀 해봤죠~