Giter Club home page Giter Club logo

spacebar_web's Introduction

🚀spacebar_web

일상으로부터의 한 칸, 당신의 한잔을 위한 혼술 패키지 및 홈페이지

코로나 시대 홈코노미 아이템 제작과 상품 소개 웹페이지 제작

2020년 가톨릭대학교 온라인 해커톤 장려상(3등)

2020.07.20~2020.07.31


1

2


👀Process

3

image

3 4


🤹‍♀️Role

수정

- 자동 음료 디스펜서 설계, 제작 및 아두이노 코딩
- 웹 페이지 내 제품 설명, 제작 과정 부분 개발
- 웹 페이지 내 상단 메뉴바 개발
- 웹 애니메이션 개발

승훈

- 자동 음료 디스펜서와 관련 부품 설계
- 자동 음료 디스펜서 3D 모델링
- 아두이노 코딩 및 조립 보조
- 웹 페이지 내 top button 개발

주영

- 웹 페이지 내 프로젝트 스토리, 사업 배경 부분 개발
- 웹 애니메이션 개발
- 컵 리드 아두이노 코딩 및 제작 

서현

- 브랜드 슬로건, 스토리 기획
- 비주얼 아이덴티티 작업
	- 브랜드 네이밍, 로고디자인, 웹사이트 메인, 제품 상세페이지 디자인

🔧TOOLS

  • Sublime Text
  • Arduino
  • AutoDesk TinkerCad
  • AutoDesk Fusion 360

✨Core Implementation Code

In Spacebar

1. toggle button 클릭 시 top으로 이동, 스크롤 시 메뉴 디자인 변경

🍯solution

//On Scroll Functionality
  $(window).scroll(() => {
    var windowTop = $(window).scrollTop();
    windowTop > 100
      ? $("nav").addClass("navShadow")
      : $("nav").removeClass("navShadow");
    windowTop > 100 ? $("ul").css("top", "100px") : $("ul").css("top", "160px");
  });

  //Click Logo To Scroll To Top
  $("#logo").on("click", () => {
    $("html,body").animate(
      {
        scrollTop: 0
      },
      400
    );
  });

  //Smooth Scrolling Using Navigation Menu
  $('a[href*="#"]').on("click", function (e) {
    $("html,body").animate(
      {
        scrollTop: $($(this).attr("href")).offset().top - 70
      },
      500
    );
    e.preventDefault();
  });

  //Toggle Menu
  $("#menu-toggle").on("click", () => {
    $("#menu-toggle").toggleClass("closeMenu");
    $("ul").toggleClass("showMenu");

    $("li").on("click", () => {
      $("ul").removeClass("showMenu");
      $("#menu-toggle").removeClass("closeMenu");
    });
  });
});

👊C2H6O

💻 SpaceBar's Developer & Designer

🙋 이수정 🙋‍ 오승훈 🙋‍ 엄주영 🙋조서현
Lead Developer Developer Developer PM, Designer

spacebar_web's People

Contributors

doodung avatar jooyoungeom avatar kgw5721 avatar ohseunghoony avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.