Анимация наполнения карты контентом

207
27 декабря 2017, 19:31

У меня есть файл *.jpg карты России с Википедии и svg файл границы России

но при скачивании этого файла изображения городов отсутствует.

Но вопрос не в этом. Хочется сделать векторное изображение карты России с интерактивным появлением на карте городов с аэропортами и городов с морскими портами.
Анимация появления на карте городов может быть реализована с любой техникой css, smil, canwas, Web Animations. Отдам предпочтение ответам без использования анимации opacity, необходима динамика, движение.

Answer 1

Для размещения на карте символов аэропортов с городами вместо привычного использования иконок можно использовать Юникоды.

Преимущества этого метода:

  • Символы Юникодов в отличии от иконок масштабируются
  • Простота добавления в svg и HTML форматы.

В svg достаточно добавить код символа в тег <text>

<svg width="100%" height="100%" viewBox="0 0 50 50"> 
<text x="10" y="10" font-size="12" fill="purple">&#9992; </text> 
</svg>

  • Символы юникода стилизуются без проблем, как внутренними стилями представления, так и правилами из внешней таблицы CSS.
  • Анимация не представляет проблем, так как это по сути текст, а в SVG есть сто и один способ анимировать текст.

    • Анимация не представляет проблем, так как это по сути текст, а в SVG есть сто и один способ анимировать текст.
  • Простое позиционирование, которое можно осуществлять, как измененим размера шрифта, так и дополнительными параметрами тега <tspan dx="x" dy="y">

<svg width="100%" height="100%" viewBox="0 0 100 100"> 
    <text fill="purple" x="14" y="20" font-size="12" dx="0"  > 
    Новосибирск <tspan  dx="-43" dy="-9" font-size="14" fill="teal" >&#9992;</tspan> 
   </text>  
    
    <text fill="purple" x="14" y="40" font-size="10" dx="0"  > 
    Мурманск <tspan  dx="0" dy="0" font-size="14" fill="teal" >&#9973;</tspan> 
   </text>  
    
    
   </svg>

Анимация появления названия городов вместе с символами аэропорта.

Для анимации будем использовать атрибуты x и y тега <text>, которые задают координаты первого символа текста.

Изменяя их, мы создаем тем самым анимацию движения текста вместе с символами юникода.

Задавая отрицательные значения - прячем текст. Увеличивая x и y анимируем движение названия города к месту расположения на карте.

Команда реализующая движение названия города

<text fill="purple" x="-400" y="-200" font-size="12" dx="0" >
    Москва <tspan dx="-38" dy="16" font-size="18" fill="teal">&#9992;</tspan>
   <animate attributeName="x" values="-400;59"  begin="animFill.end+1s;" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>
  <animate id="Moskva_Y" attributeName="y" values="-200;245"  begin="animFill.end+1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" /> 

Ниже полный код анимации:

<meta charset="utf-8"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"  viewBox="-20 110 500 500" > 
<path id="RU" title="Russia" transform="translate(-525 -10)"  stroke-dasharray="0" stroke-dashoffset="0" stroke-width="1" stroke="grey" fill="#94CDB2" class="land"  d="M1008.27,215.75l-2.78,2.97l-4.6,0.7l-0.07,6.46l-1.12,1.35l-2.63,-0.19l-2.14,-2.26l-3.73,-1.92l-0.63,-2.89l-2.85,-1.1l-3.19,0.87l-1.52,-2.37l0.61,-2.55l-3.36,1.64l1.26,3.19l-1.59,2.83l-0.02,0.04l-3.6,2.89l-3.63,-0.48l2.53,3.44l1.67,5.2l1.29,1.67l0.33,2.53l-0.72,1.6l-5.23,-1.32l-7.84,4.51l-2.49,0.69l-4.29,4.1l-4.07,3.5l-1.03,2.55l-4.01,-3.9l-7.31,4.42l-1.28,-2.08l-2.7,2.39l-3.75,-0.76l-0.9,3.63l-3.36,5.22l0.1,2.14l3.19,1.17l-0.38,7.46l-2.6,0.19l-1.2,4.15l1.17,2.1l-4.9,2.47l-0.97,5.4l-4.18,1.14l-0.84,4.66l-4.04,4.18l-1.04,-3.08l-1.2,-6.69l-1.56,-10.65l1.35,-6.95l2.37,-3.07l0.15,-2.44l4.36,-1.18l5.01,-6.78l4.83,-5.73l5.04,-4.57l2.25,-8.37l-3.41,0.51l-1.68,4.92l-7.11,6.36l-2.3,-7.14l-7.24,2l-7.02,9.56l2.32,3.38l-6.26,1.42l-4.33,0.56l0.2,-3.95l-4.36,-0.84l-3.47,2.7l-8.57,-0.94l-9.22,1.62l-9.08,10.33l-10.75,11.78l4.42,0.61l1.38,3l2.72,1.05l1.79,-2.38l3.08,0.31l4.05,5.19l0.09,3.92l-2.19,4.51l-0.24,5.27l-1.26,6.85l-4.23,6.01l-0.94,2.82l-3.81,4.66l-3.78,4.53l-1.81,2.28l-3.74,2.25l-1.77,0.05l-1.76,-1.86l-3.76,2.79l-0.44,1.26l-0.39,-0.66l-0.02,-1.93l1.43,-0.1l0.4,-4.55l-0.74,-3.36l2.41,-1.4l3.4,0.7l1.89,-3.89l0.96,-4.46l1.09,-1.51l1.47,-3.76l-4.63,1.24l-2.43,1.65l-4.26,0l-1.13,-3.95l-3.32,-3.03l-4.88,-1.38l-1.04,-4.28l-0.98,-2.73l-1.05,-1.94l-1.73,-4.61l-2.46,-1.71l-4.2,-1.39l-3.72,0.13l-3.48,0.84l-2.32,2.31l1.54,1.1l0.04,2.52l-1.56,1.45l-2.53,4.72l0.03,1.93l-3.95,2.74l-3.37,-1.63l-3.35,0.36l-1.47,-1.46l-1.68,-0.47l-4.11,3.06l-3.69,0.71l-2.58,1.06l-3.53,-0.7l-2.6,0.04l-1.7,-2.2l-2.75,-2.09l-2.81,-0.58l-3.55,0.57l-2.65,0.81l-3.98,-1.84l-0.53,-3.32l-3.3,-1.15l-2.54,-0.53l-3.14,-1.87l-2.9,4.66l1.14,2.6l-2.73,3.03l-4.05,-1.09l-2.8,-0.16l-1.87,-2.04l-2.92,-0.06l-2.44,-1.35l-4.26,2.07l-5.35,3.74l-2.96,0.74l-1.1,0.35l-1.49,-2.63l-3.61,0.58l-1.19,-1.84l-1.96,-0.85l-1.35,-2.55l-1.55,-0.8l-4.03,1.14l-3.86,-2.57l-1.49,2.33l-6.27,-11.58l-3.58,-3.66l1.03,-1.5l-7.03,4.49l-2.69,0.27l0.23,-2.58l-3.6,-1.63l-2.93,1.17l-0.88,-5.01l-5.04,-1.06l-2.52,2.03l-7.02,1.79l-1.37,1.19l-10.49,1.66l-1.29,1.62l2.02,3.21l-2.69,1.2l0.53,1.25l-2.69,2.22l4.54,3.1l-0.7,2.11l-3.94,-0.19l-0.81,1.31l-3.59,-2.29l-4.45,0.09l-2.98,1.87l-3.32,-1.79l-6.18,-3.1l-4.38,0.12l-5.79,4.85l-0.35,3.19l-2.88,-2.53l-2.24,4.77l0.82,0.87l-1.62,3.21l2.38,2.84l2.08,-0.12l1.79,2.76l-0.28,2.1l1.42,0.66l-1.28,2.39l-2.72,0.66l-2.79,4.09l2.55,3.7l-0.28,2.59l3.06,4.46l-1.67,1.51l-0.48,0.95l-1.24,-0.25l-1.93,-2.27l-0.79,-0.13l-1.76,-0.87l-0.86,-1.55l-2.62,-0.79l-1.7,0.6l-0.49,-0.71l-3.82,-1.83l-4.13,-0.62l-2.37,-0.66l-0.34,0.45l-3.57,-3.27l-3.2,-1.48l-2.42,-2.32l2.04,-0.64l2.33,-3.35l-1.57,-1.6l4.13,-1.67l-0.07,-0.9l-2.52,0.66l0.09,-1.83l1.45,-1.16l2.71,-0.31l0.44,-1.4l-0.62,-2.33l1.14,-2.23l-0.03,-1.26l-4.13,-1.41l-1.64,0.05l-1.73,-2.04l-2.15,0.69l-3.56,-1.54l0.06,-0.87l-1,-1.93l-2.24,-0.22l-0.23,-1.39l0.7,-0.91l-1.79,-2.58l-2.91,0.44l-0.85,-0.23l-0.71,1.04l-1.05,-0.18l-0.69,-2.94l-0.66,-1.54l0.54,-0.44l2.26,0.16l1.09,-1.02l-0.81,-1.25l-1.89,-0.83l0.17,-0.86l-1.14,-0.87l-1.76,-3.15l0.6,-1.31l-0.27,-2.31l-2.74,-1.18l-1.47,0.59l-0.4,-1.24l-2.95,-1.26l-0.9,-2.99l-0.24,-2.49l-1.35,-1.19l1.2,-1.66l-0.83,-4.96l2,-3.13l-0.42,-0.96l3.19,-3.07l-2.94,-2.68l6,-7.41l2.6,-3.45l1.05,-3.1l-4.15,-4.26l1.15,-4.15l-2.52,-4.85l1.89,-5.76l-3.26,-7.96l2.59,-5.48l-4.29,-4.99l0.41,-5.4l2.26,-0.72l4.77,-3.19l2.89,-2.81l4.61,4.86l7.68,1.88l10.59,8.65l2.15,3.51l0.19,4.8l-3.11,3.69l-4.58,1.85l-12.52,-5.31l-2.06,0.9l4.57,5.1l0.18,3.15l0.18,6.75l3.61,1.97l2.19,1.66l0.36,-3.11l-1.69,-2.8l1.78,-2.51l6.78,4.1l2.36,-1.59l-1.89,-4.88l6.53,-6.74l2.59,0.4l2.62,2.43l1.63,-4.81l-2.34,-4.28l1.37,-4.41l-2.06,-4.69l7.84,2.44l1.6,4.18l-3.55,0.91l0.02,4.04l2.21,2.44l4.33,-1.54l0.69,-4.61l5.86,-3.52l9.79,-6.54l2.11,0.38l-2.76,4.64l3.48,0.78l2.01,-2.58l5.25,-0.21l4.16,-3.19l3.2,4.62l3.19,-5.09l-2.94,-4.58l1.46,-2.66l8.28,2.44l3.88,2.49l10.16,8.8l1.88,-3.97l-2.85,-4.11l-0.08,-1.68l-3.38,-0.78l0.92,-3.83l-1.5,-6.49l-0.08,-2.74l5.17,-7.99l1.84,-8.42l2.08,-1.88l7.42,2.51l0.58,5.18l-2.66,7.28l1.74,2.78l0.9,5.94l-0.64,11.07l3.09,4.73l-1.2,5.01l-5.49,10.2l3.21,1.02l1.12,-2.51l3.08,-1.82l0.74,-3.55l2.43,-3.49l-1.63,-4.26l1.31,-5.08l-3.07,-0.64l-0.67,-4.42l2.24,-8.28l-3.64,-7.03l5.02,-6.04l-0.65,-6.62l1.4,-0.22l1.47,5.19l-1.11,8.67l3,1.59l-1.28,-6.37l4.69,-3.58l5.82,-0.49l5.18,5.18l-2.49,-7.62l-0.28,-10.28l4.88,-2.02l6.74,0.44l6.08,-1.32l-2.28,-5.38l3.25,-7.02l3.22,-0.3l5.45,-5.51l7.4,-1.51l0.94,-3.15l7.36,-1.08l2.29,2.61l6.29,-6.24l5.15,0.2l0.77,-5.24l2.68,-5.33l6.62,-5.31l4.81,4.21l-3.82,3.13l6.35,1.92l0.76,6.03l2.56,-2.94l8.2,0.16l6.32,5.84l2.25,4.35l-0.7,5.85l-3.1,3.24l-7.37,5.92l-2.11,3.08l3.48,1.43l4.15,2.55l2.52,-1.91l1.43,6.39l1.23,-2.56l4.48,-1.57l9,1.65l0.68,4.58l11.72,1.43l0.16,-7.47l5.95,1.74l4.48,-0.05l4.53,5.14l1.29,6.04l-1.66,3.84l3.52,6.98l4.41,3.49l2.71,-9.18l4.5,4l4.78,-2.38l5.43,2.72l2.07,-2.47l4.59,1.24l-2.02,-8.4l3.7,-4.07l25.32,6.06l2.39,5.35l7.34,6.65l11.32,-1.62l5.58,1.41l2.33,3.5l-0.34,6.02l3.45,2.29l3.75,-1.64l4.97,-0.21l5.29,1.57l5.31,-0.89l4.88,6.99l3.47,-2.48l-2.27,-5.07l1.25,-3.62l8.95,2.29l5.83,-0.49l8.06,3.84l3.92,3.44l6.87,5.86l7.35,7.34l-0.24,4.44l1.89,1.74l-0.65,-5.15l7.61,1.07L1008.27,215.75zM880.84,306.25l-2.82,-7.68l-1.16,-4.51l0.07,-4.5l-0.97,-4.5l-0.73,-3.15l-1.25,0.67l1.11,2.21l-2.59,2.17l-0.25,6.3l1.64,4.41l-0.12,5.85l-0.65,3.24l0.32,4.54l-0.31,4.01l0.52,3.4l1.84,-3.13l2.13,2.44l0.08,-2.84l-2.73,-4.23l1.72,-6.11L880.84,306.25zM537.82,278.77l-2.94,-0.86l-3.87,1.58l-0.64,2.13l3.45,0.55l5.16,-0.07l-0.22,-1.23l0.3,-1.33L537.82,278.77zM979.95,178.65l3.66,-0.52l2.89,-2.06l0.24,-1.19l-4.06,-2.51l-2.38,-0.02l-0.36,0.37l-3.57,3.64l0.5,2.73L979.95,178.65zM870.07,151.56l-2.66,3.92l0.49,0.52l5.75,1.08l4.25,-0.07l-0.34,-2.57l-3.98,-3.81L870.07,151.56zM894.64,142.03l3.24,-4.25l-7.04,-2.88l-5.23,-1.68l-0.67,3.59l5.21,4.27L894.64,142.03zM869.51,140.34l10.33,0.3l2.21,-8.14l-10.13,-6.07l-7.4,-0.51l-3.7,2.18l-1.51,7.75l5.55,7.01L869.51,140.34zM622.39,166.28l-2.87,1.96l0.41,4.83l5.08,2.35l0.74,3.82l9.16,1.1l1.66,-0.74l-5.36,-7.11l-0.57,-7.52l4.39,-9.14l4.18,-9.82l8.71,-10.17l8.56,-5.34l9.93,-5.74l1.88,-3.71l-1.95,-4.83l-5.46,1.6l-4.8,4.49l-9.33,2.22l-9.26,7.41l-6.27,5.85l0.76,4.87l-6.71,9.03l2.58,1.22l-5.56,8.27L622.39,166.28zM769.87,98.34l0.83,-5.72l-7.11,-8.34l-2.11,-0.98l-2.3,1.7l-5.12,18.6L769.87,98.34zM605.64,69.03l3.04,3.88l3.28,-2.69l0.39,-2.72l2.52,-1.27l3.76,-2.23l1.08,-2.62l-4.16,-3.85l-2.64,2.9l-1.61,4.12l-0.57,-4.65l-4.26,0.21L601,63.25l6.24,0.52L605.64,69.03zM736.89,82.07l4.65,5.73l7.81,4.2l6.12,-1.8l0.69,-13.62l-6.46,-16.04l-5.45,-9.02l-6.07,4.11l-7.28,11.83l3.83,3.27L736.89,82.07z"/>  
  <g font-family="serif" > 
    
   <text transform="scale(0 0)" fill="#AFCD72" x="165" y="220" font-size="36" dx="0" >   РОССИЯ   
    
   <animateTransform id="animScale" attributeName="transform" type="scale" values="0 0;1 1" begin="0.5s" dur="2.3s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1"/> 
     <animate id="animFill" attributeName="fill" from="#AFCD72" to="purple" begin="0.5s" dur="2.3s" fill="freeze"/>  
	</text> 
    
  <text fill="purple" x="-400" y="-200" font-size="12" dx="0" > 
    Москва <tspan dx="-38" dy="16" font-size="18" fill="teal">&#9992;</tspan> 
   <animate attributeName="x" values="-400;59"  begin="animFill.end+1s;" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
  <animate id="Moskva_Y" attributeName="y" values="-200;245"  begin="animFill.end+1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" />    
    
   </text>  
    
   <text fill="#54009D" x="-400" y="267" font-size="11" dx="0"  > 
    Сочи <tspan  dx="-20" dy="16" font-size="16" fill="#54009D" >&#9992;</tspan> 
    <animate id="sochy_X" attributeName="x" values="-400;33"  begin="Moskva_Y.end+0.2s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
    
   </text> 
   
    <text fill="purple" x="-400" y="210" font-size="11" dx="20" dy="10" > 
    <tspan >Санкт-Петербург  </tspan><tspan dx="-55" dy="15" font-size="16" fill="#54009D">&#9992;</tspan> 
    
    <animate attributeName="x" values="-400;59"  begin="sochy_X.end+0.1s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
  <animate id="Sankt_X" attributeName="x" values="-100;0"  begin="sochy_X.end+0.1s" dur="0.5s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" />    
   </text> 
    
   
  <text fill="#54009D" x="-400" y="188" font-size="11" dx="80" dy="5" > 
    <tspan >Архангельск  </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">&#9973;</tspan> 
    
    <animate id="Arxan_X" attributeName="x" values="-400;-35"  begin="Sankt_X.end" dur="0.8s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
  <animate id="Arxan_Y" attributeName="y" values="0;188"  begin="Sankt_X.end" dur="0.8s" fill="freeze" calcMode="spline" keySplines="0 0.25 0.25 1" />    
   
   </text>  
    
    <text fill="#54009D" x="-45" y="-100" font-size="11" dx="75" dy="0" > 
    <tspan >Мурманск  </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">&#9973;</tspan> 
	 
	<animate id="Murmansk_Y" attributeName="y" values="-100;165"  begin="Arxan_X.end+0.1s" dur="0.3s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
   </text> 
 
    
   <text fill="#54009D" x="-400" y="235" font-size="11" dx="0"  > 
    Екатеринбург <tspan  dx="-33" dy="15" font-size="16" fill="#54009D" >&#9992;</tspan>  
	<animate id="Ekb_X" attributeName="x" values="-400;97"  begin="Sankt_X.end" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
   </text>  
    
 <text fill="#54009D" x="-400" y="-270" font-size="12" dx="0"  > 
    Новосибирск <tspan  dx="-33" dy="14" font-size="16" fill="teal" >&#9992;</tspan> 
	  <animate id="Nsib_X" attributeName="x" values="-400;147"  begin="Arxan_Y.end+0.1s" dur="0.4s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
	    <animate id="Nsib_Y" attributeName="y" values="-400;270"  begin="Arxan_Y.end+0.1s" dur="0.4s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
   </text>  
 
    
    <text fill="#54009D" x="1000" y="-400" font-size="11" dx="0"  > 
    Красноярск <tspan  dx="-33" dy="14" font-size="16" fill="#54009D" >&#9992;</tspan>  
	    <animate id="Ksk_X" attributeName="x" values="1000;237"  begin="Nsib_Y.end" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
	    <animate id="Ksk_Y" attributeName="y" values="-400;270"  begin="Nsib_Y.end" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/> 
	 
   </text>    
    
    <text fill="#54009D" x="800" y="-400" font-size="12" dx="0" dy="4"  > 
    Хабаровск <tspan  dx="-33" dy="14" font-size="16" fill="#54009D" >&#9992;</tspan>  
	       <animate id="Xabarovsk_X" attributeName="x" values="800;312"  begin="Ksk_Y.end+0.2s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
	         <animate id="Xabarovsk_Y" attributeName="y" values="-400;260"  begin="Ksk_Y.end+0.2s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
	 
   </text>    
    
    <text fill="#54009D" x="-400" y="-400" font-size="12" dx="0" dy="5" > 
    <tspan >Владивосток  </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">&#9973;</tspan> 
         <animate id="Vladik_X" attributeName="x" values="-400;290"  begin="Ksk_Y.end" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
	         <animate id="Vladik_Y" attributeName="y" values="-400;300"  begin="Ksk_Y.end+0.2s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
   </text> 
    
    <text fill="#54009D" x="-450" y="400" font-size="11" dx="0"  > 
    Якутск <tspan  dx="-33" dy="14" font-size="16" fill="#54009D" >&#9992;</tspan>  
	<animate id="Yakutsk_X" attributeName="x" values="-450;320"  begin="Vladik_Y.end+0.1s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
	    <animate id="Yakutsk_Y" attributeName="y" values="-400;200"  begin="Vladik_Y.end+0.1s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
   </text> 
    
     <text fill="#54009D" x="-450" y="-400" font-size="12" dx="0" dy="5" > 
    <tspan >Магадан  </tspan><tspan dx="-45" dy="15" font-size="18" fill="#54009D">&#9973;</tspan>  
	 
	<animate id="Mag_X" attributeName="x" values="-450;360"  begin="Yakutsk_Y.end+0.1s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
	    <animate id="Mag_Y" attributeName="y" values="-400;230"  begin="Yakutsk_Y.end+0.1s" dur="0.5s" fill="freeze"  calcMode="spline" keySplines="0 0.25 0.25 1"/>  
   </text>  
    
   </g> 
</svg>

Связанные вопросы:

  1. Анимация появления карты с прорисовкой границ и с последующей закраской внутри

  2. Использование символов Юникода в анимации

  3. Как создать pattern или path цепи вдоль линии

READ ALSO
Фигуры CSS и HTML [требует правки]

Фигуры CSS и HTML [требует правки]

Доброго времени суток, необходимо сделать светофор в cssУ самого не получилось, а так как сроки сдачи работ жмут, то обращаюсь к вам

961
magnific popup ajax the content could not be loaded

magnific popup ajax the content could not be loaded

Всем привет, при юзании popup'a выскакивает окно со следующей надписью "The content could not be loaded"При нажатии на "The content" перенаправляет на popup, а мне нужно,...

234
подключение header и footer в отдельном файле

подключение header и footer в отдельном файле

Я вынес header и footer в отдельные файлы, но они не отображаются, может кто подскажет, что я не так делаю?

932