Анимации заголовков

index.html

@@ -30,6 +30,9 @@
       <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
       
+     <link rel="stylesheet" href="./css/whatwedo.css"> <!--Анимации текста-->
+     <link rel="stylesheet" href="./css/aniText.css"> <!--Анимации текста-->
+     
       <script src="libs/gsap/gsap.min.js" defer></script>
       <script src="libs/gsap/ScrollSmoother.min.js" defer></script> <!-- Плавный скролл и анимация -->
       <script src="libs/gsap/ScrollTrigger.min.js" defer></script> <!-- Анимация  -->
@@ -179,7 +182,9 @@
                <div class="col-md-12">
                   <div class="titlepage">
                     
-                     <h2>Наши услуги</h2>
+                     <div class="title"> <!--Анимации текста-->
+                     	<h1>Наши услуги</h1>
+                  	 </div>
                     
                   </div>
                </div>
@@ -236,7 +241,13 @@
                <div class="col-md-6">
                   <div class="titlepage">
                     
-                     <h2>О нас</h2>
+               
+                   	 <svg width="100%" height="100%"> <!--Анимации текста-->
+                           <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
+                           <text x="0" y="75%">
+                              О нас
+                           </text>
+                      </svg>
                          <p>Компания Estilista предлагает широкий спектр услуг<br> в области создания имиджа, включая разбор
                      гардероба,<br> шоппинг-сопровождение, создание образа для<br> мероприятия и фотосессии, а также проведение<br>
                      комплексной консультации по стилю.
@@ -261,7 +272,13 @@
                <div class="col-md-12">
                   <div class="titlepage">
                     
-                     <h2>Цены</h2>
+                    
+                    <svg width="100%" height="100%"> <!--Анимации текста-->
+                     <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
+                     	<text x="51%" y="75%" text-anchor="middle">
+                       	 Цены
+                    	</text>
+                  	</svg>
                     
                   </div>
                </div>
@@ -333,7 +350,13 @@
                <div class="col-md-12">
                   <div class="titlepage">
                     
-                     <h2><h2>Познакомьтесь с нашими стилистами</h2></h2>
+                    
+                    <svg width="100%" height="100%"> <!--Анимации текста-->
+                     <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
+                     	<text x="51%" y="75%" text-anchor="middle">
+                        Познакомьтесь с нашими стилистами
+                     	</text>
+                    </svg>
                     
                   </div>
                </div>
@@ -398,7 +421,13 @@
                <div class="col-md-12">
                   <div class="titlepage">
                     
-                      <h2>Запишитесь к нам!</h2>
+                       
+                    <svg width="100%" height="100%"> <!--Анимации текста-->
+                     <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
+                     	<text x="51%" y="75%" text-anchor="middle">
+                        	Запишитесь к нам!
+                    	 </text>
+                   </svg>
                     
                   </div>
                </div>