From 6066d229f0bbdcd8941f5baef1dd996fb6c06823 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 24 Jul 2017 09:09:13 +1200 Subject: [PATCH] Gradient in parallax; Placeholder --- src/js/components/Parallax.js | 102 ++++++++++++++++++------------- src/scss/components/_images.scss | 20 +----- src/scss/components/_lists.scss | 2 +- src/scss/views/_artist.scss | 6 +- 4 files changed, 68 insertions(+), 62 deletions(-) diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js index 651a876c..1a569c31 100755 --- a/src/js/components/Parallax.js +++ b/src/js/components/Parallax.js @@ -32,7 +32,7 @@ export default class Parallax extends React.Component{ window.addEventListener("resize", this.handleResize); window.addEventListener("scroll", this.handleScroll); - if( this.props.image ){ + if (this.props.image){ this._loading = true this.setState({ url: this.props.image, image: false, loading: true }) this.loadImage( this.props.image ) @@ -46,6 +46,10 @@ export default class Parallax extends React.Component{ } } ) + } else { + this._loaded = true + this.state.image = false + this.updateCanvas() } } @@ -66,7 +70,7 @@ export default class Parallax extends React.Component{ this._loading = false this._loaded = true this.setState({ url: nextProps.image, image: response, loading: false }) - this.updateCanvas( response ) + this.updateCanvas(response) } } ) @@ -74,22 +78,22 @@ export default class Parallax extends React.Component{ } handleResize(e){ - if( this._loaded ){ - this.updateCanvas( this.state.image ); + if (this._loaded){ + this.updateCanvas(this.state.image) } } handleScroll(e){ // this DOES work, but is in no way high-performing and only on Firefox - if( this._loaded ){ + if (this._loaded){ this.setState( { scrollTop: window.scrollY }, - this.updateCanvas( this.state.image ) + this.updateCanvas(this.state.image) ) } } - loadImage( url ){ + loadImage(url){ return new Promise( (resolve, reject) => { var imageObject = new Image() @@ -109,11 +113,11 @@ export default class Parallax extends React.Component{ }) } - updateCanvas( image ){ - + updateCanvas(image = false){ + console.log(image) var canvasWidth = $('.parallax').outerWidth(); var canvasHeight = $('.parallax').outerHeight(); - if( this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight ){ + if (this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight){ this.setState({ canvas: { width: canvasWidth, @@ -124,40 +128,56 @@ export default class Parallax extends React.Component{ this.renderCanvas( image ); } - renderCanvas( image = false ){ - - if (!image) return null - + renderCanvas(image = false){ let self = this; - var canvasDOM = document.getElementById('parallax-canvas'); - var context = canvasDOM.getContext('2d'); - - // zoom image to fill canvas, widthwise - if( image.width < this.state.canvas.width || image.width > this.state.canvas.width ){ - var scale = this.state.canvas.width / image.width; - image.width = image.width * scale; - image.height = image.height * scale; - } - - // now check for fill heightwise, and zoom in if necessary - if( image.height < this.state.canvas.height ){ - var scale = this.state.canvas.height / image.height; - image.width = image.width * scale; - image.height = image.height * scale; - } - - // figure out where we want the image to be, based on scroll position - var percent = Math.round( self.state.scrollTop / this.state.canvas.height * 100 ); - var position = Math.round( (this.state.canvas.height / 2) * (percent/100) ) - 100; - - image.x = ( this.state.canvas.width / 2 ) - ( image.width / 2 ); - image.y = ( ( this.state.canvas.height / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100); + var canvasDOM = document.getElementById('parallax-canvas') + var context = canvasDOM.getContext('2d') - // actually draw the image on the canvas - context.drawImage(image.object, image.x, image.y, image.width, image.height) + // Fill the background with mid-gret + context.beginPath() + context.rect(0, 0, this.state.canvas.width, this.state.canvas.height) + context.fillStyle = "#a3a19f" + context.fill() - // now update our component - self.setState({ image: image }); + if (image){ + + // zoom image to fill canvas, widthwise + if( image.width < this.state.canvas.width || image.width > this.state.canvas.width ){ + var scale = this.state.canvas.width / image.width; + image.width = image.width * scale; + image.height = image.height * scale; + } + + // now check for fill heightwise, and zoom in if necessary + if( image.height < this.state.canvas.height ){ + var scale = this.state.canvas.height / image.height; + image.width = image.width * scale; + image.height = image.height * scale; + } + + // figure out where we want the image to be, based on scroll position + var percent = Math.round( self.state.scrollTop / this.state.canvas.height * 100 ); + var position = Math.round( (this.state.canvas.height / 2) * (percent/100) ) - 100; + + image.x = ( this.state.canvas.width / 2 ) - ( image.width / 2 ); + image.y = ( ( this.state.canvas.height / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100); + + // Actually draw the image on the canvas + context.drawImage(image.object, image.x, image.y, image.width, image.height) + + // now update our component + self.setState({ image: image }); + } + + // Construct a gradient overlay + context.rect(0, 0, this.state.canvas.width, this.state.canvas.height) + let gradient = context.createLinearGradient(0, 0, 0, this.state.canvas.height) + gradient.addColorStop(0, 'rgba(38,39,40,0)') + gradient.addColorStop(0.9, 'rgba(38,39,40,1)') + context.fillStyle = gradient + + // And now drop it into place + context.fill() } render(){ diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss index 59184fa6..1008af3c 100755 --- a/src/scss/components/_images.scss +++ b/src/scss/components/_images.scss @@ -62,25 +62,9 @@ height: 50vh; width: 100%; overflow: hidden; - background: $darkest_grey; + background: $dark_grey; position: relative; - &:before { - content: ''; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 9; - pointer-events: none; - background: -webkit-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1)); - background: -moz-linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1)); - background: -o-linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1)); - background: linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1)); - } - canvas { width: 110%; height: 110%; @@ -90,7 +74,7 @@ left: -5%; &.loaded { - opacity: 0.8; + opacity: 1; } } diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 1d712a0e..bde3534f 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -337,7 +337,7 @@ padding-left: 78px !important; } .list-item:not(.can-sort){ - padding-left: 42px !important; + padding-left: 46px !important; } } } diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index a10ec10a..b2acbf05 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -47,7 +47,7 @@ margin-right: 25px; font-size: 15px; font-weight: 500; - border-bottom: 1px solid transparent; + border-bottom: 2px solid transparent; cursor: pointer; &.active { @@ -100,7 +100,9 @@ h1 { @include clearfix(); - padding: 12vw 10px 0 0; + padding: 15vw 10px 0; + font-size: 3rem; + line-height: 3rem; } .actions {