If you are into photography and want to showcase nature and the planet’s beauty to the viewers, you can surely use this one. The images are kept inside a blob structure which goes on and on. The gooey animation of the blob looks so beautiful. In a dark background, the floating blobs look amazing and you can surely replace the images with your own thought.
HTML
|
CSS
h1 { margin: 0; font-size: calc(2vw + 20px); position: absolute; left: 10%; transform: translateZ(0.1px) scale(1.2); font-family: Rubik; color: #b5ae84; opacity: 0.5; } h1.clone { left: 60%; } body { background: #181818; color: white; font-size: 200%; } .defilee__main { position: relative; margin: 0 auto; } .defilee__outer { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; perspective: 0.5px; transform-style: preserve-3d; overflow-x: hidden; } .defilee__main, .defilee__main *, .defilee__outer, .defilee__outer * { box-sizing: border-box; } .defilee__ctnr { transform-style: preserve-3d; display: inline-flex; align-items: center; margin: 0 auto; } .defilee__div { position: relative; transform: translate3d(0, -16vh, 0); width: 25vw; margin: 0 -2vw; } .defilee__div--special { transform: translateZ(-0.2px) scale(1.4) translateX(30px) translateY(20vh); } .defilee__div--special1 { transform: translateZ(-0.25px) scale(1.4) translateX(-0.3vw) translateY(0); } .defilee__div--special2 { transform: translateZ(0.2px) scale(1) translateX(0.5vw) translateY(-25vh); } .defilee__div--special3 { transform: translateZ(-0.5px) scale(1.5) translateX(-30px) translateY(-30vh); } .defilee__div--special4 { transform: translateZ(-0.65px) scale(3) translateX(30px) translateY(-10vh); } .defilee__ctnr { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } .defilee__ctnr { animation: slide 30s linear infinite; } @keyframes slide { 100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } * { transform-origin: 50% 50%; } .defilee-visually-hidden { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } |
JS
anime({ targets: '.anime', d: [ { value: (el) => el.getAttribute('data-morph-to'), duration: (el, i) => 2000}, { value: (el) => el.getAttribute('d'), duration: (el, i,l) => 2000 } ], loop: true, easing: 'linear', update: () => { const el = document.getElementById('defs'); el.style.display = 'none'; el.offsetWidth; el.style.display = 'block'; } }) class Defilee { constructor (element) { if (!element) { return } this.element = element this._name = "defilee"; this._itemSelector = "." + this._itemClass } init () { this.addLoop(); } addLoop () { const parent = this.element; Array.prototype.slice.call(this.element.children).reverse().forEach ( (el) => { const clone = el.cloneNode(true); clone.classList.add('clone'); parent.insertBefore(clone, parent.firstChild ); }) } } const defilee = new Defilee(document.getElementById('defilee')); defilee.init(); |
See live demo and download source code.
|
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by pehaa. Visit their official repository for more information and follow for future updates.
