Ответы пользователя по тегу CSS
  • Как сделать эффект выплывания информации?

    powerdot
    @powerdot
    Ведущий программист
    Да, я бы реализовал это через CSS (и чуть через jQuery).

    Вам нужно два стиля:
    дефолтный (изначальный)
    и измененный - как объект должен выглядеть после деформации

    Засучите рукова, нам понадобится jQuery (библиотека для JS), CSS и немного HTML.

    Структура такого блока примерно следующая:
    <!-- Подключаем jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    
    <!-- Прописываем стили -->
    <style type="text/css" media="screen">
    	/* это сам блок, в котором все хранится */
    	.block{ 
    		background: black;
    		height: 300px;
    		width: 250px;
    		overflow: hidden;
    	}
    	
    	/* это золотой блок со всем текстом */
    	.text{
    		background: gold;
    		position: relative;
    		padding: 15px;
    		font-size: 14pt;
    		height: 100%;
    		margin-top: 100%;
    		cursor: pointer;
    		transition: 0.5s margin-top; /* это свойство анимации 0.5s - это время, margin-top - что анимируем */
    	}
    	/* класс .show меняет margin-top со 100% до 0 - то есть поднимает блок вверх */
    	.text.show{margin-top: 0;}
    	
    	/* это часть золотого текста - в нем хранится остальной текст */
    	.more_text{
    		margin-top: 25px;
    		font-size: 11pt;
    	}
    </style>
    
    
    <!-- Наш HTML -->
    <div class='block'>
        <div class='text'>Здесь текст<div class='more_text'>Здесь больше текста...</div></div>
    </div>
    
    
    
    <script>
    	//При нажатии на .text - на "нем переключается" класс .show, который регулирует уровень блока margin-top'ом
    	$('.text').click(function(){
    		$(this).toggleClass('show');
    	});
    </script>
    Ответ написан