웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Touch device jelly menu concept 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] Touch device jelly menu concept

해피CGI윤실장 2024. 7. 23. 09:14



스크롤을 하면 버튼 이미지가 젤리처럼 움직이게 되는 디자인 입니다.
자세한 내용은 데모사이트 주소에서 확인이 가능합니다.


HTML

    <div class="suggest-l"></div>
    <div class="iphone-l">
      <div class="screen-ll">
        <div id="wrapper">
          <div class="menu-l">
            <canvas data-colors="#69D2E7:#A7DBD8:#E0E4CC:#F38630:#FA6900:#C02942:#542437:#53777A:#ECD078:#FE4365" data-sectionHeight="200" data-contentId="js-content" id="myCanvas1" class="canvas-e"></canvas>
            <div id="js-content" class="content-ll">
              <div class="section-b"></div>
              <div class="section-b is-watermellon"></div>
              <div class="section-b is-fish"></div>
              <div class="section-b is-donut"></div>
              <div class="section-b is-icecreame"></div>
              <div class="section-b is-bananas"></div>
              <div class="section-b is-drink"></div>
              <div class="section-b is-candies"></div>
              <div class="section-b is-pizza"></div>
              <div class="section-b is-china"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
 
 
 

CSS
  
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  font-family: monospace;
  background-color: #eeebf0;
  position: relative;
}
.suggest-l {
  width: 300px;
  height: 300px;
  background: transparent url("https://s.cdpn.io/6859/suggest.png") no-repeat center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 200px;
  margin-top: -200px;
}
.iphone-l {
  width: 600px;
  height: 1061px;
  margin: 0 auto;
  margin-top: 50px;
  background: transparent url("https://s.cdpn.io/6859/iphone.png") no-repeat center center;
  position: relative;
}
.iphone-l > .screen-ll {
  position: absolute;
  top: 185px;
  left: 91px;
  width: 416px;
  height: 713px;
  overflow: hidden;
}
.touch {
  overflow: hidden !important;
  border: 10px solid #f00;
}
#wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}
#wrapper.is-with-scroll {
  width: 432px;
}
#wrapper .menu-l {
  position: relative;
}
 
#wrapper .menu-l.is-loaded{
   background: #69d2e7;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: -moz-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #69d2e7), color-stop(50%, #69d2e7), color-stop(51%, #fe4365), color-stop(100%, #fe4365));
/* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* Opera 11.10+ */
  background: -ms-linear-gradient(top, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* IE10+ */
  background: linear-gradient(to bottom, #69d2e7 0%, #69d2e7 50%, #fe4365 51%, #fe4365 100%);
/* W3C */
}
 
#wrapper .content-ll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 25px;
  line-height: 30px;
  -webkit-transform: rotate3d(0, 0, 0);
  -moz-transform: rotate3d(0, 0, 0);
  -ms-transform: rotate3d(0, 0, 0);
  -o-transform: rotate3d(0, 0, 0);
  transform: rotate3d(0, 0, 0);
}
.section-b {
  height: 200px;
  position: relative;
  cursor: pointer;
}
.section-b:active:after {
  width: 76px;
  height: 76px;
  margin-top: -38px;
  margin-left: -38px;
  background-size: 100% 100%;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  -o-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.section-b.is-check {
  z-index: 1;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #f00;
}
.section-b:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  content: '';
  width: 100px;
  height: 100px;
  background: transparent url("https://s.cdpn.io/6859/icecreame.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-watermellon:after {
  background: transparent url("https://s.cdpn.io/6859/watermellon.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-fish:after {
  background: transparent url("https://s.cdpn.io/6859/fish.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-donut:after {
  background: transparent url("https://s.cdpn.io/6859/donut.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-icecreame:after {
  background: transparent url("https://s.cdpn.io/6859/icecreame2.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-bananas:after {
  background: transparent url("https://s.cdpn.io/6859/bananas.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-drink:after {
  background: transparent url("https://s.cdpn.io/6859/drink.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-candies:after {
  background: transparent url("https://s.cdpn.io/6859/candies.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-pizza:after {
  background: transparent url("https://s.cdpn.io/6859/pizza.png") no-repeat center center;
  background-size: 100% 100%;
}
.section-b.is-china:after {
  background: transparent url("https://s.cdpn.io/6859/china.png") no-repeat center center;
  background-size: 100% 100%;
}
@media all and (max-width:930px) {
  .suggest-l {
    margin-left: -150px;
    top: 0;
    margin-top: 0;
  }
  .iphone-l {
    margin: 0 auto;
    margin-top: 250px;
  }
}
 
 
 
JS
    
 
 
paper.install(window);          
paper.setup('myCanvas1'); 
 
var SSection, Sections, gui, h, mwheel, onFrame, windowHeight, _base, _ref;
 
Path.prototype.setWidth = function(width) {
  this.segments[3].point.x = this.segments[0].point.x + width;
  return this.segments[2].point.x = this.segments[1].point.x + width;
};
 
Path.prototype.setHeight = function(height) {
  this.segments[1].point.y = this.segments[0].point.y + height;
  return this.segments[2].point.y = this.segments[3].point.y + height;
};
 
Path.prototype.reset = function() {
  this.setWidth(0);
  this.setHeight(0);
  return this.smooth();
};
 
h = {
  getRand: function(min, max) {
    return Math.floor((Math.random() * ((max + 1) - min)) + min);
  }
};
 
window.PaperSections = {
  $container: $('#wrapper'),
  i: 0,
  next: 0,
  prev: 0,
  scrollSpeed: 0,
  timeOut: null,
  invertScroll: true,
  currSection: -1
};
 
window.PaperSections.ff = typeof InstallTrigger !== 'undefined';
 
window.PaperSections.win = navigator.appVersion.indexOf("Win") !== -1;
 
windowHeight = $(window).outerHeight();
 
window.PaperSections.$canvas = $(view.canvas);
 
window.PaperSections.data = window.PaperSections.$canvas.data();
 
window.PaperSections.data.colors = window.PaperSections.data.colors.split(':');
 
if ((_ref = (_base = window.PaperSections.data).sectionscount) == null) {
  _base.sectionscount = window.PaperSections.data.colors.length;
}
 
view.setViewSize(window.PaperSections.$container.outerWidth(), window.PaperSections.data.sectionheight * window.PaperSections.data.sectionscount);
 
window.PaperSections.data.sectionheight = parseInt(window.PaperSections.data.sectionheight);
 
window.PaperSections.$content = $("#" + window.PaperSections.data.contentid);
 
window.PaperSections.$sections = window.PaperSections.$content.children();
 
window.PaperSections.slice = function(val, max) {
  if (val > 0 && val > max) {
    return Math.min(val, max);
  }
  if (val < 0 && val < max) {
    return Math.max(val, -max);
  }
  return val;
};
 
SSection = (function() {
  function SSection(o) {
    this.o = o;
    this.w = view.size.width;
    this.h = view.size.height;
    this.ph = 60;
    this.sh = this.procent(this.h, this.ph);
    this.wh = 1 * this.w;
    this.scrollSpeed = 0;
    this.gapSize = this.procent(this.h, (100 - this.ph) / 2);
    this.colors = ['#69d2e7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900'];
    this.twns = [];
    this.getPrefix();
    this.makeBase();
    this.listenToStop();
  }
 
  SSection.prototype.getPrefix = function() {
    var pre, styles;
 
    styles = window.getComputedStyle(document.documentElement, "");
    pre = (Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/) || (styles.OLink === "" && ["", "o"]))[1];
    this.prefix = "-" + pre + "-";
    return this.transformPrefix = "" + this.prefix + "transform";
  };
 
  SSection.prototype.listenToStop = function() {
    var _this = this;
 
    window.PaperSections.$container.on('scroll', function() {
      window.PaperSections.stop = false;
      _this.poped = false;
      return TWEEN.removeAll();
    });
    return window.PaperSections.$container.on('stopScroll', function() {
      var duration;
 
      window.PaperSections.stop = true;
      duration = window.PaperSections.slice(Math.abs(window.PaperSections.scrollSpeed * 25), 1400) || 3000;
      _this.translatePointY({
        point: _this.base.segments[1].handleOut,
        to: 0,
        duration: duration
      }).then(function() {
        return window.PaperSections.scrollSpeed = 0;
      });
      return _this.translatePointY({
        point: _this.base.segments[3].handleOut,
        to: 0,
        duration: duration
      });
    });
  };
 
  SSection.prototype.translateLine = function(o) {
    var dfr, it, mTW,
      _this = this;
 
    dfr = new $.Deferred;
    mTW = new TWEEN.Tween(new Point(o.point)).to(new Point(o.to), o.duration);
    mTW.easing(o.easing || TWEEN.Easing.Elastic.Out);
    it = this;
    mTW.onUpdate(o.onUpdate || function(a) {
      var _ref1;
 
      o.point.y = this.y;
      return (_ref1 = o.point2) != null ? _ref1.y = this.y : void 0;
    });
    mTW.onComplete(function() {
      return dfr.resolve();
    });
    mTW.start();
    return dfr.promise();
  };
 
  SSection.prototype.notListenToStop = function() {
    window.PaperSections.$container.off('stopScroll');
    return window.PaperSections.$container.off('scroll');
  };
 
  SSection.prototype.translatePointY = function(o) {
    var dfr, it, mTW,
      _this = this;
 
    dfr = new $.Deferred;
    mTW = new TWEEN.Tween(new Point(o.point)).to(new Point(o.to), o.duration);
    mTW.easing(o.easing || TWEEN.Easing.Elastic.Out);
    it = this;
    mTW.onUpdate(o.onUpdate || function(a) {
      o.point.y = this.y;
      !it.poped && window.PaperSections.$content.attr('style', "" + it.transformPrefix + ": translate3d(0," + (this.y / 2) + "px,0);transform: translate3d(0," + (this.y / 2) + "px,0);");
      return (it.poped && !it.popedCenter) && window.PaperSections.$sections.eq(it.index).attr('style', "" + it.transformPrefix + ": translate3d(0," + (this.y / 2) + "px,0);transform: translate3d(0," + (this.y / 2) + "px,0);");
    });
    mTW.onComplete(function() {
      return dfr.resolve();
    });
    mTW.start();
    return dfr.promise();
  };
 
  SSection.prototype.makeBase = function() {
    this.base = new Path.Rectangle(new Point(0, this.o.offset), [this.wh, this.o.height]);
    return this.base.fillColor = this.o.color;
  };
 
  SSection.prototype.toppie = function(amount) {
    this.base.segments[1].handleOut.y = amount;
    return this.base.segments[1].handleOut.x = this.wh / 2;
  };
 
  SSection.prototype.bottie = function(amount) {
    this.base.segments[3].handleOut.y = amount;
    return this.base.segments[3].handleOut.x = -this.wh / 2;
  };
 
  SSection.prototype.createPath = function(o) {
    var path;
 
    path = new Path(o.points);
    o.flatten && path.flatten(o.flatten);
    path.fillColor = o.fillColor || 'transparent';
    return path;
  };
 
  SSection.prototype.update = function() {
    if (!window.PaperSections.stop && !this.poped) {
      this.toppie(window.PaperSections.scrollSpeed);
      this.bottie(window.PaperSections.scrollSpeed);
      window.PaperSections.$content.attr('style', "" + this.transformPrefix + ": translate3d(0," + (window.PaperSections.scrollSpeed / 2) + "px,0);transform: translate3d(0," + (window.PaperSections.scrollSpeed / 2) + "px,0);");
    }
    return TWEEN.update();
  };
 
  SSection.prototype.procent = function(base, percents) {
    return (base / 100) * percents;
  };
 
  SSection.prototype.pop = function() {
    var _this = this;
 
    this.poped = true;
    this.popedCenter = true;
    this.translatePointY({
      point: this.base.segments[1].handleOut,
      to: -window.PaperSections.data.sectionheight / 1.75,
      duration: 100,
      easing: TWEEN.Easing.Linear.None
    }).then(function() {
      _this.translatePointY({
        point: _this.base.segments[1].handleOut,
        to: 0
      }).then(function() {});
      return _this.translatePointY({
        point: _this.base.segments[3].handleOut,
        to: 0
      });
    });
    return this.translatePointY({
      point: this.base.segments[3].handleOut,
      to: window.PaperSections.data.sectionheight / 1.75,
      duration: 100,
      easing: TWEEN.Easing.Linear.None
    });
  };
 
  SSection.prototype.popUP = function() {
    var _this = this;
 
    this.poped = true;
    this.popedCenter = false;
    this.translatePointY({
      point: this.base.segments[1].handleOut,
      to: -window.PaperSections.data.sectionheight / 1.75,
      duration: 100,
      easing: TWEEN.Easing.Linear.None
    }).then(function() {
      _this.translatePointY({
        point: _this.base.segments[1].handleOut,
        to: 0
      }).then(function() {});
      return _this.translatePointY({
        point: _this.base.segments[3].handleOut,
        to: 0
      });
    });
    return this.translatePointY({
      point: this.base.segments[3].handleOut,
      to: -window.PaperSections.data.sectionheight / 1.75,
      duration: 100,
      easing: TWEEN.Easing.Linear.None
    });
  };
 
  SSection.prototype.popDOWN = function() {
    var _this = this;
 
    this.poped = true;
    this.popedCenter = false;
    this.translatePointY({
      point: this.base.segments[1].handleOut,
      to: window.PaperSections.data.sectionheight / 1.75,
      duration: 100,
      easing: TWEEN.Easing.Linear.None
    }).then(function() {
      _this.translatePointY({
        point: _this.base.segments[1].handleOut,
        to: 0
      }).then(function() {});
      return _this.translatePointY({
        point: _this.base.segments[3].handleOut,
        to: 0
      });
    });
    return this.translatePointY({
      point: this.base.segments[3].handleOut,
      to: window.PaperSections.data.sectionheight / 1.75,
      duration: 100,
      easing: TWEEN.Easing.Linear.None
    });
  };
 
  return SSection;
 
})();
 
Sections = (function() {
  function Sections() {
    var i, section, _i, _ref1, _ref2;
 
    if ((_ref1 = this.contents) == null) {
      this.contents = [];
    }
    for (i = _i = _ref2 = window.PaperSections.data.sectionscount; _ref2 <= 0 ? _i <= 0 : _i >= 0; i = _ref2 <= 0 ? ++_i : --_i) {
      section = new SSection({
        offset: (i * window.PaperSections.data.sectionheight) - 5,
        height: window.PaperSections.data.sectionheight + 5,
        color: window.PaperSections.data.colors[i]
      });
      section.index = i;
      this.contents.push(section);
    }
    $(window).trigger('menu:ready');
  }
 
  Sections.prototype.update = function() {
    var i, it, _i, _len, _ref1, _results;
 
    _ref1 = this.contents;
    _results = [];
    for (i = _i = 0, _len = _ref1.length; _i < _len; i = ++_i) {
      it = _ref1[i];
      _results.push(it.update());
    }
    return _results;
  };
 
  Sections.prototype.popSection = function(n) {
    var i, _i, _ref1, _results;
 
    TWEEN.removeAll();
    _results = [];
    for (i = _i = _ref1 = this.contents.length - 1; _ref1 <= 0 ? _i <= 0 : _i >= 0; i = _ref1 <= 0 ? ++_i : --_i) {
      if (i > this.contents.length - n - 1) {
        this.contents[i].popUP();
      }
      if (this.contents.length - n - 1 === i) {
        this.contents[i].pop();
      }
      if (i < this.contents.length - n - 1) {
        _results.push(this.contents[i].popDOWN());
      } else {
        _results.push(void 0);
      }
    }
    return _results;
  };
 
  Sections.prototype.teardown = function() {
    var i, _i, _ref1, _results;
 
    _results = [];
    for (i = _i = _ref1 = this.contents.length - 1; _ref1 <= 0 ? _i <= 0 : _i >= 0; i = _ref1 <= 0 ? ++_i : --_i) {
      this.contents[i].base.remove();
      this.contents[i].notListenToStop();
      _results.push(delete this.contents[i]);
    }
    return _results;
  };
 
  return Sections;
 
})();
 
$(window).on('menu:ready', function(){
   window.PaperSections.$container.find('.menu-l').addClass('is-loaded')
}); 
 
window.PaperSections.sections = new Sections;
 
view.onFrame = function(e) {
  return window.PaperSections.sections.update();
};
 
mwheel = function(e, d) {
  var $$, $content;
 
  $content = $('#js-content');
  $$ = $(this);
  if ($$.scrollTop() === 0 && d > 0) {
    e.stopPropagation();
    e.preventDefault();
  }
  if (d < 0 && ($$.scrollTop() === ($content[0].scrollHeight - window.PaperSections.$container.height()))) {
    e.stopPropagation();
    return e.preventDefault();
  }
};
 
window.PaperSections.$container.on('mousewheel', mwheel);
 
window.PaperSections.scrollControl = function(e, d) {
  var direction;
 
  clearTimeout(window.PaperSections.timeOut);
  window.PaperSections.timeOut = setTimeout(function() {
    window.PaperSections.i = 0;
    window.PaperSections.$container.trigger('stopScroll');
    return window.PaperSections.prev = window.PaperSections.$container.scrollTop();
  }, 50);
  if (window.PaperSections.i % 4 === 0) {
    direction = window.PaperSections.invertScroll ? -1 : 1;
    window.PaperSections.next = window.PaperSections.$container.scrollTop();
    window.PaperSections.scrollSpeed = direction * window.PaperSections.slice(1.2 * (window.PaperSections.next - window.PaperSections.prev), window.PaperSections.data.sectionheight / 2);
    window.PaperSections.prev = window.PaperSections.next;
  }
  window.PaperSections.i++;
  return false;
};
 
window.PaperSections.$container.scroll(window.PaperSections.scrollControl);
 
gui = new dat.GUI;
 
gui.add(window.PaperSections, 'invertScroll');
 
window.PaperSections.$container.on('mouseenter', '.section-b', function() {
  return window.PaperSections.currSection = $(this).index();
});
 
window.PaperSections.$container.on('click', '.section-b', function() {
  var $$;
 
  $$ = $(this);
  return window.PaperSections.sections.popSection($$.index());
});
 
if (window.PaperSections.win || window.PaperSections.ff) {
  window.PaperSections.$container.addClass('is-with-scroll');
}
 

 

 

 

저작자표시

'웹프로그램밍 자료실 > HTML 자료' 카테고리의 다른 글

[해피CGI][cgimall] 텍스트 입력시 버튼이 나오는 효과  (0) 2024.08.09
[해피CGI][cgimall] animated vertical tabs-세로 애니메이션 탭 효과  (0) 2024.08.08
[해피CGI][cgimall] Tab Controls with CSS : has() 선택자를 이용한 탭메뉴  (0) 2024.07.04
[해피CGI][cgimall] Radios With Sliding Focus 라디오 버튼 슬라이딩 포커스  (0) 2024.07.03
[해피CGI][cgimall] GSAP를 이용한 무한 이미지 슬라이드  (0) 2024.07.02
공유하기 링크
'웹프로그램밍 자료실/HTML 자료' Related Articles more
Comments