Chọn một file
CSS
.bottom-wave { position: absolute; bottom: -2px; width: 100%; .waves { position: relative; width: 100%; height: 5vh; margin-bottom: -7px; /*Fix for safari gap*/ min-height: 60px; max-height: 150px; .parallax > use { animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 10s; } .parallax > use:nth-child(2) { animation-delay: -5s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -7s; animation-duration: 10s; } .parallax > use:nth-child(4) { animation-delay: -1s; animation-duration: 10s; } } } /_ Animation for bottom-wave _/ @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
CSS
.bottom-wave { position: absolute; bottom: -2px; width: 100%; .waves { position: relative; width: 100%; height: 5vh; margin-bottom: -7px; /*Fix for safari gap*/ min-height: 60px; max-height: 150px; .parallax > use { animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 10s; } .parallax > use:nth-child(2) { animation-delay: -5s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -7s; animation-duration: 10s; } .parallax > use:nth-child(4) { animation-delay: -1s; animation-duration: 10s; } } } /_ Animation for bottom-wave _/ @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
HTML
<div class="bottom-wave"> <svg class="waves" preserveAspectRatio="none" shape-rendering="auto" viewBox="0 24 150 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <path d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" id="gentle-wave" ></path> </defs> <g class="parallax"> - <use fill="rgba(255, 0, 255, 0.1)" x="48" xlinkHref="#gentle-wave" y="0"></use> - <use fill="rgba(255, 0, 255, 0.05)" x="48" xlinkHref="#gentle-wave" y="3"></use> - <use fill="rgba(255, 0, 255, 0.01)" x="48" xlinkHref="#gentle-wave" y="5"></use> - <use fill="rgba(255, 0, 255, 0.005)" x="48" xlinkHref="#gentle-wave" y="7"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 0) }}" x="48" xlink:href="#gentle-wave" y="0"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 1) }}" x="48" xlink:href="#gentle-wave" y="3"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 2) }}" x="48" xlink:href="#gentle-wave" y="5"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 3) }}" x="48" xlink:href="#gentle-wave" y="7"></use> </g> </svg> </div>
HTML
<div class="bottom-wave"> <svg class="waves" preserveAspectRatio="none" shape-rendering="auto" viewBox="0 24 150 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <path d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" id="gentle-wave" ></path> </defs> <g class="parallax"> - <use fill="rgba(255, 0, 255, 0.1)" x="48" xlinkHref="#gentle-wave" y="0"></use> - <use fill="rgba(255, 0, 255, 0.05)" x="48" xlinkHref="#gentle-wave" y="3"></use> - <use fill="rgba(255, 0, 255, 0.01)" x="48" xlinkHref="#gentle-wave" y="5"></use> - <use fill="rgba(255, 0, 255, 0.005)" x="48" xlinkHref="#gentle-wave" y="7"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 0) }}" x="48" xlink:href="#gentle-wave" y="0"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 1) }}" x="48" xlink:href="#gentle-wave" y="3"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 2) }}" x="48" xlink:href="#gentle-wave" y="5"></use> + <use fill="{{ post.title | getRandomColor(loop.index0, 3) }}" x="48" xlink:href="#gentle-wave" y="7"></use> </g> </svg> </div>
JS
// Get random colors (from a predefined set) for bottom-wave in blog cards eleventyConfig.addFilter('getRandomColor', function (name, _postIdx, idx) { // Get the same number for each name -> colors are fixed for each name function getHash(input, numColors) { var hash = 0, len = input.length for (var i = 0; i < len; i++) { hash = (hash << 5) - hash + input.charCodeAt(i) hash |= 0 // to 32bit integer } return Math.abs(hash) % numColors } const color = waveColors[getHash(name, waveColors.length)] // Based on index -> new posts make old posts' colors change // function getHash(input, numColors) { // return input % numColors; // } // const color = waveColors[getHash(_postIdx, waveColors.length)]; switch (idx) { case 0: return `rgba(${color}, 0.1)` case 1: return `rgba(${color}, 0.05)` case 2: return `rgba(${color}, 0.01)` case 3: return `rgba(${color}, 0.005)` } })
JS
// Get random colors (from a predefined set) for bottom-wave in blog cards eleventyConfig.addFilter('getRandomColor', function (name, _postIdx, idx) { // Get the same number for each name -> colors are fixed for each name function getHash(input, numColors) { var hash = 0, len = input.length for (var i = 0; i < len; i++) { hash = (hash << 5) - hash + input.charCodeAt(i) hash |= 0 // to 32bit integer } return Math.abs(hash) % numColors } const color = waveColors[getHash(name, waveColors.length)] // Based on index -> new posts make old posts' colors change // function getHash(input, numColors) { // return input % numColors; // } // const color = waveColors[getHash(_postIdx, waveColors.length)]; switch (idx) { case 0: return `rgba(${color}, 0.1)` case 1: return `rgba(${color}, 0.05)` case 2: return `rgba(${color}, 0.01)` case 3: return `rgba(${color}, 0.005)` } })