15

Наткнулся на сайте Хоббита на такой прелестный эффект, который я обычно встречал в играх.

Есть два блока, левый и правый (добро и зло):

введите сюда описание изображения

При наведении на один из этих блоков создается внутри огненное кольцо:

введите сюда описание изображения

введите сюда описание изображения

Стало очень интересно как достичь этого эффекта.

.wrapper {
  height:20px;
  width:20px;
}
<div class="wrapper">
  <img src="https://image.ibb.co/gapib8/good_icon.png">
</div>

<img src="https://image.ibb.co/eJCQpT/fire_ring.png">

7
  • там это картинка обычная, которая скорее всего просто копируется в канвас
    – ThisMan
    30 июл 2018 в 10:07
  • @ThisMan картинка копируетсья в canvas O.o?
    – Randall
    30 июл 2018 в 10:07
  • 3
    простите за оффтоп, но зачем мягкие знаки перед каждой буквой Я?
    – Anatol
    30 июл 2018 в 10:15
  • @Demon__ANT да нет проблем
    – Anatol
    30 июл 2018 в 10:18
  • > картинка копируетсья в canvas Ну а почему бы нет? developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/…
    – ThisMan
    30 июл 2018 в 10:27

5 ответов 5

20
+50

Лучше всего использовать для таких задач спрайты, как в данном случае:
P.S. Пример не совсем совпадает с реальным:D

const $d = document;
const canvas = $d.getElementById("canvas"),
  ctx = canvas.getContext("2d");
let main = $d.querySelector(".main");

function init() {
  let fire = new Image();
  fire.src =
    "https://image.ibb.co/gcaWJz/image.png";
  let w = fire.width,
    h = fire.height,
    srcW = fire.width / 4,
    srcH = fire.height / 7,
    srcX = 0,
    srcY = 0,
    flag = 0,
    currFrame = 0;

  main.onmouseenter = () => {
    const interval = setInterval(() => {
      ++currFrame;
      if (currFrame == 3) {
        currFrame = 0;
        srcX = 0;
        flag += 1;
        srcY = srcH * flag;
        if (flag == 5) {
          srcY = 0;
          flag = 0;
          ctx.clearRect(0, 0, w, h);
          clearInterval(interval);
        }
      } else {
        srcX = currFrame * srcW;
        ctx.drawImage(fire, -srcX, -srcY, w, h);
      }
    }, 45);
  };
  main.onmouseleave = () => {
    ctx.clearRect(0, 0, w, h);
  };
}

//init
init();
$d.body.onload = init;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
}

img {
  width: 100%;
}

h2 {
  text-transform: uppercase;
  margin: 2.5rem;
  color: #E25822; /*flame color*/
  text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.9);
}

.main {
  font-size: 0;
  position: relative;
  width: 9.375rem;
  height: 9.375rem;
  cursor: pointer;
}

.main:hover .effect img {
  transition-delay: 500ms;
  opacity: 1;
}

.effect img {
  position: absolute;
  top: -0.0625rem;
  left: 0;
  transition: opacity 300ms;
  animation-name: rotation;
  animation-duration: 30000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

.effect canvas {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg) scale(0.9);
    transform: rotate(0deg) scale(0.9);
  }
  to {
    -webkit-transform: rotate(360deg) scale(0.9);
    transform: rotate(360deg) scale(0.9);
  }
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h2>hover</h2>
<div class="main">
  <img src="https://image.ibb.co/gapib8/good_icon.png" alt="eagle">
  <div class="effect">
    <img src="https://image.ibb.co/eJCQpT/fire_ring.png" alt="fire">
    <canvas id="canvas" width="275" height="275"></canvas>
  </div>
</div>

5
  • @Demon__ANT, обращайся=)
    – Arthur
    2 авг 2018 в 16:45
  • @Alexandr_TT, JS творит чудеса))
    – Arthur
    4 авг 2018 в 15:16
  • @Arthur а никто и не сомневался в этом :=) 4 авг 2018 в 15:18
  • 1
    Очень красиво выглядит! Если бы ещё bg-картинку огня (т.н. sprites) заменить программным кодом, то вообще бы цены бы не было!
    – Bharatha
    10 авг 2018 в 9:55
  • @Bharata, не поспоришь, это был самый лёгкий вариант решения данной задачи
    – Arthur
    10 авг 2018 в 9:58
19

.good {
  height:200px;
  width:200px;
  background-image: url(https://image.ibb.co/gapib8/good_icon.png);
  background-size:cover;
  box-sizing:border-box;
  padding:10px;
}
.good .ring {
  overflow:hidden;

  transition: 1s opacity;
  transition-timing-function:easeInOut;
  opacity:0;
  height:100%;
  width:100%;
  background-image: url(https://image.ibb.co/eJCQpT/fire_ring.png);
  background-repeat:no-repeat;
  background-size:cover;


}
.good:hover .ring {
  opacity:1;

}
<div class="good">
  <div class="ring">

  </div>
</div>

1
  • почти ...лови плюсик
    – Randall
    30 июл 2018 в 11:36
13

Колечко из огня с эффектом заполнения сделанное при помощи фрагментного шейдера.

введите сюда описание изображения

<img src="https://image.ibb.co/gapib8/good_icon.png">
<div class="zone"></div>
<canvas width="335" height="335" id="canvas"/>
<script type="glsl">
    
precision highp float;
uniform float time;      // время - источник анимации
uniform vec2 resolution; // разрешение
uniform float fill;      // процент заполнения (0-1)

// палитра огня
vec3 firePalette(float i) {
    float T = 1400. + 1300.*i; 
    vec3 L = vec3(7.4, 5.6, 4.4); 
    L = pow(L,vec3(5.0)) * (exp(1.43876719683e5/(T*L))-1.0);
    return 1.0-exp(-5e8/L); 
}    

// эта функция - источник шума, хоть и псевдо случайного    
vec3 hash33(vec3 p) { 
    float n = sin(dot(p, vec3(7, 157, 113)));    
    return fract(vec3(2097152, 262144, 32768)*n); 
}

// построение разбиения вороного на gpu, подсмотрено у inigo quilez 
// https://www.iquilezles.org/www/articles/voronoilines/voronoilines.htm
float voronoi(vec3 p) {
	vec3 b, r, g = floor(p);
	p = fract(p); 
	float d = 1.; 
	for(int j = -1; j <= 1; j++) {
	    for(int i = -1; i <= 1; i++) {
		    b = vec3(i, j, -1);
		    r = b - p + hash33(g+b);
		    d = min(d, dot(r,r));
		    b.z = 0.0;
		    r = b - p + hash33(g+b);
		    d = min(d, dot(r,r));
		    b.z = 1.;
		    r = b - p + hash33(g+b);
		    d = min(d, dot(r,r));	
	    }
	}
	return d;
}

// Итеративно накладываем друг на друга диаграммы Вороного.
// этот алгоритм называют Fractional Brownian Motion (FBM), в оригинале
// это итеративная сумма шумов Перлина с увеличивающейся на каждой итерации
// частотой и уменьшающейся амплитудой, по сути является фрактальным 
// алгоритмом, часто используется для того чтобы нарисовать нечто природное
// вроде воды, огня, гор или облаков.
// https://www.iquilezles.org/www/articles/warp/warp.htm
float noiseLayers(in vec3 p) {
    vec3 t = vec3(0., 0., p.z+time*1.5); // третьей координатой будет время
    const int iter = 5; 
    float tot = 0., sum = 0., amp = 1.; 
    for (int i = 0; i < iter; i++) {
        tot += voronoi(p + t) * amp; 
        p *= 2.0; // увеличиваем амплитуду в 2 раза
        t *= 1.5; // время тоже увеличиваем, но чуть меньше, так кажется что слои имеют объем
        sum += amp; 
        amp *= 0.5; // уменьшаем в 2 раза амплитуду
    }
    return tot/sum; 
}
    
// функция дистанции до сектора круга, используется для плавного заполнения
float sdPie( in vec2 p, in vec2 c, in float r ) {
    p.x = abs(p.x);
    float l = length(p) - r;
	float m = length(p - c*clamp(dot(p,c),0.0,r) );
    return max(l,m*sign(c.y*p.x-c.x*p.y));
}
    
void main(void) {
    // процент заполнения
    float f = (1.-fill)*3.1415;

    // текстурные координаты сдвигаем так чтобы 0 был в центре
    // так легче считать
    vec2 uv = (gl_FragCoord.xy - resolution.xy*0.5)/ resolution.y;

    // вращаем текстурные координаты  
    float cs = cos(f-time/4.), si = sin(f-time/4.);
    uv.xy *= mat2(cs, -si, si, cs); 

    // луч который пропускается через fbm*voronoi для получения текстуры огня
    vec3 rd = normalize(vec3(uv.x, uv.y, 3.1415/8.));

    // эффект огня, но пока еще белый
    float c = noiseLayers(rd*2.); 
   
    // градиент от центра
    float d = dot(uv, uv);

    // переменная толщина кольца, в зависимости от времени
    float ts = 0.105 + sin(time)*0.001;

    // этот коэффициент будет 1 там где кольцо и 0 для остальных пикселей, 
    // но с плавным переходом от 0 до 1 за счет smoothstep
    float ring = 1. - min(smoothstep(d, 0.11, ts), smoothstep(d, ts, 0.11));

    // "умножаем" огонь на кольцо и получаем кол
    vec3 col = sqrt(clamp((firePalette(c*ring)-0.03)*1.5, 0., 1.));

    // умножаем кольцо огня, на дистанцию до сектора, 
    // только если кольцо не полностью заполнено,
    // сектор растет при наведении мыши
    if (fill<1.)
      col *= sdPie(uv,vec2(sin(f+0.001),cos(f+0.001)), 0.5)*3.1;

    // все пиксели кроме кольца - прозрачные
    gl_FragColor = vec4(col, ring);  
}
</script>

<script>
let gl = canvas.getContext('webgl');
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,3,-1,-1,3,-1]), gl.STATIC_DRAW);

let pid = gl.createProgram();
shader(`attribute vec2 v;void main(void){gl_Position=vec4(v,0.,1.);}`,gl.VERTEX_SHADER);
shader(document.querySelector(`script[type="glsl"]`).textContent,gl.FRAGMENT_SHADER);
gl.linkProgram(pid);
gl.useProgram(pid);

let v = gl.getAttribLocation(pid, "v");
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(v);

let resolution = gl.getUniformLocation(pid, 'resolution');
let time = gl.getUniformLocation(pid, 'time');
let fill = gl.getUniformLocation(pid, 'fill');
requestAnimationFrame(draw);

function draw(t) {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 0, 0, 0);
  gl.uniform1f(time, t/1000);
  gl.uniform1f(fill, getComputedStyle(canvas).opacity);
  gl.uniform2f(resolution, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(draw);
}

function shader(src, type) {
  let sid = gl.createShader(type);
  gl.shaderSource(sid, src);
  gl.compileShader(sid);
  var message = gl.getShaderInfoLog(sid);
  gl.attachShader(pid, sid);
  if (message.length > 0) {
    console.log(src.split("\n").map((str, i) => (""+(1+i)).padStart(4, "0")+": "+str).join("\n"));
    throw message;
  }
}
</script>

<style>
canvas {
  position: absolute;
  top: -29px;
  pointer-events: none;
  left: -26px;
  opacity: 0;
  transition: 1s;
}

.zone {
  position: absolute;
  top: 16px;
  left: 19px;
  border-radius: 50%;
  width: 245px;
  height: 245px;
}

div.zone:hover + canvas{
  opacity: 1;
}
</style>

PS: самая актуальная версия тут

PPS: если из шейдера убрать множители на sdf колечка, то будет хорошо видно как устроен огонь.

8
  • Я смотрю, Вы конкретно подсели на GLSL) Почти в каждом подобном вопросе наблюдаю от Вас интересное решение с использованием данной технологии) 15 июн 2019 в 19:35
  • @Kir_Antipov ну да, компьютерная графика меня очень даже интересует и я не упускаю возможностей практиковаться, да и надеюсь кого-то еще зацепит, как меня когда-то, и да GLSL это язык, технология - WebGL 15 июн 2019 в 19:41
  • @StrangerintheQ ну проста нет слов.Божественно как всегда.А я думал про мои интересные вопросы уже все подзабыли =( ..Спасибо большое и конечно лайк с меня )
    – Randall
    16 июн 2019 в 13:38
  • @StrangerintheQ кстати а есть курсы по GLSL?
    – Randall
    16 июн 2019 в 13:40
  • 1
    @Demon__ANT спасибо за подсказку, вечером потружусь 26 авг 2019 в 12:49
6

Как вариант, реализация появления можно сделать на спрайте.. Но над спрайтом надо будет заморочиться.
Увы, я не умею рисовать, по этому просто поделил картинку на сегменты, по этому это не очень "красочно" выглядит, но имеет право на жизнь)

.hover {
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
}

.hover img {
  display: block;
  width: 200px;
  height: 200px;
}

.hover::before, .hover::after {
  content: '';
  display: block;
  width: 184px;
  height: 184px;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}

.hover::before {
  background: url('https://i.stack.imgur.com/Td8GG.png') no-repeat left center / calc(100% * 8) 100%;
}

.hover::after {
  background: url('https://image.ibb.co/eJCQpT/fire_ring.png') no-repeat center center / 100%;
}

.hover:hover::before {
  opacity: 1;
  animation: effect .2s steps(7, end) forwards;
  transition: opacity .1s linear;
}

.hover:hover::after {
  animation: effect_rotate 3s .2s linear infinite;
}

@keyframes effect {
  0% {background-position: 0 center;}
  100% {background-position: 100% center;}
}

@keyframes effect_rotate {
  0% {opacity: .25; transform: rotate(0deg);}
  50% {opacity: .5; transform: rotate(180deg);}
  100% {opacity: .25; transform: rotate(360deg);}
}
<div class="hover">
  <img src="https://image.ibb.co/gapib8/good_icon.png">
</div>

P.s.

Не знаю как выглядит это на сайте-примере, ибо ссылка битая, по этому с "оригиналом" думаю не совпадает.

2
  • чутка еще по колдовать и будет незаметно дискретности 15 июн 2019 в 20:39
  • хороший ответ лови лайк)
    – Randall
    16 июн 2019 в 13:38
3

Самый простой вариант - просто анимировать opacity:

img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
.coin { height: 100vmin; }
.ring { height: 90vmin; top: -1vmin; right: -1vmin; }

.ring {
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s linear;
}

.coin:hover + .ring {
  opacity: 1;
}
<img class="coin" src="//i.stack.imgur.com/opvf2.png">
<img class="ring" src="//i.stack.imgur.com/gyaIt.png">

3
  • 1
    Лучше поздно, чем никогда)
    – Arthur
    27 мая 2020 в 19:36
  • 1
    @Arthur, я хотел ещё перспективу или border-image, но что-то не взлетают.
    – Qwertiy
    27 мая 2020 в 20:12
  • @Qwertiy не плохо
    – Randall
    27 мая 2020 в 20:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.