Необычный прелоадер в лавовом стиле на HTML5 + CSS3 + SVG
Отличный прелоадер с классным эффектом лавы, который выполнен на HTML5 + CSS3 + SVG
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 |
svg#mainSVG { width: 100%; height: 100%; visibility: hidden; } |
2#: HTML код, который нужно вставить на страницах вашего сайта между тегами <body> и </body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="200 150 400 300"> <defs> <g id="container" filter="url(#goo)" > <path class="seg" d="M412.9,251.7c-4.1-1.1-8.5-1.7-12.9-1.7"/> </g> <filter id="goo" color-interpolation-filters="sRGB" filterUnits="objectBoundingBox" x="-100%" y="-100%" width="250%" height="250%"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" /> <feBlend/> </filter> <radialGradient id="grad" cx="400.5176" cy="298.0287" r="125.9247" gradientUnits="userSpaceOnUse"> <stop offset="0.39" style="stop-color:#FF4F59"/> <stop offset="0.45" style="stop-color:#FFFC31"/> </radialGradient> </defs> <g id="wrapper" > <use x="20" y="20" xlink:href="#container" fill="none" stroke-width="20" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="#5B1E00" opacity="0.05" /> <use xlink:href="#container" fill="none" stroke-width="20" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="url(#grad)" /> </g> </svg> <script type="text/javascript" src="/js/gsap.min.js"></script> <script type="text/javascript"> let select = s => document.querySelector(s), selectAll = s => document.querySelectorAll(s), mainSVG = select('#mainSVG'), container = select('#container'), seg = select('.seg'), allSegs = [] gsap.set('svg', { visibility: 'visible' }) let num = 360 / 15; let duration = 0.25; allSegs.push(seg); for(var i = 1; i < (num - 8); i++) { let clone = seg.cloneNode(true); container.appendChild(clone); gsap.set(clone, { rotation: i * 15, svgOrigin: '400 300' }) allSegs.push(clone) } let mainTl = gsap.timeline({}); allSegs.forEach((item, count) => { let tl = gsap.timeline() tl.to(item, { rotation: '-=120', svgOrigin: '400 300', repeat: -1, repeatRefresh: true, ease: 'sine.inOut', repeatDelay: (num - 10) * duration }) mainTl.add(tl, count * duration) }) gsap.to(container, { duration: 1, rotation: 360, svgOrigin: '400 300', ease: 'linear', repeat: -1 }, 0) gsap.globalTimeline.timeScale(0.5) </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
