Загрузчик в виде распускающегося цветка на CSS3 и HTML5 Tree Canvas
Неплохой прелоадер в виде распускающегося цветочка
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
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 |
.flower { position: relative; transform: translate3d(0, 0, 0); } .flower .flower__center { width: 2rem; height: 2rem; border-radius: 2rem; background: #FFBB00; position: relative; z-index: 10; will-change: transform; } .flower .flower__leaves { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; will-change: transform; } .flower .flower__leaf { width: 70%; transform-origin: center bottom; position: absolute; will-change: transform; } .flower .flower__leaf .flower__leaf-inner { transform-origin: center bottom; transform: scale(0); will-change: transform; } .flower .flower__leaf svg path { fill: #fff; } |
2#: Следующий код вставьте после тега <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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <div class="flower"> <div class="flower__center"></div> <div class="flower__leaves"></div> </div> <script type="text/javascript"> const FlowerLoader = (() => { const LEAF_SVG = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23.7 51.8" style="enable-background:new 0 0 23.7 51.8;" xml:space="preserve"><path d="M11.8,0c0,0-26.6,24.1,0,51.8C38.5,24.1,11.8,0,11.8,0z"/></svg>' const Selector = { CENTER: '.flower__center', LEAF: '.flower__leaf', LEAF_INNER: '.flower__leaf-inner', LEAVES: '.flower__leaves' } const ClassName = { CENTER: 'flower__center', LEAF: 'flower__leaf' } class FlowerLoader { constructor(element) { this._element = element this._flowerLeaves = element.querySelector(Selector.LEAVES) this._numberOfLeaves = 7 this._rotation = 360 / this._numberOfLeaves this._path = [ { x: 15, y: 0}, {x: 16, y: -1}, {x: 17, y: 0}, {x: 16, y: 1}, {x: 15, y: 0} ] this._location = {x: this._path[0].x, y: this._path[0].y} this._tn1 = TweenMax.to(this._location, this._numberOfLeaves, { bezier: { curviness: 1.5, values: this._path }, ease: Linear.easeNone }); this._initialize() } _initialize() { this._addLeaves() } _addLeaves() { for (let i = 0; i < this._numberOfLeaves; i++) { const leafElement = document.createElement('div') leafElement.className = ClassName.LEAF leafElement.innerHTML = `<div class="flower__leaf-inner">${LEAF_SVG}</div>` this._tn1.time(i); TweenMax.set(leafElement, { x: this._location.x - 11, y: this._location.y - 37, rotation: ((this._rotation * i ) - 90), }) this._flowerLeaves.appendChild(leafElement) } this._animate() } _animate() { const leaves = this._flowerLeaves.querySelectorAll(Selector.LEAF_INNER) const center = this._element.querySelector(Selector.CENTER) const timeline = new TimelineMax({ onComplete: () => { timeline.restart(true) } }) timeline .add( TweenMax.fromTo(center, 1, { scale: 0 }, { scale: 1, ease: Elastic.easeOut.config(1.1, .75) }), 0 ) .add( TweenMax.staggerTo(leaves, 1, { scale: 1, ease: Elastic.easeOut.config(1.1, .75) }, .2), 0.3 ) .add( TweenMax.to(leaves, 0.3, { scale: 1.25, ease: Elastic.easeOut.config(1.5, 1) }) ) .add( TweenMax.to(this._element.querySelector(Selector.LEAVES), 1, { duration: 1.5, rotation: 360, ease: Expo.easeInOut }), 1.7 ) .add( TweenMax.to(leaves, 0.5, { scale: 0, ease: Elastic.easeInOut.config(1.1, 0.75) }) ) .add( TweenMax.to(center, 0.5, { scale: 0, ease: Elastic.easeInOut.config(1.1, 0.75) }), '-=0.37' ) } } return new FlowerLoader(document.body.querySelector('.flower')) })() </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
