Ключевые кадры CSS / WayPoint / jQuery - Как повторить анимацию при прокрутке вверх и вниз - PullRequest
Новая
       32

Ключевые кадры CSS / WayPoint / jQuery - Как повторить анимацию при прокрутке вверх и вниз

0 голосов
/ 10 апреля 2019

Я создал анимацию логотипа, используя ключевые кадры CSS, Waypoint и jQuery.

У меня это есть - вроде работает - но я натолкнулся на загадку, с которой, я надеюсь, вы можете мне помочь.

Цель Когда вы прокручиваете страницу вниз, буквы превращаются в «А» или дополнительный логотип.При прокрутке вверх анимация развернется и вернется в нормальное состояние.

Текущее состояние При прокрутке вниз анимация запускается, как и ожидалось.Когда вы прокручиваете вверх, он внезапно появляется снова, что не является ожидаемой анимацией.Когда вы прокручиваете вниз (снова) анимация не запускается, как ожидалось, она внезапно появляется снова (и т. Д.).

Вопрос Как я могу включить и закрутить анимацию длянадежно работать с прокруткой вниз и прокруткой вверх с помощью jQuery?

Заранее спасибо за помощь!Полегче со мной ... Я полный ключевой кадр CSS и jQuery noob xD

Если по какой-то причине у фрагмента недостаточно прокрутки, у меня также есть демо на моем сайте: https://birdhousewebsites.com/stable-logo-test/

jQuery(document).ready(function($) {

 	// Spin OUT
	$('#swirl-out').waypoint(function(direction) {
		
		if (direction === 'down') {
			
			// If Down Run Swirl In
			$("#letter").each(function() {
				// Find each letter and add the primary animation spinAll, then add the special transition-delay for each element
				$('.item').addClass('spinAll');
				// Remove the reverse class when going back up
				$('.item').removeClass('spinAllReverse');
			});	
			
		} else if (direction === 'up') {  
			
			// If Up Run Swirl Out
			$("#letter").each(function() {
				// Remove the spin all forward and add the same animations, but in reverse 
				$('.item').removeClass('spinAll');
				$('.item').addClass('spinAllReverse');
				
			});
		}

		}, { offset: '20%' });
	
});
/* =============================================
              STABLE SPIN OUT
============================================== */
/* Globals */
      #swirl-out {
        min-height: 1000px;
        margin-top: 10%;
      }
      .spinAll {
        animation-fill-mode: forwards;
        transform-origin:center;
        transition-timing-function: ease-out;
        animation: swirlOut 0.6s ease-in both;
        opacity: 1;
      }
      .spinAllReverse {
        animation-fill-mode: forwards;
        transform-origin:center;
        transition-timing-function: ease-out;
        animation: swirlOut 0.6s ease-in both;
        opacity: 1;
        animation-direction: reverse!important;
      }

      /* Delays */
      .bigS {animation-delay: 0.1s!important;}
      .bigS1 {animation-delay: 0.2s!important;}
      .bigS4 {animation-delay: 0.3s!important;}
      .bigS5 {animation-delay: 0.4s!important;}
      .bigS6 {animation-delay: 0.5s!important;}

      /* Secondary Logo */
      .bigS2, 
      .bigS3 {
        animation-fill-mode: forwards;
        transform-origin:center;
        transition-timing-function: ease-out;
        animation: scaleDownSecondary 0.65s linear both;
        animation-iteration-count: 1;   
      }



      /* Animations */
      @keyframes swirlOut {
        0% {
          -webkit-transform: rotate(0) scale(1);
                  transform: rotate(0) scale(1);
          opacity: 1;
        }
        90% {
          opacity: 0;
        }
        100% {
          -webkit-transform: rotate(-540deg) scale(0);
                  transform: rotate(-540deg) scale(0);
          opacity: 0;
        }
      }

      @keyframes scaleDownSecondary {
        0% {
          -webkit-transform: scale(1) rotateZ(0);
                  transform: scale(1) rotateZ(0);
        }
        50% {
          -webkit-transform: scale(0.5) rotateZ(180deg);
                  transform: scale(0.5) rotateZ(180deg);
        }
        100% {
          -webkit-transform: scale(1) rotateZ(360deg);
                  transform: scale(1) rotateZ(360deg);
        }
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<link href="spin-out.css" rel="stylesheet" type="text/css">

<div id="swirl-out">
	<svg data-name="big-s-out" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Spinout</title>

		<!-- small the -->
		<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>

		<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>

		<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>

		<!-- BIG S -->
		<path id="letter" class="item bigS" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>

		<!-- BIG T -->
		<polygon id="letter" class="item bigS1" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

		<!-- ICON UPPER -->
		<polygon id="" class="item bigS2" points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>

		<!-- ICON LOWER -->
		<polygon id="" class="item bigS3" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>

		<!-- BIG B -->
		<path id="letter" class="item bigS4" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>

		<!-- BIG L -->
		<polygon id="letter" class="item bigS5" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>

		<!-- BIG E -->
		<polygon id="letter" class="item bigS6" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
	</svg>
</div>
...