web home

by zunme

HTML

<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css">
<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
<script src="http://markdalgleish.com/projects/stellar.js/js/stellar.js"></script>
    <section id="top-header">
    <ul id="top_tab" class="row">
            <li class="col hometab-col"><div class="home_top_tab">웹툰</div><div class="tab-line on"></div></li>
                <li class="col hometab-col-large"><div class="home_top_tab">프리미엄웹툰</div><div class="tab-line"></div></li>
                <li class="col hometab-col"><div class="home_top_tab">소설</div><div class="tab-line"></div></li>
                <li class="col hometab-col"><div class="home_top_tab">만화</div><div class="tab-line"></div></li>
        </ul>
    </section>  
<section id="empty"></section>
<section id="bannerpan" class="panel" data-scroll-speed="50">
    <div id="bannerfirst" class="swiper-container swiper-container-h">
    <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="http://placehold.it/720x440/777777/040408/&text=NATE COMIC" class="tabimg" /></div>
    <div class="swiper-slide">
    <div class="swiper-container swiper-container-v">
    <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="http://placehold.it/720x440/777777/040408/&text=NATE COMIC" class="tabimg" /></div>
    <div class="swiper-slide"><img src="http://placehold.it/720x440/777777/040408/&text=NATE COMIC" class="tabimg" /></div>
    <div class="swiper-slide"><img src="http://placehold.it/720x440/777777/040408/&text=NATE COMIC" class="tabimg" /></div>
    <div class="swiper-slide"><img src="http://placehold.it/720x440/777777/040408/&text=NATE COMIC" class="tabimg" /></div>
    <div class="swiper-slide"><img src="http://placehold.it/720x440/777777/040408/&text=NATE COMIC" class="tabimg" /></div>
    </div>
    <div class="swiper-pagination swiper-pagination-v"></div>
    </div>
    </div>
    <div class="swiper-slide"><img...

CSS

* html .clearfix {height: 1%;}
.row {display: inline-block;}   /* a fix for IE Mac */
.row {display: block;}
.row {
  width: 100%;
  margin: 0 auto;
}
.row:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;      /* further ensures the period is not visible */
}

.row .row { min-width: 0px; }

.col, .cols {
  float: left;
  min-height: 1px;
  position: relative;
}
.col:first-child, .cols:first-child {
  margin-left: 0px;
}
.ellipsis{
    display:block;
    overflow: hidden;
    width:95%;
    white-space:nowrap; 
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    padding-left:2%;
    padding-right;2%;
}

/* 홈탭 */
.hometab-col{
    padding 0 2px;
    width:22%;
}
.hometab-col-large{
    width:34%
}
.home_top_tab{
    margin:3px 2px 0 2px;
    background-color:#DDD;
    padding :0.3rem;
    text-align:center;
    font-size:0.9rem;
}
.tab-line.on{background-color:red}
.tab-line{height:3px;margin:0 2px 4px 2px;background-color:#DDD;}
/* banner */
html,body{position:relative;height:100%;}
body{background:#eee;color:#000;margin:0;padding:0;}
.tabimg {width:100vw}
.swiper-container{width:100%;height:61.12vw}
.swiper-slide{text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.swiper-container-v{background:#FFF;}
.main {background:#FFF;}
#top-header {
    position: fixed;
    top: 0;left:0;z-index:1000;background-color:#FFF;
    width:100vw;
}
#empty{height:38px;}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />');
var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        loop: true,
        spaceBetween: 50
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        loop: true,
        spaceBetween: 50
    });
    swiperH.onResize();
    swiperV.onResize();

  var boxes = $('[data-scroll-speed]'),
      $window = $(window);
  $window.on('scroll', function(){
        scrollanim();
  });

  scrollanim();

function scrollanim() {
    var scrollTop = $window.scrollTop();
    boxes.each(function(){
      var $this = $(this),
          scrollspeed = parseInt($this.data('scroll-speed')),
          val = - scrollTop / scrollspeed;
        if( scrollspeed > 10 ) {
            /*
            var opc = ((250-scrollTop)/250);
            if (opc < 0.1 ) opc = 0.1;
            $this.css('transform', 'translateY(' + val + 'px)').animate({ opacity: opc});
            console.log(opc);
            */
            $this.css('transform', 'translateY(' + val + 'px)');
        }
        else $this.css('transform', 'translateY(' + val + 'px)');
    });
}