Last active
December 9, 2020 22:41
-
-
Save timmse/2276b23134f750046ba6d033fece96f0 to your computer and use it in GitHub Desktop.
Clone images + Vibrant.js color from image
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="img-wrapper d-flex align-items-center"> | |
| <div class="color-block-vibrant is-masked"></div> | |
| <div class="color-block is-masked"></div> | |
| <div class="img-holder d-flex justify-content-end"> | |
| <img crossOrigin="" class="img-fluid img-holder-img" src="https://i.imgur.com/QOLatS7.png" alt=""> | |
| </div> | |
| <!-- | |
| <div class="img-holder d-flex justify-content-center"> | |
| <img id="post-img" crossOrigin="" class="img-fluid img-holder-img" src="https://i.imgur.com/QOLatS7.png" alt=""> | |
| </div> | |
| <div class="img-holder d-flex justify-content-start"> | |
| <img crossOrigin="" class="img-fluid img-holder-img" src="https://i.imgur.com/QOLatS7.png" alt=""> | |
| </div> | |
| --> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // color thief | |
| /* | |
| const colorThief = new ColorThief(); | |
| const img = document.querySelector('.img-holder-img'); | |
| var color = ''; | |
| const colorBlock = document.querySelector('.color-block'); | |
| // Make sure image is finished loading | |
| if (img.complete) { | |
| color = colorThief.getColor(img); | |
| colorBlock.style.backgroundColor = 'rgb('+color+')'; | |
| } else { | |
| img.addEventListener('load', function() { | |
| colorThief.getColor(img); | |
| colorBlock.style.backgroundColor = 'rgb('+color+')'; | |
| }); | |
| } | |
| */ | |
| // Vibrant.js | |
| let img = document.querySelector('.img-holder-img'); | |
| //var imgPath = document.querySelector('.img-holder-img').src; | |
| let colorBlockVibrant = document.querySelector('.color-block-vibrant'); | |
| let colorBlock = document.querySelector('.color-block'); | |
| let vibrantColor, darkVibrantColor, lightVibrantColor; | |
| // Clone image element | |
| let clone = document.querySelector('.img-holder').cloneNode( true ); | |
| let clone2 = document.querySelector('.img-holder').cloneNode( true ); | |
| // Change the class attribute of the newly created element: | |
| clone.setAttribute( 'class', 'img-holder d-flex justify-content-center img-holder-clone' ); | |
| clone2.setAttribute( 'class', 'img-holder d-flex justify-content-start img-holder-clone2' ); | |
| // Append the newly created element to wrapper | |
| document.querySelector('.img-wrapper').appendChild( clone ); | |
| document.querySelector('.img-wrapper').appendChild( clone2 ); | |
| //console.log(imgPath); | |
| //img.setAttribute('src', imgPath); | |
| img.addEventListener('load', function () { | |
| var vibrant = new Vibrant(img); | |
| var swatches = vibrant.swatches(); | |
| for (var swatch in swatches){ | |
| //console.log(vibrant.VibrantSwatch.getRgb()); | |
| if (swatches.hasOwnProperty(swatch) && swatches[swatch]){ | |
| //console.log(swatch, swatches[swatch].getRgb()); | |
| vibrantColor = vibrant.VibrantSwatch.getRgb(); | |
| darkVibrantColor = vibrant.DarkVibrantSwatch.getRgb(); | |
| lightVibrantColor = vibrant.LightVibrantSwatch.getRgb(); | |
| colorBlockVibrant.style.backgroundColor = 'rgb('+lightVibrantColor+')'; | |
| colorBlock.style.backgroundColor = 'rgb('+vibrantColor+')'; | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vibrant.js/1.0.0/Vibrant.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .img-wrapper { | |
| width: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .color-block, | |
| .color-block-vibrant { | |
| width: 50%; | |
| height: 40%; | |
| position: absolute; | |
| top: 35%; | |
| left: 25%; | |
| transform: rotate(-20deg); | |
| //background-color: rgb(15,20,25); | |
| } | |
| .color-block-vibrant { | |
| transform: rotate(10deg); | |
| } | |
| .img-holder { | |
| z-index: 2; | |
| &:nth-of-type(odd) { | |
| z-index: 1; | |
| img { | |
| width: 80%; | |
| height: auto; | |
| margin-right: -65%; | |
| } | |
| } | |
| } | |
| .img-holder-clone2 { | |
| img { | |
| margin-left: -65%; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment