Utilizes the CoinMarketCap api: https://coinmarketcap.com/api/ Card style inspiration: https://www.uplabs.com/posts/levitating-product-card Particles effect: https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js
A Pen by mike lange on CodePen.
| #root |
| class App extends React.Component{ | |
| constructor(props){ | |
| super(props) | |
| this.getCoins = this.getCoins.bind(this) | |
| this.setIndex = this.setIndex.bind(this) | |
| this.state = { | |
| coins: [], | |
| index: 0, | |
| updating: false, | |
| isLoading: false, | |
| isShowingTooltip: true | |
| } | |
| } | |
| componentDidMount(){ | |
| this.getCoins() | |
| // particlesJS("particles", particlesConfig) | |
| } | |
| componentDidUpdate(prevProps, prevState){ | |
| if(prevState.index !== this.state.index){ | |
| if(this.state.isShowingTooltip){ | |
| this.setState({isShowingTooltip: false}) | |
| } | |
| this.setState({updating: true}) | |
| setTimeout(() => { | |
| this.setState({updating: false}) | |
| }, 200) | |
| } | |
| } | |
| getCoins(){ | |
| this.setState({isLoading: true}) | |
| axios.get('https://api.coinmarketcap.com/v1/ticker/') | |
| .then(res => { | |
| const coins = this.mapCoins(res.data) | |
| this.setState({coins}) | |
| this.setState({isLoading: false}) | |
| }) | |
| .catch(err => { | |
| console.error('Error loading data from Coin Market Cap') | |
| console.error(err) | |
| }) | |
| } | |
| getCoinIcon(symbol){ | |
| return `https://s3-us-west-2.amazonaws.com/s.cdpn.io/1468070/${symbol}.svg` | |
| } | |
| mapCoins(coins){ | |
| return coins.map(coin => ({ | |
| name: coin.name, | |
| symbol: coin.symbol, | |
| rank: coin.rank, | |
| price: formatNum(coin.price_usd), | |
| change24hr: coin.percent_change_24h, | |
| cap: formatNum(coin.market_cap_usd), | |
| volume: formatNum(coin['24h_volume_usd']), | |
| circulating: formatNum(coin.available_supply), | |
| img: this.getCoinIcon(coin.symbol.toLowerCase()), | |
| color: getCoinColor(coin.symbol) | |
| })) | |
| } | |
| setIndex(index){ | |
| this.setState({index}) | |
| } | |
| render(){ | |
| const { | |
| coins, | |
| index, | |
| updating, | |
| isLoading, | |
| isShowingTooltip | |
| } = this.state | |
| let card = null | |
| if(isLoading){ | |
| card = ( | |
| <div id="card-loading"> | |
| <div id="card-loading-spinner"/> | |
| </div> | |
| ) | |
| } | |
| else if(coins.length > 0){ | |
| card = ( | |
| <Card | |
| coins={coins} | |
| index={index} | |
| setIndex={this.setIndex} | |
| /> | |
| ) | |
| } | |
| return( | |
| <div id="app" className={updating ? 'updating' : ''}> | |
| <div id="particles"/> | |
| <div id="help-tooltip" className={isShowingTooltip ? 'showing' : 'hide'}> | |
| <i className="fa fa-question-circle-o"/> | |
| <h1><span className="text">Hover over the coin icon and scroll.</span><span className="triangle"/></h1> | |
| </div> | |
| {card} | |
| </div> | |
| ) | |
| } | |
| } | |
| class Card extends React.Component{ | |
| determineSign(num){ | |
| return parseFloat(num) >= 0 ? 'positive' : 'negative' | |
| } | |
| render(){ | |
| const {coins, index} = this.props, | |
| coin = coins[index], | |
| colorClass = getColorClass(coin.color) | |
| return( | |
| <div id="card-wrapper" className={colorClass}> | |
| <div id="card"> | |
| <div id="card-left" className="card-half"> | |
| <div id="coin-icon" style={{backgroundImage: `url(${coin.img})`}}/> | |
| <div id="coin-symbol-vert"> | |
| <h1>{coin.symbol}</h1> | |
| </div> | |
| <CoinSelection | |
| coins={coins} | |
| index={index} | |
| setIndex={this.props.setIndex} | |
| /> | |
| </div> | |
| <div id="card-right" className="card-half"> | |
| <div id="card-right-contents"> | |
| <div id="coin-header"> | |
| <div id="coin-name"> | |
| <h1>{coin.name}</h1> | |
| </div> | |
| <div id="coin-symbol"> | |
| <h1>{coin.symbol}</h1> | |
| </div> | |
| <div id="coin-rank"> | |
| <div className="label"> | |
| <h1>Rank</h1> | |
| </div> | |
| <div className="value"> | |
| <h1>{coin.rank}</h1> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="coin-price"> | |
| <div className="value"> | |
| <h1>${coin.price}</h1> | |
| </div> | |
| <div id="coin-change-24hr" className={this.determineSign(coin.change24hr)}> | |
| <h1>{coin.change24hr}%</h1> | |
| </div> | |
| </div> | |
| <div id="coin-info"> | |
| <CoinInfoField value={`$${coin.cap}`} label={"Market Cap"}/> | |
| <CoinInfoField value={`$${coin.volume}`} label={"Volume"}/> | |
| <CoinInfoField value={`${coin.circulating} ${coin.symbol}`} label={"Circulating Supply"}/> | |
| </div> | |
| <div id="card-right-stripes"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| } | |
| const CoinInfoField = ({ | |
| value, | |
| label | |
| }) => { | |
| return( | |
| <div className="coin-info-field"> | |
| <div className="value"> | |
| <h1>{value}</h1> | |
| </div> | |
| <div className="label"> | |
| <h1>{label}</h1> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| class CoinSelection extends React.Component { | |
| constructor(props){ | |
| super(props) | |
| this.setCurrentScrollTop = this.setCurrentScrollTop.bind(this) | |
| this.moveScrollTop = this.moveScrollTop.bind(this) | |
| this.onOptionsScroll = this.onOptionsScroll.bind(this) | |
| this.state = { | |
| currentScrollTop: 0 | |
| } | |
| } | |
| setCurrentScrollTop(val){ | |
| this.setState({currentScrollTop: val}) | |
| } | |
| moveScrollTop(){ | |
| this.refs.coinOptions.scrollTop = this.state.currentScrollTop | |
| } | |
| onOptionsScroll(){ | |
| const option = document.getElementsByClassName('coin-option')[0], | |
| topOffset = window.innerHeight / 2, | |
| optionHeight = option.clientHeight, | |
| scrollTop = this.refs.coinOptions.scrollTop, | |
| newScrollTop = this.props.index * (optionHeight + 20), | |
| index = Math.max(1, Math.ceil(scrollTop / optionHeight)) | |
| this.setCurrentScrollTop(newScrollTop) | |
| this.props.setIndex(index - 1) | |
| } | |
| render(){ | |
| const coinOptions = this.props.coins.slice(0,10).map(coin => { | |
| const selected = this.props.index == coin.rank - 1 | |
| return( | |
| <div key={coin.symbol} className={`coin-option ${selected ? 'selected' : ''}`}> | |
| <div className={'coin-option-icon'} style={{backgroundImage: `url(${coin.img})`}}/> | |
| </div> | |
| ) | |
| }) | |
| return( | |
| <div id="coin-selection" onMouseLeave={this.moveScrollTop}> | |
| <div id="coin-options-wrapper" | |
| ref="coinOptions" | |
| className="scroll-bar" | |
| onScroll={_.throttle(this.onOptionsScroll, 200)} | |
| > | |
| <div id="coin-options"> | |
| {coinOptions} | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| } | |
| const formatNum = num => { | |
| const splitNum = num.split('.'), | |
| firstHalf = splitNum[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","), | |
| secondHalf = splitNum[1] | |
| return secondHalf ? `${firstHalf}.${secondHalf}` : firstHalf | |
| } | |
| const getCoinColor = symbol => { | |
| switch(symbol){ | |
| case 'BTC': | |
| return ORANGE | |
| case 'ETH': | |
| return BLUE | |
| case 'XRP': | |
| return BLUE | |
| case 'BCH': | |
| return GREEN | |
| case 'ADA': | |
| return BLUE | |
| case 'XLM': | |
| return BLUE | |
| case 'LTC': | |
| return GRAY | |
| case 'NEO': | |
| return GREEN | |
| case 'EOS': | |
| return GRAY | |
| case 'XEM': | |
| return BLUE | |
| default: | |
| return GRAY | |
| } | |
| } | |
| const getColorClass = color => { | |
| switch(color){ | |
| case ORANGE: | |
| return 'orange' | |
| case BLUE: | |
| return 'blue' | |
| case GREEN: | |
| return 'green' | |
| case GRAY: | |
| return 'gray' | |
| } | |
| } | |
| const ORANGE = 'ORANGE', | |
| BLUE = 'BLUE', | |
| GREEN = 'GREEN', | |
| GRAY = 'GRAY' | |
| const particlesConfig = { | |
| "particles": { | |
| "number": { | |
| "value": 30 | |
| }, | |
| "color": { | |
| "value": "#607d8b" | |
| }, | |
| "size": { | |
| "value": 2 | |
| }, | |
| "line_linked": { | |
| "enable": true, | |
| "distance": 350, | |
| "color": "#607d8b" | |
| } | |
| }, | |
| "interactivity": { | |
| "events": { | |
| "onhover": { | |
| "enable": true, | |
| "mode": "grab" | |
| }, | |
| "onclick": { | |
| "enable": false | |
| } | |
| }, | |
| "modes": { | |
| "grab": { | |
| "distance": 500, | |
| "line_linked": { | |
| "opacity": 1 | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ReactDOM.render(<App/>, document.getElementById('root')) |
| <script src="https://codepen.io/TheVVaFFle/pen/0299c8b36352c72cbfe8df48b47b54ca"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
| $lightBlue: rgb(79,195,247); | |
| $darkBlue: rgb(13,71,161); | |
| $lightGreen: rgb(102,187,106); | |
| $darkGreen: rgb(27,94,32); | |
| $limeGreen: rgb(205,220,57); | |
| $lightYellow: rgb(255,235,59); | |
| $yellow: rgb(253,216,53); | |
| $goldYellow: rgb(251,192,45); | |
| $orange: rgb(255,152,0); | |
| $darkOrange: rgb(230,81,0); | |
| body{ | |
| overflow: hidden; | |
| h1, h2, h3, div{ | |
| color: $gray60; | |
| font-family: 'Roboto', sans-serif; | |
| margin: 0px; | |
| } | |
| } | |
| body, html, #root, #app{ | |
| height: 100%; | |
| margin: 0px; | |
| padding: 0px; | |
| width: 100%; | |
| } | |
| .scroll-bar{ | |
| &::-webkit-scrollbar { | |
| height: 0px; | |
| width: 0px; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| background-color: $gray240; | |
| } | |
| } | |
| #app{ | |
| &.updating{ | |
| #card-wrapper{ | |
| #card{ | |
| #card-left{ | |
| #coin-symbol-vert{ | |
| opacity: 0; | |
| transform: rotate(-90deg) translateY(20px); | |
| } | |
| } | |
| #card-right{ | |
| #card-right-contents{ | |
| #coin-header, #coin-price, #coin-info{ | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| #card-right-stripes{ | |
| opacity: 0; | |
| transform: translateX(100%) translateY(100%); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #particles{ | |
| height: 100%; | |
| left: 0px; | |
| position: fixed; | |
| top: 0px; | |
| width: 100%; | |
| z-index: 1; | |
| } | |
| #help-tooltip{ | |
| bottom: 10px; | |
| left: 10px; | |
| position: fixed; | |
| transition: all 0.4s; | |
| z-index: 4; | |
| &.hide{ | |
| opacity: 0; | |
| } | |
| i{ | |
| font-size: 2em; | |
| height: 50px; | |
| line-height: 50px; | |
| text-align: center; | |
| vertical-align: top; | |
| width: 50px; | |
| } | |
| h1{ | |
| animation: bounce-tooltip 3s ease-in-out infinite; | |
| display: inline-block; | |
| font-size: 1em; | |
| position: relative; | |
| .text{ | |
| background-color: white; | |
| border-radius: 2px; | |
| box-shadow: $shadow1; | |
| display: inline-block; | |
| height: 40px; | |
| font-size: 1em; | |
| font-weight: 100; | |
| line-height: 40px; | |
| margin: 5px 0px; | |
| margin-left: 10px; | |
| padding: 0px 15px; | |
| position: relative; | |
| vertical-align: top; | |
| z-index: 2; | |
| } | |
| &:before, .triangle{ | |
| background-color: white; | |
| box-shadow: $shadow1; | |
| display: inline-block; | |
| height: 20px; | |
| left: 0px; | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%) rotate(45deg); | |
| width: 20px; | |
| z-index: 1; | |
| } | |
| &:before{ | |
| box-shadow: none; | |
| content: ''; | |
| z-index: 3; | |
| } | |
| } | |
| } | |
| #card-loading{ | |
| @include center; | |
| height: 300px; | |
| width: 300px; | |
| z-index: 3; | |
| #card-loading-spinner{ | |
| @include center; | |
| &:before, &:after{ | |
| @include center; | |
| content: ''; | |
| } | |
| &:before{ | |
| animation: rotate 3s linear infinite; | |
| border-bottom: 1px solid transparent; | |
| border-left: 1px solid $lightBlue; | |
| border-right: 1px solid $lightBlue; | |
| border-top: 1px solid transparent; | |
| border-radius: 1000px; | |
| height: 150px; | |
| width: 150px; | |
| } | |
| &:after{ | |
| animation: rotate-reverse 3s linear infinite; | |
| border-bottom: 1px solid $gray200; | |
| border-left: 1px solid transparent; | |
| border-right: 1px solid transparent; | |
| border-top: 1px solid $gray200; | |
| border-radius: 1000px; | |
| height: 120px; | |
| width: 120px; | |
| } | |
| height: 150px; | |
| width: 150px; | |
| } | |
| } | |
| #card-wrapper{ | |
| @include center; | |
| height: calc(100% - 40px); | |
| pointer-events: none; | |
| width: calc(100% - 40px); | |
| z-index: 3; | |
| &.orange{ | |
| #card{ | |
| #card-left{ | |
| background-image: linear-gradient(45deg, $lightYellow, $orange); | |
| } | |
| #card-right{ | |
| #card-right-contents #coin-header{ | |
| #coin-symbol h1{ | |
| color: $orange; | |
| } | |
| #coin-rank{ | |
| .value{ | |
| h1{ | |
| color: $orange; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #card{ | |
| @include center; | |
| animation: fade-in-up 1s ease-in-out; | |
| font-size: 0px; | |
| height: 400px; | |
| pointer-events: initial; | |
| width: 647px; | |
| .card-half{ | |
| background-color: white; | |
| display: inline-block; | |
| height: 100%; | |
| position: relative; | |
| vertical-align: top; | |
| width: 50%; | |
| } | |
| #card-left{ | |
| box-shadow: $shadow3; | |
| z-index: 1; | |
| &:hover{ | |
| #coin-selection{ | |
| opacity: 1; | |
| pointer-events: initial; | |
| #coin-options-wrapper{ | |
| #coin-options{ | |
| .coin-option{ | |
| .coin-option-icon{ | |
| transform: scale(0.7); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #coin-icon{ | |
| opacity: 0; | |
| } | |
| } | |
| #coin-icon{ | |
| background-color: white; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| border-radius: 1000px; | |
| box-shadow: $shadow3; | |
| height: 260px; | |
| left: 0px; | |
| position: absolute; | |
| top: 50%; | |
| transform: translateX(-40px) translateY(-50%); | |
| transition: all 0.2s; | |
| width: 260px; | |
| z-index: 2; | |
| } | |
| #coin-symbol-vert{ | |
| bottom: 100px; | |
| height: 120px; | |
| margin: 10px; | |
| position: absolute; | |
| right: -100px; | |
| transform: rotate(-90deg); | |
| transition: all 0.2s; | |
| width: 320px; | |
| h1{ | |
| color: rgba(white, 0.2); | |
| font-size: 150px; | |
| font-weight: 700; | |
| height: 120px; | |
| line-height: 120px; | |
| margin: 0px; | |
| } | |
| } | |
| #coin-selection{ | |
| height: 100vh; | |
| left: 0px; | |
| margin-left: -60px; | |
| opacity: 0; | |
| pointer-events: none; | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| transition: all 0.2s; | |
| width: calc(100% + 60px); | |
| z-index: 3; | |
| &:before, &:after{ | |
| height: 15vh; | |
| content: ''; | |
| left: 0px; | |
| position: absolute; | |
| width: 100%; | |
| z-index: 2; | |
| } | |
| &:before{ | |
| background: linear-gradient(to bottom, white, transparent); | |
| top: 0px; | |
| } | |
| &:after{ | |
| background: linear-gradient(to top, white, transparent); | |
| bottom: 0px; | |
| } | |
| #coin-options-wrapper{ | |
| height: 100%; | |
| overflow: auto; | |
| width: 100%; | |
| #coin-options{ | |
| margin: calc(50vh - 130px) 0px; | |
| padding-left: 20px; | |
| position: relative; | |
| z-index: 1; | |
| .coin-option{ | |
| margin-bottom: 20px; | |
| position: relative; | |
| &.selected{ | |
| .coin-option-icon{ | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| .coin-option-icon{ | |
| background-color: white; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| border-radius: 1000px; | |
| box-shadow: $shadow3; | |
| height: 260px; | |
| opacity: 0.8; | |
| transform: scale(0.2); | |
| transition: all 0.2s; | |
| width: 260px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #card-right{ | |
| z-index: 2; | |
| #card-right-contents{ | |
| background-color: white; | |
| box-shadow: $shadow3; | |
| height: 460px; | |
| margin-top: -30px; | |
| overflow: hidden; | |
| position: relative; | |
| #coin-header{ | |
| border-bottom: 1px solid $gray240; | |
| margin: 20px; | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| position: relative; | |
| transition: all 0.2s; | |
| #coin-name{ | |
| h1{ | |
| font-size: 30px; | |
| font-weight: 100; | |
| text-transform: uppercase; | |
| } | |
| } | |
| #coin-symbol{ | |
| h1{ | |
| color: $gray200; | |
| font-size: 15px; | |
| font-weight: 300; | |
| } | |
| } | |
| #coin-rank{ | |
| backface-visibility: hidden; | |
| display: inline-block; | |
| position: absolute; | |
| right: 0px; | |
| top: 0px; | |
| .label, .value{ | |
| display: inline-block; | |
| h1{ | |
| font-size: 20px; | |
| } | |
| } | |
| .label{ | |
| h1{ | |
| color: $gray200; | |
| font-weight: 400; | |
| text-transform: uppercase; | |
| } | |
| } | |
| .value{ | |
| margin-left: 6px; | |
| h1{ | |
| font-weight: 100; | |
| font-size: 2 | |
| } | |
| } | |
| } | |
| } | |
| #coin-price{ | |
| backface-visibility: hidden; | |
| margin: 20px; | |
| margin-top: 0px; | |
| transition: all 0.2s; | |
| .value{ | |
| display: inline-block; | |
| vertical-align: top; | |
| h1{ | |
| font-size: 40px; | |
| font-weight: 100; | |
| } | |
| } | |
| #coin-change-24hr{ | |
| display: inline-block; | |
| margin: 5px; | |
| vertical-align: top; | |
| &.positive{ | |
| h1{ | |
| color: $lightGreen; | |
| } | |
| } | |
| &.negative{ | |
| h1{ | |
| color: $red; | |
| } | |
| } | |
| h1{ | |
| color: $gray60; | |
| font-size: 20px; | |
| font-weight: 100; | |
| } | |
| } | |
| } | |
| #coin-info{ | |
| margin: 20px; | |
| transition: all 0.2s; | |
| .coin-info-field{ | |
| margin-top: 20px; | |
| .value{ | |
| h1{ | |
| font-size: 20px; | |
| font-weight: 300; | |
| } | |
| } | |
| .label{ | |
| margin-top: 4px; | |
| h1{ | |
| color: $gray200; | |
| font-size: 12px; | |
| font-weight: 400; | |
| text-transform: uppercase; | |
| } | |
| } | |
| } | |
| } | |
| #card-right-stripes{ | |
| bottom: 0px; | |
| height: 50px; | |
| right: 0px; | |
| position: absolute; | |
| transition: all 0.2s; | |
| width: 50px; | |
| &:before, &:after{ | |
| background-color: red; | |
| content: ''; | |
| height: 200px; | |
| position: absolute; | |
| } | |
| &:after{ | |
| box-shadow: $shadow2; | |
| left: 0px; | |
| top: -70px; | |
| transform: rotate(45deg); | |
| width: 80px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Color specific | |
| #card-wrapper{ | |
| &.orange{ | |
| #card{ | |
| #card-left{ | |
| background-image: linear-gradient(45deg, $lightYellow, $orange); | |
| } | |
| #card-right{ | |
| #card-right-contents { | |
| #coin-header{ | |
| #coin-symbol h1{ | |
| color: $orange; | |
| } | |
| #coin-rank .value h1{ | |
| color: $orange; | |
| } | |
| } | |
| #card-right-stripes{ | |
| &:before, &:after{ | |
| background-color: $orange; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &.blue{ | |
| #card{ | |
| #card-left{ | |
| background-image: linear-gradient(45deg, $lightBlue, $darkBlue); | |
| } | |
| #card-right{ | |
| #card-right-contents{ | |
| #coin-header{ | |
| #coin-symbol h1{ | |
| color: $lightBlue; | |
| } | |
| #coin-rank .value h1{ | |
| color: $lightBlue; | |
| } | |
| } | |
| #card-right-stripes{ | |
| &:before, &:after{ | |
| background-color: $lightBlue; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &.green{ | |
| #card{ | |
| #card-left{ | |
| background-image: linear-gradient(45deg, $lightGreen, $limeGreen); | |
| } | |
| #card-right{ | |
| #card-right-contents{ | |
| #coin-header{ | |
| #coin-symbol h1{ | |
| color: $lightGreen; | |
| } | |
| #coin-rank .value h1{ | |
| color: $lightGreen; | |
| } | |
| } | |
| #card-right-stripes{ | |
| &:before, &:after{ | |
| background-color: $lightGreen; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &.gray{ | |
| #card{ | |
| #card-left{ | |
| background-image: linear-gradient(45deg, $gray60, $gray150); | |
| } | |
| #card-right{ | |
| #card-right-contents{ | |
| #coin-header{ | |
| #coin-symbol h1{ | |
| color: $gray150; | |
| } | |
| #coin-rank .value h1{ | |
| color: $gray60; | |
| } | |
| } | |
| #card-right-stripes{ | |
| &:before, &:after{ | |
| background-color: $gray60; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @keyframes rotate { | |
| 0%{ | |
| transform: translateX(-50%) translateY(-50%) rotate(0deg); | |
| } | |
| 100%{ | |
| transform: translateX(-50%) translateY(-50%) rotate(360deg); | |
| } | |
| } | |
| @keyframes rotate-reverse { | |
| 0%{ | |
| transform: translateX(-50%) translateY(-50%) rotate(0deg); | |
| } | |
| 100%{ | |
| transform: translateX(-50%) translateY(-50%) rotate(-360deg); | |
| } | |
| } | |
| @keyframes bounce-tooltip{ | |
| 0%, 55%, 65%, 75%, 100%{ | |
| margin-left: 5px; | |
| } | |
| 60%, 70%{ | |
| margin-left: 10px; | |
| } | |
| } | |
| @keyframes fade-in-up { | |
| from, | |
| 60%, | |
| 75%, | |
| 90%, | |
| to { | |
| animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| } | |
| from { | |
| opacity: 0; | |
| transform: translate3d(-50%, -40%, 0); | |
| } | |
| to { | |
| transform: translate3d(-50%, -50%, 0); | |
| } | |
| } |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://codepen.io/TheVVaFFle/pen/e1f2a0ef54733cf90c8aed4d7233b027" rel="stylesheet" /> |