#javascript #jquery #svg
Ползунок слайдера при перетаскивании заполняется цветом. Изменяется элемент path в свгМожно ли как-то сделать, что бы заполнение срабатывало не резко, в момент достижения определенного значения (как сейчас), а плавно заливалось в процессе движения ползунка? https://codepen.io/Raneto4ka/pen/WBzPRP var step = 100; $(".slider").each(function() { var self = $(this); var slider = self.slider({ create: function() { self.find('.text strong').text(self.slider('value')); setPathData(self.find('.heart').find('svg path#anim'), self.slider('value')); }, slide: function(event, ui) { self.find('.text strong').text(ui.value); setPathData(self.find('.heart').find('svg path#anim'), ui.value); }, range: 'min', min: 1, max: step, value: 1, step: 1 }); }); function setPathData(path, value) { if(value<=25){ path.attr('d', 'M16 32C16 32 22.7034 32.9409 26 31.0001C29.2193 29.1048 35.3073 28 38 28.0001C40.6533 28.0001 41.3463 28.0001 41.5 28.0001L41.5 28.0001C41.5 28.0001 41.5875 28.0001 41.5 28.0001L27 40L16 32Z'); } else if(value>=26&value<50){ path.attr('d', 'M28.0089 26.0866C35.0089 30.5866 41.0089 28 41.0089 28L27.0089 40.0866L10.0089 25.0866C10.0089 25.0866 10.5362 23.6339 16.0089 23.0866C21.0089 22.5866 25.2909 24.3394 28.0089 26.0866Z'); } else if(value>=50&value<75){ path.attr('d', 'M17.0178 23H9.51778L14.0178 28.5L27.0178 40L43.5178 25.5L47.0178 15C47.0178 15 37.0178 11.5 30.0178 17.9999C25.3256 22.3569 21.0489 23 17.0178 23Z'); } else if(value>=75&value<100){ path.attr('d', 'M28.0266 16.5C35.0266 21 47.0266 18.4134 47.0266 18.4134L39.0266 31L27.0266 40.0866L10.0266 25L7.02661 15.5C7.02661 15.5 10.5539 14.0473 16.0266 13.5C21.0266 13 25.3087 14.7527 28.0266 16.5Z'); } else if(value=100){ path.attr('d', 'M27.4352 37.6488C27.2888 37.7296 27.1594 37.8001 27.0482 37.86C26.9311 37.7924 26.7934 37.7122 26.6368 37.6199C26.0724 37.2871 25.2635 36.7971 24.2917 36.1717C22.346 34.9195 19.757 33.1306 17.1729 30.9796C14.5842 28.8248 12.0296 26.3305 10.1294 23.6724C8.22332 21.006 7.03544 18.2587 7.03552 15.5768C7.03561 12.5629 8.03746 9.92065 9.77585 8.04143C11.5062 6.17089 14.0168 5 17.1619 5C19.906 5 22.1573 6.22531 23.7579 7.50499C24.5542 8.14164 25.1733 8.77934 25.5917 9.25618C25.8004 9.49405 25.9578 9.69032 26.061 9.82426C26.1126 9.89119 26.1505 9.9424 26.1745 9.9753C26.1865 9.99175 26.1949 10.0036 26.1998 10.0105L26.2039 10.0162L26.2043 10.0168L26.2045 10.0172L26.2049 10.0177L26.9395 11.0812L27.7837 10.1013L27.7838 10.1012L27.784 10.1009L27.7843 10.1005L27.7847 10.1001L27.7918 10.092C27.7988 10.0841 27.8101 10.0712 27.8257 10.0537C27.857 10.0188 27.9054 9.96549 27.9699 9.8964C28.0991 9.75814 28.2925 9.5572 28.5428 9.31445C29.0443 8.82792 29.7685 8.17902 30.6553 7.53166C32.4537 6.21897 34.8018 5.00001 37.2605 5.00001C40.6891 5.00001 43.1265 5.88657 44.6934 7.53133C46.264 9.18 47.1319 11.7702 47.027 15.549C46.9446 18.5199 45.6951 21.4117 43.7787 24.1171C41.8639 26.8201 39.324 29.279 36.7628 31.365C34.2055 33.4478 31.6543 35.137 29.7399 36.3062C28.7838 36.8902 27.989 37.343 27.4352 37.6488Z'); } } .slider { width: 320px; height: 2px; background: rgba(0, 0, 0, 0.2); border-radius: 2px; position: relative; } .slider .ui-slider-range { border-radius: 2px; background: #fff500; position: absolute; left: 0; top: 0; bottom: 0; } .slider .ui-slider-handle { cursor: move; cursor: grab; cursor: -webkit-grab; width: 35px; height: 35px; position: absolute; outline: none; top: 0; z-index: 1; transition: box-shadow .3s ease; opacity: 1; -webkit-transform: translate(-50%, -12px); transform: translate(-50%, -12px); } .slider .ui-slider-handle.heart svg { position: absolute; left: 50%; bottom: 0px; margin: 0 0 0 -10px; } .slider .ui-slider-handle.heart svg path { stroke-width: 2; stroke: #58CFEF; stroke-linecap: round; } .slider .ui-slider-handle.ui-state-active { cursor: grabbing; cursor: -webkit-grabbing; } .slider .text { position: absolute; bottom: 100%; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 16px; -webkit-transform: translate(0, -80px); transform: translate(0, -80px); transition: -webkit-transform .3s ease 0s; transition: transform .3s ease 0s; transition: transform .3s ease 0s, -webkit-transform .3s ease 0s; } .slider .text strong { color: #000; font-weight: bold; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; font-family: Roboto, Arial; color: #ADAFB6; display: flex; justify-content: center; align-items: center; background: #fff; }
Ответы
Ответ 1
Предлагаю такой вариант: плавно поднимаем синусоиду, которая обрезана при помощи clip-path и шевелим её влево-вправо в зависимости от синуса значения... var step = 100; $(".slider").each(function() { var self = $(this); var slider = self.slider({ create: function() { self.find('.text strong').text(self.slider('value')); setPathData(self.find('.heart').find('svg path#anim'), self.slider('value')); }, slide: function(event, ui) { self.find('.text strong').text(ui.value); setPathData(self.find('.heart').find('svg path#anim'), ui.value); }, range: 'min', min: 1, max: step, value: 1, step: 1 }); }); function setPathData(path, value) { path.attr('transform', `translate(${Math.sin(value/10)*10-15},${30-value/3})`) $('#heart').attr('transform', `translate(${15-Math.sin(value/10)*10},${-30+value/3})`) } .slider { width: 320px; height: 2px; background: rgba(0, 0, 0, 0.2); border-radius: 2px; position: relative; } .slider .ui-slider-range { border-radius: 2px; background: #fff500; position: absolute; left: 0; top: 0; bottom: 0; } .slider .ui-slider-handle { cursor: move; cursor: grab; cursor: -webkit-grab; width: 35px; height: 35px; position: absolute; outline: none; top: 0; z-index: 1; transition: box-shadow .3s ease; opacity: 1; -webkit-transform: translate(-50%, -12px); transform: translate(-50%, -12px); } .slider .ui-slider-handle.heart svg { position: absolute; left: 50%; bottom: 0px; margin: 0 0 0 -10px; } .slider .ui-slider-handle.heart svg path { stroke-width: 2; stroke: #58CFEF; stroke-linecap: round; } .slider .ui-slider-handle.ui-state-active { cursor: grabbing; cursor: -webkit-grabbing; } .slider .text { position: absolute; bottom: 100%; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 16px; -webkit-transform: translate(0, -80px); transform: translate(0, -80px); transition: -webkit-transform .3s ease 0s; transition: transform .3s ease 0s; transition: transform .3s ease 0s, -webkit-transform .3s ease 0s; } .slider .text strong { color: #000; font-weight: bold; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; font-family: Roboto, Arial; color: #ADAFB6; display: flex; justify-content: center; align-items: center; background: #fff; }
Комментариев нет:
Отправить комментарий