NBA star

In this example below you will see how to do a NBA star with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hanyin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hanyin ©
  • HTML
  • CSS
  • JavaScript
    nav.topbar
  a(href="header") NBA瘋向球
  .list
    li 
      a(href="#section_intro").intro 引言
    li
      a(href="#section_interface").interface 介面設計
    li
      a(href="#section_target").target 目標使用者
    li
      a(href="#section_feature").freature APP特色
    li
      a(href="#section_video").video 影片連結
    li
      a(href="#section_award").award 得獎紀錄

header
  .container-fluid
    img(src="https://i.imgur.com/s7oaI7P.png", alt="")
    h5 V<br>V
    svg#bottomRedL(viewbox="0 -100 100 100")
      polyline(points="0,0 0,-14 100,0 0,0")

section#section_intro
  .container-fluid
    h1(data-0="transform: translateY(-50px);opacity: 0.5" data-200="transform: translateY(0px);opacity: 1") NBA瘋向球
    p(data-0="transform: translateY(-50px);opacity: 0.5" data-200="transform: translateY(0px);opacity: 1") &nbsp&nbsp&nbsp「NBA瘋向球」是我和兩位資工系同學合作的專題,這是一個具有預測功能的NBA相關手機應用程式,在專案中,我負責所有關於美術編排與宣傳包裝的工作,例如程式的操作介面、說明書的內容撰寫與排版,以及相關影片的剪接編輯,三人組合在各自的專業上發揮長才,並且互相溝通協助,讓我們有機會在三次的比賽中獲得佳績。 
    //- .ball
    svg#bottomBlueL(viewbox="0 -100 100 100")
      polyline(points="0,0 0,-14 100,0 0,0")
    
section#section_interface
  .container
    h2(data-bottom-top="transform: translateY(-30px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1") ► 介面設計 ◄
    .row
      .col-sm-4
        //- (data-bottom-top="transform: translateX(-300px);opacity: 0" data-center="transform: translateX(0px);opacity: 1")
        .phone
          .camera
          .screen
            
          .button &nbsp☐
      .col-sm-8
        h5.name0(style="cursor: pointer") Home
        svg#line1(viewbox="-50 -50 100 100")
          polyline(points="5,-45 0,-45 0,0 0,45 5,45") 
          polyline(points="5,-15 0,-15")
          polyline(points="5,15 0,15")
          polyline(points="0,0 -5,0")
        h5.name1 搜尋球員
        h5.name2 球員表現預測
        h5.name3 賽事預測
        h5.name4 球員分級
        svg#line2(viewbox="-50 -50 100 100")
          polyline(points="5,-45 -5,-45")
          polyline(points="-5,-15 0,-15")
          polyline(points="5,-23 0,-23 0,-7 5,-7")
          polyline(points="5,15 -5,15")
          polyline(points="-5,45 5,45")
        h5.name5 球員數據
        h5.name6 自訂預測數據
        h5.name7 球員表現趨勢
        h5.name8 先發預測
        h5.name9 球員排名
  svg#bottomGreyR(viewbox="0 -100 100 100")
    polyline(points="0,0 100,-14 100,0 0,0")
        
section#section_target
  .container
    h2(data-bottom-top="transform: translateY(-30px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1") ► 目標使用者 ◄
    .row
      .col-sm-6(data-bottom-top="transform: translateX(-30px);opacity: 0.5" data-center="transform: translateX(0px);opacity: 1")
        .box
          img.icon(src="https://i.imgur.com/UjYw0Jj.png", alt="")
          h4 NBA球迷
          p &nbsp&nbsp想要了解賽事趨勢的資深球迷,NBA瘋向球備有完整的球員資訊提供使用者查閱,針對這方面也盡力改善演算法,加快運算及頁面顯示速度,減少使用者等待的時間,以體驗更流暢的NBA瘋向球。
      .col-sm-6(data-bottom-top="transform: translateX(30px);opacity: 0.5" data-center="transform: translateX(0px);opacity: 1")
        .box
          img.icon(src="https://i.imgur.com/mHWEQVo.png", alt="")
          h4 相關廠商
          p &nbsp&nbsp當預測功能結果出爐,相關廠商可以透過預測的結果,當作市場調查,了解目前市場上最火紅的球員或球隊,依此做為產品生產的依據,搶先一步得知NBA的戰況趨勢,製造周邊商品創造無限商機。
  svg#bottomRedR(viewbox="0 -100 100 100")
    polyline(points="0,0 100,-14 100,0 0,0")
        
section#section_feature
  .container
    h2(data-bottom-top="transform: translateY(-30px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1") ► APP特色 ◄
    .row
      .col-md-4
        .box(data-bottom-top="transform: translateX(-30px);opacity: 0.5" data-center="transform: translateX(0px);opacity: 1")
          img.icon(src="https://i.imgur.com/F8OEHca.png", alt="")
          h4 處理大量數據
          p &nbsp&nbsp面對所有NBA球員的各項表現數據,想要預測出未來的明日之星,須要考慮的資料筆數龐大而且繁雜,所以希望藉由天際線演算法的協助,以最快的速度得到勝率預測。
      .col-md-4
        .box(data-bottom-top="transform: translateY(-30px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1")
          img.icon(src="https://i.imgur.com/qhUUHuQ.png", alt="")
          h4 市場尚未出現
          p &nbsp&nbsp目前市面上與NBA相關的APP,幾乎沒有預測的功能,如果可以在看球賽之前,可以先了解球員或球隊的表現狀況,就會覺得球賽更刺激有趣。
      .col-md-4
        .box(data-bottom-top="transform: translateX(30px);opacity: 0.5" data-center="transform: translateX(0px);opacity: 1")
          img.icon(src="https://i.imgur.com/fNvB7Fl.png", alt="")
          h4 社交功能
          p &nbsp&nbsp讓平時與NBA絕緣的使用者,迅速了解NBA球賽與即時戰況,NBA瘋向球將成為三五好友間共同的話題,一起討論現在戰況。
  svg#bottomCboard(viewbox="0 -100 100 100")
    rect.b(x=0 y=-10 width=100 height=10)
    rect(x=25 y=-9 width=10 height=8)
    rect(x=47 y=-9 width=10 height=8)
    rect(x=69 y=-9 width=10 height=8)
    rect(x=91 y=-9 width=10 height=8)
    //- circle(cx=0 cy=4 r=5)

section#section_video
  .container
    //- .circle
    h2(data-bottom-top="transform: translateY(-30px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1") ► 影片連結 ◄
    .row
      .col-md-4
        .box(data-bottom-top="transform: translateY(-80px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1")
          .pic(style='background-image:url("https://i.imgur.com/zz4rYhu.jpg")')
          .bar
            h3 概念宣傳
            a(href="https://www.youtube.com/watch?v=VJHwXE0mzrQ" target="_blank")
              i.fa.fa-video-camera
      .col-md-4
        .box(data-bottom-top="transform: translateY(-60px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1")
          .pic(style='background-image:url("https://i.imgur.com/k46aiVU.jpg")')
          .bar
            h3 設計師訪問
            a(href="https://www.youtube.com/watch?v=JmqhbdhI-i4" target="_blank")
              i.fa.fa-video-camera
      .col-md-4
        .box(data-bottom-top="transform: translateY(-40px);opacity: 0.5" data-center="transform: translateY(0px);opacity: 1")
          .pic(style='background-image:url("https://i.imgur.com/va5dt5U.jpg")')
          .bar
            h3 操作流程
            a(href="https://www.youtube.com/watch?v=gLIyWhBFXG8" target="_blank")
              i.fa.fa-video-camera
              
section#section_award
  .container
    h2 ► 得獎紀錄 ◄
    h5 2013 雲端創新應用服務競賽 APP FOR fUN 佳作
    h5 2013 通訊大賽  智慧型手持裝置使用者體驗設計競賽 優秀獎
    

    
  
              
    


/*Downloaded from https://www.codeseek.co/hanyin/nba-star-ggVMXw */
    $color_red: #CC0010
$color_blue: #0A2A7D
$color_grey: #CCCCCC

*
  // border: solid 1px black
  position: relative
  font-family: 微軟正黑體
  user-select: none
  
h1,h2,h3,h4,h5,h6
  font-weight: 700
  
body,html
  margin: 0
  padding: 0
  width: 100%
  transition: 0.5s
  
// header,section,nav
//   display: none
// #section_intro
//   display: block
  
@mixin ab_center
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%,-50%)
  
header
  background-color: $color_grey
  .container-fluid
    height: 600px
    text-align: center
    padding: 80px    
    img
      width: 100%
      max-width: 450px
      +ab_center
      // padding-top: 100px
      z-index: 5
    h5
      font-size: 15px
      position: absolute
      left: 50%
      bottom: 135px
      color: $color_red
      font-weight: 900
      transform: scaleX(1.3) scaleY(0.6)
      z-index: 5
    svg#bottomRedL
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      z-index: 0
      fill: $color_red
      
section#section_intro
  background-color: $color_red
  color: $color_grey
  text-align: center
  .container-fluid
    height: 400px
    line-height: 28px
    padding: 20px 60px      
    p
      text-align: center
      max-width: 1024px
      font-size: 16px
      letter-spacing: 3px
      margin-left: auto
      margin-right: auto
    .ball
      background-image: url(https://i.imgur.com/3XPhAH6.png)
      background-size: cover
      position: absolute
      width: 50px
      height: 50px
      left: 20%
      bottom: calc(400px - 80%)
      
      // animation-fill-mode: forwards
      // animation: ballDrop 5s 1
      // animation-timing-function: ease
      
    svg#bottomBlueL
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      z-index: 0
      fill: $color_blue
      
@keyframes ballDrop
  0%    
    margin-left: 0
    margin-top: -5%
    transform: rotate(0deg)
  
  100%
    margin-left: calc(100% - 50px)
    margin-top: 10%
    transform: rotate(1800deg)
  
section#section_interface
  height: 600px  
  background-color: $color_blue
  overflow: hidden
  .container
    padding: 20px 60px
    text-align: center
    h2
      color: $color_grey
    .row
      margin-top: 30px
      height: 400px
      .col-sm-4
        width: 40%
        .phone          
          width: 210px
          position: absolute
          right: 20px
          padding: 20px 15px
          border-radius: 10px
          background-color: $color_grey
          box-shadow: 0px 0px 25px #000
          .camera
            height: 10px
            width: 10px
            position: absolute
            left: 50%
            transform: translateX(-50%)translateY(-140%)
            border-radius: 50%
            background-color: #aaa
          .screen
            height: 320px
            background-image: url(https://i.imgur.com/AJBZCeW.jpg)
            background-size: cover
            transition: 0.5s
          .button
            height: 32px
            width: 32px
            border-radius: 50%
            background-color: #ddd
            left: 50%
            transform: translateX(-50%) translateY(30%)
            font-size: 21px
            cursor: pointer
      h5
        color: $color_grey
        font-size: 18px
        letter-spacing: 3px
        position: absolute
        z-index: 5
        cursor: pointer          
        &:hover
          color: $color_red
          
      .col-sm-8
        .name0          
          top: 180px
          left: 20px 
        svg#line1
          position: absolute
          top: 20px
          left: -50px
          height: 340px
          fill: none
          stroke: $color_grey
          stroke-width: 0.4px
          z-index: 0
        .name1
          top: 28px
          left: 150px
        .name2
          top: 128px
          left: 150px
        .name3
          top: 228px
          left: 150px
        .name4
          top: 328px
          left: 150px
        svg#line2
          position: absolute
          top: 20px
          left: 150px
          height: 340px
          fill: none
          stroke: $color_grey
          stroke-width: 0.4px
          z-index: 0
        .name5
          top: 28px
          left: 360px
        .name6
          top: 100px
          left: 360px
        .name7
          top: 156px
          left: 360px
        .name8
          top: 228px
          left: 360px
        .name9
          top: 328px
          left: 360px
  svg#bottomGreyR
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    z-index: 0
    fill: $color_grey
      
section#section_target
  background-color: $color_grey
  // height: 500px
  .container
    padding-top: 20px
    padding-bottom: 60px
    h2
      text-align: center
      padding-bottom: 20px
      color: $color_blue
    .row
      padding-top: 20px
      z-index: 1
      .col-sm-6
        .box
          background-color: $color_blue
          padding: 20px
          box-shadow: 0px 5px 15px #000
          img.icon
            width: 100px
            left: 50%
            transform: translateX(-50%)
          h4,p
            margin-top: 10px
            color: $color_grey
          h4
            text-align: center
          p
            letter-spacing: 3px
  svg#bottomRedR
    position: absolute
    bottom: 0px
    left: 0
    width: 100%
    z-index: 0
    fill: $color_red
    
section#section_feature
  background-color: $color_red
  padding-top: 20px
  padding-bottom: 160px
  .container
    text-align: center
    h2
      margin: 20px
      padding-bottom: 20px
      color: $color_grey
    .row
      .col-md-4
        .box
          background-color: $color_grey
          color: $color_blue
          padding: 15px
          z-index: 1
          box-shadow: 0px 5px 15px #000
          img.icon
            margin: 20px
          h4,p
            margin-top: 20px
          h4
            text-align: center
          p
            letter-spacing: 3px
            text-align: left
  svg#bottomCboard
    position: absolute
    bottom: 0px
    left: 0
    width: 100%    
    z-index: 0
    transform-origin: left bottom
    transform: translateY(30px) rotate(-7deg) 
    fill: $color_grey
    .b
      fill: $color_blue
    
section#section_video
  padding-top: 20px
  padding-bottom: 160px
  background-color: $color_blue
  color: $color_blue
  .container  
    .circle
      width: 70px
      height: 70px
      position: absolute
      left: -10%
      top: -50px
      border-radius: 50%
      background-color: $color_grey
    h2 
      color: $color_grey
      text-align: center
    .row
      padding-top: 40px
      
      .col-md-4
        .box
          height: 260px
          padding: 10px
          overflow: hidden
          transition: 0.5s
          background-color: $color_grey
          box-shadow: 0px 5px 15px #000
          cursor: pointer
          &:hover
            background-color: #333
            & h3
              color: $color_grey
            & .bar a
              transition: 0.5s
              bottom: 15px
          .pic
            height: 200px
            background-size: cover
          .bar
            padding: 10px
            display: inline-block
            bottom: 0
            width: 100%
            h3
              display: inline-block
              font-size: 20px
            a
              width: 45px
              height: 45px
              border-radius: 50%
              position: absolute
              right: 15px
              bottom: -50px
              background-color: #eee
              color: $color_blue
              &:hover
                background-color: $color_blue
                color: $color_grey
              i
                +ab_center
                
section#section_award
  padding-top: 20px
  padding-bottom: 80px
  background-color: $color_grey
  color: $color_blue
  .container
    text-align: center
    h2
      margin-bottom: 30px
    h5
      font-weight: 500
      margin-top: 20px
      font-size: 20px
      letter-spacing: 3px
                          
nav.topbar
  z-index: 9
  position: fixed
  padding: 20px
  height: 70px
  width: 100%
  background-color: rgba(0,0,0,0.5)
  vertical-align: top
  transition: 0.5s
    
  a
    display: inline-block
    color: $color_grey
    left: 20px
    top: 5px
    cursor: pointer
  .list 
    position: absolute
    right: 20px
    margin-top: -23px
    li
      display: inline-block
      margin-right: 30px
      a
        color: $color_grey
        font-weight: 700
        cursor: pointer
        &:hover
          text-decoration: none
          color: $color_red
        

            
          
          
            
        
            
    

  
  


/*Downloaded from https://www.codeseek.co/hanyin/nba-star-ggVMXw */
    $(".name0").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/3iR2RGb.jpg)");
  console.log("test");
});

$(".name1").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/AAQGOcv.png)");
});

$(".name2").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/zT0MJNM.jpg)");
});

$(".name3").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/sLo33Ya.jpg)");
});

$(".name4").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/H5uQCQ5.jpg)");
});

$(".name5").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/lBW2eUk.jpg)");
});

$(".name6").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/EiMg1Ie.png)");
});

$(".name7").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/qrhhXDH.jpg)");
});

$(".name8").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/Yh6echa.png)");
});

$(".name9").click(function(){
  $(".screen").css("background-image","url(https://i.imgur.com/8UvFiEz.jpg)");
});

$(window).scroll(function(evt){
  if($(window).scrollTop()>100){
    $("header h5").css("opacity","0");
  }
  else
    $("header h5").css("opacity","1");
});

$(window).scroll(function(evt){
  if($(window).scrollTop()==0){
    $("nav.topbar").css("background-color","rgba(0,0,0,0.5)");
  }
  else
    $("nav.topbar").css("background-color","#333");
});

$(document).on('click','a',function(event){
  event.preventDefault();
  var target=$(this).attr("href");
  console.log(target);
  $('html,body').animate({
    scrollTop: $(target).offset().top-180
  },700);
});

// $("a.intro").click(function(){
//   $(window).scrollTop(500);    
// });

// $("a.interface").click(function(){
//   $(window).scrollTop(884);    
// });

// $("a.target").click(function(){
//   $(window).scrollTop(1470);    
// });

// $("a.freature").click(function(){
//   $(window).scrollTop(1955);    
// });

// $("a.video").click(function(){
//   $(window).scrollTop(2500);    
// });

// $("a.award").click(function(){
//   $(window).scrollTop(2994);    
// });

$("nav.topbar h5").click(function(){
  $(window).scrollTop(0);    
});

var s = skrollr.init();

Comments