테스트 사이트 - 개발 중인 베타 버전입니다

메인배너는 움직이지 않고 화면만 위로 올라가도록 하는 방법 좀 알려주세요! 채택완료

레스피아 7년 전 조회 1,801

홈페이지 제작중인데요.

아래로 스크롤할때 메인 배너(이미지)는 고정되어 있고 다른 화면만 위로 올라가게 하려면

어떻게 해야하나요?

https://www.hobby-caravan.de/en/vans-hobby/" target="_blank">https://www.hobby-caravan.de/en/vans-hobby

위 사이트 처럼 만들어야하는데요...

 

아래는 현재 만들고 있는 사이트입니다.

http://trumpmotors.jin0815.gethompy.com/" target="_blank">http://trumpmotors.jin0815.gethompy.com

 

메인 이미지는 고정 시키고 싶은데 어떻게 해야하는지 궁급합니다.

 

 

</strong></p>

<p><?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가</p>

<p>if (G5_IS_MOBILE) {

    include_once(G5_THEME_MOBILE_PATH.'/head.php');

    return;

}</p>

<p>include_once(G5_THEME_PATH.'/head.sub.php');

include_once(G5_LIB_PATH.'/latest.lib.php');</p>

<p>add_javascript('<script src="'.G5_THEME_JS_URL.'/unslider.min.js"></script>', 10);

?></p>

<p><!-- 상단 시작 { -->

<div id="hd">

    <h1 id="hd_h1"><?php echo $g5['title'] ?></h1></p>

<p>    <div id="skip_to_container"><a href="#container">본문 바로가기</a></div></p>

<p>    <?php

    if(defined('_INDEX_')) { // index에서만 실행

        include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어

    }

    ?></p>

<p>    <div id="hd_wrapper"></p>

<p>        <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></p>

<p>        <?php include_once(G5_THEME_PATH.'/head.menu.php'); ?></p>

<p>        <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></p>

<p>    <hr></p>

<p>

</div>

<!-- } 상단 끝 --></p>

<p><hr></p>

<p><!-- 콘텐츠 시작 { -->

<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>신뢰와 나눔속에  
사랑받는 기업으로</h2>

                        <p>우리의 원대한 도전,
새로운 100년이 깨어납니다</p>

                    </div>

                </div>

            </li>

            <li class="bn_bg1">

                <div class="bn_wr">

                    <div class="bn_txt">

                        <h2>신뢰와 나눔속에  
사랑받는 기업으로</h2>

                        <p>우리의 원대한 도전,
새로운 100년이 깨어납니다</p>

                    </div>

                </div>

            </li>

            <li class="bn_bg1">

                <div class="bn_wr">

                    <div class="bn_txt">

                        <h2>신뢰와 나눔속에  
사랑받는 기업으로</h2>

                        <p>우리의 원대한 도전,
새로운 100년이 깨어납니다</p>

                    </div>

                </div>

            </li>

            <li class="bn_bg1">

                <div class="bn_wr">

                    <div class="bn_txt">

                        <h2>신뢰와 나눔속에  
사랑받는 기업으로</h2>

                        <p>우리의 원대한 도전,
새로운 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];</p>

<p>            //  Either do unslider.data('unslider').next() or .prev() depending on the className

            unslider.data('unslider')[fn]();

        });

    });

   </script></p>

<p>    <div id="idx_container">

        <?php if ((!$bo_table || $w == 's' ) && !defined("_INDEX_")) { ?><div id="container_title"><?php echo $g5['title'] ?></div><?php } ?></p>

<p><strong>

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

Parallax 스크롤링을 말씀하시는거 같네요.

관련해서 구글에서 검색해보셔도 되고 http://markdalgleish.com/projects/stellar.js/" target="_blank">http://markdalgleish.com/projects/stellar.js/ 를 참고하셔서 세로 스크롤링을 하시면 됩니다.

 

 

CSS만으로 비슷한 효과를 내려면 고정될 부분의 배경 이미지를 background-attachment: fixed 로 고정하시고 연구하시는 걸 추천드려요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

herojd
7년 전

position: fixed;

로 변경 하시면 일단 원하시는 결과 얻으실수 있습니다.

차후 디자인적으로 조절하실 부분 수정 하시면 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

레스피아
7년 전
아... 죄송합니다만
position: fixed;
를 어디에서 변경해야하는것인지요...
아직 초짜라서 요...

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인