Добавление анимации тексту

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,10 @@
                <div class="col-md-12">
                   <div class="titlepage">
                     
-                     <h2>Наши услуги</h2>
+         
+                    <div class="title"> <!--Анимации текста-->
+                     <h1>Наши услуги</h1>
+                    </div>
                     
                   </div>
                </div>
@@ -236,7 +242,12 @@
                <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,12 @@
                <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 +349,12 @@
                <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 +419,12 @@
                <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>
                     
                   </div>
                </div>