Vieux POSTE RADiO (code)
VOLUME
MIN
MAX
RADIOLA
2 BANDS RECEIVER
- OFF
- FM
- AM
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name='viewport' content='width=device-width, initial-scale=1'> | |
| <title>Radio player - CSS/Jquery</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> | |
| <style> | |
| @import 'https://fonts.googleapis.com/css?family=Kaushan+Script'; | |
| @import 'https://fonts.googleapis.com/css?family=Monoton'; | |
| @import 'https://fonts.googleapis.com/css?family=Russo+One'; | |
| @import 'https://fonts.googleapis.com/css?family=Asap:400,700'; | |
| @import 'https://fonts.googleapis.com/css?family=Pathway+Gothic+One'; | |
| /*Website*/ | |
| body, | |
| html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .wrapper { | |
| position: relative; | |
| height: 100%; | |
| background-color: #FFE74C; | |
| background: -webkit-radial-gradient(circle, #ffe95c, #f1d839); | |
| background: radial-gradient(circle, #ffe95c, #f1d839); | |
| } | |
| .player_main { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| } | |
| /*Player visual*/ | |
| .player { | |
| position: relative; | |
| width: 800px; | |
| height: 350px; | |
| border-radius: 40px; | |
| background: url(https://raw.githubusercontent.com/Swordys/retroRadio/gh-pages/style/img/wood2.jpg); | |
| background-size: cover; | |
| border: 1px solid rgb(126, 69, 33); | |
| } | |
| .player_foot { | |
| position: absolute; | |
| display: block; | |
| width: 30px; | |
| height: 60px; | |
| background: black; | |
| bottom: -15px; | |
| border-radius: 15px; | |
| z-index: -1; | |
| background: -webkit-linear-gradient(top left, rgba(115, 115, 115, 1) 0%, rgba(14, 14, 14, 1) 100%); | |
| background: linear-gradient(to bottom right, rgba(115, 115, 115, 1) 0%, rgba(14, 14, 14, 1) 100%); | |
| left: 110px; | |
| } | |
| .player_foot2 { | |
| position: absolute; | |
| display: block; | |
| width: 30px; | |
| height: 60px; | |
| background: black; | |
| bottom: -15px; | |
| border-radius: 15px; | |
| z-index: -1; | |
| background: -webkit-linear-gradient(top left, rgba(115, 115, 115, 1) 0%, rgba(14, 14, 14, 1) 100%); | |
| background: linear-gradient(to bottom right, rgba(115, 115, 115, 1) 0%, rgba(14, 14, 14, 1) 100%); | |
| right: 110px; | |
| } | |
| .main_shadow { | |
| position: absolute; | |
| width: 750px; | |
| height: 300px; | |
| background: black; | |
| bottom: 20px; | |
| right: 17px; | |
| border-radius: 20px; | |
| opacity: 0.3; | |
| -webkit-filter: blur(2px); | |
| -moz-filter: blur(2px); | |
| -o-filter: blur(2px); | |
| -ms-filter: blur(2px); | |
| filter: blur(2px); | |
| } | |
| .second_plate { | |
| position: absolute; | |
| width: 750px; | |
| height: 300px; | |
| background: rgb(224, 224, 224); | |
| border-radius: 20px; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| border: 1px solid rgb(85, 85, 85); | |
| overflow: hidden; | |
| } | |
| .speaker_cover { | |
| position: absolute; | |
| width: 350px; | |
| height: 100%; | |
| background: url(https://raw.githubusercontent.com/Swordys/retroRadio/gh-pages/style/img/dotty_mini.jpg); | |
| background-size: 150px; | |
| } | |
| .speaker_shadow { | |
| position: absolute; | |
| width: 350px; | |
| height: 100%; | |
| background: transparent; | |
| box-shadow: inset 0 2px 6px 5px rgba(255, 255, 255, 0.9); | |
| overflow: hidden; | |
| } | |
| .speaker_shadow_inside { | |
| position: absolute; | |
| width: 400px; | |
| height: 286px; | |
| background: transparent; | |
| background-size: 150px; | |
| left: 8px; | |
| top: 7px; | |
| border-radius: 15px; | |
| } | |
| .controls_main { | |
| float: right; | |
| position: relative; | |
| width: 400px; | |
| height: 340px; | |
| border-left: 1px solid rgb(80, 80, 80); | |
| background: rgb(217, 217, 169); | |
| border-radius: 0 20px 20px 0; | |
| } | |
| .metal_basel_inside { | |
| border-radius: 0 19px 19px 0; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: -webkit-linear-gradient(160deg, rgb(255, 255, 199), rgb(139, 142, 103)); | |
| background: -moz-linear-gradient(160deg, rgb(255, 255, 199), rgb(139, 142, 103)); | |
| background: linear-gradient(160deg, rgb(255, 255, 199), rgb(139, 142, 103)); | |
| } | |
| .metal_basel_cover { | |
| position: absolute; | |
| width: 395px; | |
| height: 290px; | |
| background: rgb(255, 255, 193); | |
| top: 5px; | |
| border-radius: 0 13px 13px 0; | |
| } | |
| .metal_brush { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: url(https://s21.postimg.org/gotwc26l1/brushed.jpg); | |
| background-size: cover; | |
| opacity: 0.3; | |
| border-radius: 0 20px 20px 0; | |
| } | |
| .fm_main { | |
| position: relative; | |
| height: 100px; | |
| width: 350px; | |
| background: #523b38; | |
| left: 50%; | |
| top: 20px; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| box-shadow: inset 0 2px 5px 1px rgba(0, 0, 0, 0.53); | |
| overflow: hidden; | |
| } | |
| .fm_glass { | |
| position: absolute; | |
| width: 250px; | |
| height: 200px; | |
| left: 120px; | |
| top: -50px; | |
| display: block; | |
| z-index: 2; | |
| background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 1) 3%, rgba(255, 255, 255, 1) 32%, rgba(255, 255, 255, 0.19) 57%, rgba(255, 255, 255, 0) 63%); | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 1) 3%, rgba(255, 255, 255, 1) 32%, rgba(255, 255, 255, 0.19) 57%, rgba(255, 255, 255, 0) 63%); | |
| opacity: 0.2; | |
| -webkit-transform: rotate(-15deg); | |
| transform: rotate(-15deg); | |
| } | |
| .fm_second_plate { | |
| position: absolute; | |
| height: 75px; | |
| width: 325px; | |
| left: 50%; | |
| top: 50%; | |
| background: #3a2a28; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| overflow: hidden; | |
| } | |
| .fm_slider_main { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| box-shadow: inset 1px 13px 17px 5px rgba(0, 0, 0, 0.47); | |
| overflow: hidden; | |
| } | |
| .slider_am { | |
| font-size: 13px; | |
| font-family: 'Asap', sans-serif; | |
| font-weight: 600; | |
| color: white; | |
| bottom: 30px; | |
| left: 5px; | |
| margin-left: 10px; | |
| position: absolute; | |
| opacity: 0.9; | |
| } | |
| .slider_fm { | |
| position: absolute; | |
| font-size: 13px; | |
| font-family: 'Asap', sans-serif; | |
| font-weight: 600; | |
| bottom: 3px; | |
| left: 5px; | |
| color: lightgreen; | |
| margin-left: 10px; | |
| opacity: 0.9; | |
| } | |
| .slider_am_nums { | |
| font-size: 15px; | |
| font-family: 'Pathway Gothic One', sans-serif; | |
| color: white; | |
| bottom: 30px; | |
| left: 20px; | |
| letter-spacing: 0.5px; | |
| position: absolute; | |
| opacity: 0.9; | |
| } | |
| .slider_am_nums span { | |
| margin-left: 32px; | |
| } | |
| .slider_fm_nums { | |
| font-size: 15px; | |
| font-family: 'Pathway Gothic One', sans-serif; | |
| color: white; | |
| position: absolute; | |
| bottom: 2px; | |
| left: 58px; | |
| opacity: 0.9; | |
| } | |
| .slider_fm_nums span:first-child { | |
| letter-spacing: 1px; | |
| margin-left: 0; | |
| } | |
| .slider_fm_nums span { | |
| margin-left: 19px; | |
| } | |
| .khz { | |
| position: absolute; | |
| color: white; | |
| font-weight: 700; | |
| font-family: 'Asap', sans-serif; | |
| font-size: 11px; | |
| right: 15px; | |
| top: 30px; | |
| opacity: 0.9; | |
| } | |
| .mhz { | |
| position: absolute; | |
| color: white; | |
| font-weight: 700; | |
| font-family: 'Asap', sans-serif; | |
| font-size: 11px; | |
| right: 15px; | |
| top: 58px; | |
| opacity: 0.9; | |
| } | |
| .scale { | |
| position: absolute; | |
| color: white; | |
| font-family: arial; | |
| font-size: 12px; | |
| right: 15px; | |
| top: 8px; | |
| letter-spacing: 0.2px; | |
| font-family: 'Pathway Gothic One', sans-serif; | |
| opacity: 0.9; | |
| } | |
| .grill { | |
| position: absolute; | |
| font-size: 7px; | |
| color: white; | |
| letter-spacing: 3px; | |
| bottom: 20px; | |
| left: 55px; | |
| opacity: 0.9; | |
| } | |
| .top_numbers { | |
| color: white; | |
| font-family: arial; | |
| position: absolute; | |
| font-size: 12px; | |
| letter-spacing: 6.9px; | |
| left: 55px; | |
| top: 8px; | |
| font-family: 'Pathway Gothic One', sans-serif; | |
| opacity: 0.9; | |
| } | |
| .top_numbers .ten { | |
| letter-spacing: 1px; | |
| } | |
| .top_dots { | |
| color: white; | |
| font-family: arial; | |
| position: absolute; | |
| font-size: 20px; | |
| letter-spacing: 4.4px; | |
| left: 65px; | |
| top: -3px; | |
| opacity: 0.9; | |
| } | |
| .fm_slider_bar { | |
| position: absolute; | |
| width: 6px; | |
| height: 70px; | |
| background: white; | |
| bottom: 0; | |
| left: 150px; | |
| box-shadow: 0 18px 17px 9px rgba(0, 0, 0, 0.38) | |
| } | |
| .controls_fm_main { | |
| position: absolute; | |
| width: 350px; | |
| height: 200px; | |
| bottom: 40px; | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| } | |
| .controls_fm { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /*--CIRCLE CONTROLS--*/ | |
| .tune_circle { | |
| position: relative; | |
| width: 130px; | |
| height: 130px; | |
| border-radius: 50%; | |
| background: -webkit-linear-gradient(top, rgb(182, 182, 139), rgb(135, 135, 99)); | |
| background: -moz-linear-gradient(top, rgb(182, 182, 139), rgb(135, 135, 99)); | |
| background: linear-gradient(to bottom, rrgb(182, 182, 139), rgb(135, 135, 99)); | |
| float: right; | |
| margin-top: 40px; | |
| border: 1px solid rgb(85, 85, 85); | |
| transform: rotate(0deg); | |
| cursor: pointer; | |
| } | |
| .tune_circle::after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| background: -webkit-linear-gradient(top, #fdfde5, #cdc79a); | |
| background: -moz-linear-gradient(top, #fdfde5, #cdc79a); | |
| background: linear-gradient(to bottom, #fdfde5, #cdc79a); | |
| width: 124px; | |
| height: 124px; | |
| border-radius: 50%; | |
| top: 50%; | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| z-index: 1; | |
| cursor: pointer; | |
| } | |
| .green_light { | |
| display: block; | |
| position: absolute; | |
| width: 7px; | |
| height: 20px; | |
| background: lightgreen; | |
| box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.30); | |
| right: 61px; | |
| top: 28px; | |
| transition: background 0.2s ease-in-out; | |
| z-index: -1; | |
| } | |
| .tune_circle_shadow { | |
| position: absolute; | |
| width: 105px; | |
| height: 150px; | |
| display: block; | |
| background: rgb(68, 68, 68); | |
| border-radius: 15%; | |
| -webkit-transform: rotate(-15deg); | |
| transform: rotate(-15deg); | |
| top: 80px; | |
| right: 0; | |
| opacity: 0.1; | |
| } | |
| /*MINI CIRCLES #1*/ | |
| .mini_main { | |
| position: relative; | |
| top: 35%; | |
| left: -24px; | |
| width: 100px; | |
| height: 60px; | |
| display: inline-block; | |
| } | |
| .tune_mini_circle { | |
| display: block; | |
| position: absolute; | |
| width: 55px; | |
| height: 55px; | |
| border-radius: 50%; | |
| background: -webkit-linear-gradient(top, rgb(232, 232, 180), rgb(135, 135, 99)); | |
| background: linear-gradient(to bottom, rgb(232, 232, 180), rgb(135, 135, 99)); | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| border: 1px solid rgb(85, 85, 85); | |
| transform: rotate(0deg); | |
| } | |
| .tune_mini_circle_shadow { | |
| position: absolute; | |
| display: block; | |
| width: 55px; | |
| height: 85px; | |
| background: black; | |
| border-radius: 40%; | |
| top: 0; | |
| left: 40px; | |
| -webkit-transform: rotate(-20deg); | |
| transform: rotate(-20deg); | |
| opacity: 0.1; | |
| } | |
| .tune_mini_circle:after { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 48px; | |
| height: 48px; | |
| background: -webkit-linear-gradient(top, rgb(228, 228, 177), rgb(187, 187, 137)); | |
| background: -webkit-linear-gradient(top, #fdfde5, #cdc79a); | |
| background: linear-gradient(to bottom, #fdfde5, #cdc79a); | |
| border-radius: 50%; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| z-index: 1; | |
| } | |
| .tune_mini_circle:before { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 4px; | |
| height: 13px; | |
| border-radius: 50px; | |
| background: rgb(161, 161, 161); | |
| box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.40); | |
| left: 50%; | |
| top: 5px; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| z-index: 2; | |
| } | |
| .tune_mini_circle { | |
| left: 37%; | |
| } | |
| /*MINI CIRCLES #2*/ | |
| .tune_mini_circle_2 { | |
| display: block; | |
| position: absolute; | |
| width: 55px; | |
| height: 55px; | |
| border-radius: 50%; | |
| background: -webkit-linear-gradient(top, rgb(232, 232, 180), rgb(135, 135, 99)); | |
| background: linear-gradient(to bottom, rgb(232, 232, 180), rgb(135, 135, 99)); | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| border: 1px solid rgb(85, 85, 85); | |
| transform: rotate(); | |
| } | |
| .tune_mini_circle_2:after { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 48px; | |
| height: 48px; | |
| background: -webkit-linear-gradient(top, rgb(228, 228, 177), rgb(187, 187, 137)); | |
| background: -webkit-linear-gradient(top, #fdfde5, #cdc79a); | |
| background: linear-gradient(to bottom, #fdfde5, #cdc79a); | |
| border-radius: 50%; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| z-index: 1; | |
| } | |
| .tune_mini_circle_2:before { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 4px; | |
| height: 13px; | |
| border-radius: 50px; | |
| background: rgb(161, 161, 161); | |
| box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.40); | |
| left: 50%; | |
| top: 5px; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| z-index: 2; | |
| } | |
| .tune_mini_circle_2 { | |
| left: 32%; | |
| } | |
| /*--CIRCLE_TEXT--*/ | |
| .vol { | |
| position: absolute; | |
| font-family: 'Asap', sans-serif; | |
| font-size: 12px; | |
| top: 45px; | |
| left: 20px; | |
| font-weight: 700; | |
| color: #523b38; | |
| } | |
| .min { | |
| position: absolute; | |
| font-family: 'Asap', sans-serif; | |
| font-size: 8px; | |
| bottom: 70px; | |
| font-weight: bold; | |
| color: #523b38; | |
| } | |
| .max { | |
| position: absolute; | |
| font-family: 'Asap', sans-serif; | |
| font-size: 8px; | |
| bottom: 70px; | |
| left: 70px; | |
| font-weight: bold; | |
| color: #523b38; | |
| } | |
| .off { | |
| position: absolute; | |
| list-style: none; | |
| top: 25px; | |
| left: 61px; | |
| } | |
| .off li:first-child::before { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| background: #523b38; | |
| bottom: -8px; | |
| right: 45px; | |
| } | |
| .off li:nth-child(2)::before { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| background: #523b38; | |
| bottom: -8px; | |
| right: 29px; | |
| } | |
| .off li:nth-child(3)::before { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| background: #523b38; | |
| bottom: -8px; | |
| right: 13px; | |
| } | |
| .off li { | |
| font-size: 12px; | |
| font-family: 'Asap', sans-serif; | |
| display: inline-block; | |
| font-weight: 700; | |
| color: #523b38; | |
| } | |
| .off li:first-child { | |
| padding: 0 3px; | |
| border: 1px solid #523b38; | |
| border-radius: 10px; | |
| } | |
| .tune { | |
| position: absolute; | |
| font-family: 'Asap', sans-serif; | |
| font-size: 12px; | |
| top: 45px; | |
| right: 120px; | |
| font-weight: 700; | |
| color: #523b38; | |
| } | |
| .text_logo { | |
| position: absolute; | |
| font-family: 'Russo One', sans-serif; | |
| font-size: 22px; | |
| bottom: 19px; | |
| color: #5b423e; | |
| } | |
| .text_info { | |
| position: absolute; | |
| font-family: 'Asap', sans-serif; | |
| font-size: 10px; | |
| bottom: 23px; | |
| left: 115px; | |
| color: #523b38; | |
| } | |
| /*player interactions */ | |
| .power_glow { | |
| background: green; | |
| } | |
| .tune_mini_circle_2 { | |
| transform: rotate(-25deg); | |
| cursor: pointer; | |
| transition: transform 0.1s ease-out; | |
| } | |
| .tune_mini_circle { | |
| transform: rotate(-0deg); | |
| cursor: pointer; | |
| transition: transform 0.1s ease-out; | |
| } | |
| .tune_circle_main { | |
| position: absolute; | |
| right: 0; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="player_main"> | |
| <div class="player"> | |
| <div class="player_foot"></div> | |
| <div class="player_foot2"></div> | |
| <div class="main_shadow"></div> | |
| <div class="second_plate"> | |
| <div class="speaker_cover"> | |
| <div class="speaker_shadow"> | |
| <div class="speaker_shadow_inside"></div> | |
| </div> | |
| </div> | |
| <div class="controls_main"> | |
| <div class="metal_basel_inside"> | |
| <div class="metal_basel_cover"></div> | |
| </div> | |
| <div class="metal_brush"></div> | |
| <div class="fm_main"> | |
| <div class="fm_glass"></div> | |
| <div class="fm_second_plate"> | |
| <div class="fm_slider_main"> | |
| <div class="top_numbers"><span>0 1 2 3 4 5 6 7 8 9 <span class="ten">10</span></span> | |
| </div> | |
| <div class="top_dots"><span>. . . . . . . . . .</span></div> | |
| <div class="slider_am"> | |
| <span>AM</span> | |
| </div> | |
| <div class="slider_am_nums"> | |
| <span>530 600</span> | |
| <span>800 1000</span> | |
| <span>1400 1700</span> | |
| </div> | |
| <div class="grill"><span>|||||||||||||||||||||||||||||||||||||||||||||||||</span></div> | |
| <div class="khz"><span>KHz</span></div> | |
| <div class="scale"><span>Scale</span></div> | |
| <div class="slider_fm"> | |
| <span>FM</span> | |
| </div> | |
| <div class="slider_fm_nums"> | |
| <span>88 90 92 94 96</span> | |
| <span>100</span> | |
| <span>104</span> | |
| <span>108</span> | |
| </div> | |
| <div class="mhz"><span>MHz</span></div> | |
| </div> | |
| <div class="fm_slider_bar"></div> | |
| </div> | |
| </div> | |
| <div class="controls_fm_main"> | |
| <span class="vol">VOLUME</span> | |
| <span class="min">MIN</span> | |
| <span class="max">MAX</span> | |
| <ul class="off"> | |
| <li>OFF</li> | |
| <li>FM</li> | |
| <li>AM</li> | |
| </ul> | |
| <span class="tune">TUNE</span> | |
| <div class="controls_fm"> | |
| <div class="green_light"></div> | |
| <div class="tune_circle_shadow"> | |
| </div> | |
| <div class="tune_circle"> | |
| </div> | |
| <div class="mini_main"> | |
| <div class="tune_mini_circle_shadow"></div> | |
| <div class="tune_mini_circle"> | |
| </div> | |
| </div> | |
| <div class="mini_main"> | |
| <div class="tune_mini_circle_shadow"></div> | |
| <div class="tune_mini_circle_2"> | |
| </div> | |
| </div> | |
| </div> | |
| <span class="text_logo">RADIOLA</span> | |
| <span class="text_info">2 BANDS RECEIVER</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script> | |
| <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" type="text/javascript"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script> | |
| <script id="rendered-js" > | |
| var tune = $(".tune_mini_circle_2"); | |
| var volume = $(".tune_mini_circle"); | |
| var fm_slider = $(".tune_circle"); | |
| var angle = tune.css("transform", "rotate"); | |
| var fm_pole = $(".fm_slider_bar"); | |
| var fm_pole_loc = fm_pole.css("left"); | |
| // interaction functions | |
| $(function functionName() { | |
| // ON/OFF CONTROLS | |
| Draggable.create(tune, { | |
| type: "rotation", | |
| throwProps: true, | |
| bounds: { | |
| minRotation: -25, | |
| maxRotation: 25 }, | |
| liveSnap: function (endValue) { | |
| if (endValue == -25) { | |
| $(".green_light").addClass("power_glow"), | |
| $(".radio_list").trigger('pause'); | |
| } else { | |
| $(".green_light").removeClass("power_glow"), | |
| $(".radio_list").trigger('play'); | |
| } | |
| return Math.round(endValue / 25) * 25; | |
| } }); | |
| // VOLUME CONTROLS | |
| var volumeMin; | |
| Draggable.create(volume, { | |
| type: "rotation", | |
| throwProps: true, | |
| bounds: { | |
| minRotation: -120, | |
| maxRotation: 120 }, | |
| liveSnap: function (endValue) { | |
| var middle = 0.50; | |
| if (endValue === 0) { | |
| $(".radio_list").prop("volume", middle); | |
| } else { | |
| $(".radio_list").prop("volume", endValue / 240 + middle); | |
| } | |
| return Math.round(endValue / 20) * 20; | |
| } }); | |
| // FM CONTROLS | |
| var radio = $(".radio_list"); | |
| var filename; | |
| Draggable.create(fm_slider, { | |
| type: "rotation", | |
| throwProps: true, | |
| bounds: { | |
| minRotation: -100, | |
| maxRotation: 100 }, | |
| liveSnap: function (endValue) { | |
| fm_pole.css("left", endValue + 150); | |
| return Math.round(endValue / 20) * 20; | |
| } }); | |
| }); | |
| //# sourceURL=pen.js | |
| </script> | |
| </body> | |
| </html> |
Commentaires
Enregistrer un commentaire
🖐 Hello,
N'hésitez pas à commenter ou vous exprimer si vous avez des trucs à dire . . .👉