Ответы пользователя по тегу JavaScript
  • Как обратиться к after, before через js?

    Смотря что ты хочешь сделать. Стилями можно управлять, если немного пошевелиться.

    https://codepen.io/kris-iris/pen/MPJjgo

    let wrap = document.querySelector('.wrap');
    
    wrap.onclick = ()=> wrap.classList.toggle('noMagic');


    .wrap{
      position: relative;
      width: 500px;
      height: 200px;
      background: lightblue;
      margin: 0 auto;
    }
    
    .wrap::before{
      position: absolute;
      content: 'Кликни на меня, детка!';
      height: 50px;
      width: 100%;
      background: lightgreen;
      transition: 2s;
    }
    
    .noMagic.wrap::before{
      content: 'А ты молодец!';
      display: flex;
      justify-content: center;
      align-items: center;
      animation: move 1s forwards;
    }
    
    @keyFrames move{
      100% {
        height: 100%;
      }
    }
    Ответ написан
    7 комментариев
  • Как сделать такой всплывающий текст?

    Да хотя бы вот так. https://codepen.io/kris-iris/pen/YJGJJL

    А вот тебе с их сайта код поковырять
    function first_open_menu(){
    	// heigt menu_block_content
    	if( menu_block_content_height_first_load == 1){
    
    		// calculate size crop block content height
    		menu_block_heading_height = menu_block_heading.getBoundingClientRect().height;
    		menu_block_content_height_first_load = 0;
    
    		// crop block content height
    		for(i=0; i < menu_block_content.length; i++){
    			menu_block_content_height[i] = menu_block_content[i].getBoundingClientRect().height;
    			menu_block_content[i].style.height = menu_block_heading_height + 'px';
    		}
    	}
    }
    
    
    // hover effects menu block
    menu_block_1.addEventListener('mouseover', menu_block_1_mouseover);
    menu_block_1.addEventListener('mouseout', menu_block_1_mouseout);
    
    menu_block_2.addEventListener('mouseover', menu_block_2_mouseover);
    menu_block_2.addEventListener('mouseout', menu_block_2_mouseout);
    
    menu_block_3.addEventListener('mouseover', menu_block_3_mouseover);
    menu_block_3.addEventListener('mouseout', menu_block_3_mouseout);
    
    menu_block_4.addEventListener('mouseover', menu_block_4_mouseover);
    menu_block_4.addEventListener('mouseout', menu_block_4_mouseout);
    
    function menu_block_1_mouseover(event){ if(stop_function_desktop == 0) return;  menu_block_content[0].style.height = menu_block_content_height[0] + 'px'; }
    function menu_block_1_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[0].style.height = menu_block_heading_height + 'px'; }
    
    function menu_block_2_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[1].style.height = menu_block_content_height[1] + 'px'; }
    function menu_block_2_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[1].style.height = menu_block_heading_height + 'px'; }
    
    function menu_block_3_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[2].style.height = menu_block_content_height[2] + 'px'; }
    function menu_block_3_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[2].style.height = menu_block_heading_height + 'px'; }
    
    function menu_block_4_mouseover(event){ if(stop_function_desktop == 0) return; menu_block_content[3].style.height = menu_block_content_height[3] + 'px'; }
    function menu_block_4_mouseout(event){ if(stop_function_desktop == 0) return; menu_block_content[3].style.height = menu_block_heading_height + 'px'; }
    Ответ написан
  • Как работает контекст вызова функций? И почему так?

    KrisIris
    @KrisIris Автор вопроса
    Вот нашла хороший, на мой взгляд, ответ. Как раз для таких вопросов!))))
    Ответ написан
    Комментировать
  • Почему в мозилле не отображается анимация?

    KrisIris
    @KrisIris Автор вопроса
    Мозила не понимает 2 анимации в одной.
    Попробуйте обьеденить свойства примерно так:
    animation: flicker 3ms ease-in infinite, sky2 3s linear 1;
    Либо оберните огонь в еще один div и применяйте 2 анимации на 2 разных обьекта
    Ответ написан
  • Почему анимированное с помощью css изображение некорректно отображается в Мозилле?

    KrisIris
    @KrisIris Автор вопроса
    Мозила не понимает 2 анимации в одной.
    Попробуйте обьеденить свойства примерно так:
    animation: flicker 3ms ease-in infinite, sky2 3s linear 1;
    Либо оберните огонь в еще один div и применяйте 2 анимации на 2 разных обьекта
    Ответ написан
    Комментировать