Есть ли способ в WayPoints сказать смещение от фактической вершины сайта против текущей вершины окна браузера?

Question

Есть ли способ в WayPoints сказать смещение от фактической вершины сайта против текущей вершины окна браузера?

У меня есть логотип, который начинается с базовой SVG-анимации. Когда пользователь прокручивает страницу вниз, он запускает другую анимацию, которая перемещает логотип вбок и показывает часть логотипа. Когда вы прокручиваете назад вверх, логотип возвращается в поле зрения.

Это все прекрасно работает!

Проблема Если я перезагружаю страницу наполовину вниз или (что странно) при наведении на ссылку, анимация перезапускается, чтобы логотип был виден и покрывал содержимое. Это явно не желаемый эффект.

Вопрос Можно ли как-нибудь сказать смещение 20% ОТ ВЕРХА страницы по сравнению с верхом браузера, чтобы анимация не запускалась до тех пор, пока не произойдет что-либо, пока она не достигнет 20% от фактической вершины?

Скорость, с которой вы можете увидеть логотип в действии (и ошибку) https://stable.stable-demos.com/our-work/

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

Боже, я надеюсь, что это имеет смысл. Спасибо всем за ваш вклад!

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

 // Smooth OUT
 $('#smooth-logo').waypoint(function(direction) {
  
  if (direction === 'down') {

   $('.fadeMe').addClass('blur-in-fwd');
   $('.fadeMe').removeClass('blur-in-bkw');
   $('#smooth-logo').addClass('slideLeft');
   $('#smooth-logo').removeClass('slideRight');
   $('#animOut').get(0).beginElement(); // restart the animation

  } else if (direction === 'up') {  

   $('.fadeMe').addClass('blur-in-bkw');
   $('.fadeMe').removeClass('blur-in-fwd slide-right');
   $('#smooth-logo').addClass('slideRight');
   $('#smooth-logo').removeClass('slideLeft');
   $('#animIn').get(0).beginElement(); // restart the animation
  }
 }, 
  
 { offset: '0%' });
 
});

.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* PRIMARY LOAD ANIMATION */
.dropInAll {
  animation: drop 0.5s alternate;
  opacity: 0;
  animation-fill-mode:forwards;
}
.dropIn1 {
  animation-delay: 0.4s;
}
.dropIn2 {
  animation-delay: 0.5s;
}
.dropIn3 {
  animation-delay: 0.6s;
}

/* Slide Letters */
.slideAll {
  position: relative;
  animation: slideThis 5s alternate;
  animation-duration: 0.5s;
  opacity: 0;
  animation-fill-mode:forwards;
}
@keyframes slideThis {
    0% {opacity: 0.2;-webkit-transform: translateX(200px);}
    100% {opacity: 1;-webkit-transform: translateX(0px);}
}

/* S */
.bigS {
  animation-delay: 0.5s;
}
/* T */
.bigS1 {
  animation-delay: 0.6s;
}
/* A */
.bigS2 {
  animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
  animation-delay: 1.2s;
}
@keyframes drop {
  0% {opacity: 0.2;transform: translateY(-100px);}
  100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {

    0% { opacity: 1; fill: black; }
    20% { opacity: 1; fill: black; }
    50% { opacity: 1; fill: maroon; }
    100% { opacity: 1; fill: black; }
}

.bigS3 {
  animation-delay: 0.9s;
}
/* B */
.bigS4 {
  animation-delay: 1s;
}
/* L */
.bigS5 {
  animation-delay: 1.1s;
}
/* E */
.bigS6 {
  animation-delay: 1.2s;
}

/* SCROLLING ANIMATIONS */
.blur-in-fwd {
  filter: url(#filt-blur-out);
}
.blur-in-bkw {
  filter: url(#filt-blur-in);
}

/* Slide Animations */
.slideLeft {
  -webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation-delay: 1.8s;
}
#filt-blur-in {
  animation-delay: 2s!important;
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
.slideRight {
  -webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}


/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}

<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>
<script src="../custom.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
 <svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
  <title>Stable Smooth Logo</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="bigS" class="fadeMe bigS slideAll" 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 S Blur Animation -->
  <defs>

    <!-- BLUR IN -->
       <filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
         <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
           <animate id="animOut"
                    attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
         </feGaussianBlur>
         <feFlood flood-color="white" flood-opacity="1" result="alphapart">
           <animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
         </feFlood>
         <feComposite in="blurpart" in2="alphapart" operator="in"/>
       </filter>
       
       <!-- BLUR OUT -->
       <filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
         <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
           <animate id="animIn"
                    attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
         </feGaussianBlur>
         <feFlood flood-color="white" flood-opacity="0" result="alphapart">
           <animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
         </feFlood>
         <feComposite in="blurpart" in2="alphapart" operator="in"/>
       </filter>
     </defs>


  <!-- BIG T -->
  <polygon id="bigS1" class="fadeMe bigS1 slideAll" 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="bigS2" class="bigS2 slideAll"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="bigS3" class="bigS3 slideAll" 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="bigS4" class="fadeMe bigS4 slideAll" 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="bigS5" class="fadeMe bigS5 slideAll" 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="bigS6" class="fadeMe bigS6 slideAll" 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>
</header>

Я пробовал этот код обновления, но он просто автоматически запускается вместо DIV с идентификатором, указанным в контексте:

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

    $("#smooth-logo").waypoint(function(direction) {
    var $target = $( '#targetPoint' );
    if (direction === 'down' && $target ){
        $(".fadeMe").addClass("blur-in-fwd");
        $(".fadeMe").removeClass("blur-in-bkw");
        $("#smooth-logo").addClass("slideLeft");
        $("#smooth-logo").removeClass("slideRight");
        $("#animOut").get(0).beginElement(); // restart the animation
    } else if (direction === 'up') {  
        $(".fadeMe").addClass("blur-in-bkw");
        $(".fadeMe").removeClass("blur-in-fwd slide-right");
        $("#smooth-logo").addClass("slideRight");
        $("#smooth-logo").removeClass("slideLeft");
        $("#animIn").get(0).beginElement(); // restart the animation
    }
}, 

{ offset: '0%', context: 'body' });


 });

У меня есть пример здесь по этому адресу: https://stable.stable-demos.com/quip/

1

jquery jquery-waypoints waypoint

Источник

user2479724 17 май '19 в 15:38

2 ответа

Решение

Без проверки моей теории мне кажется, что проблема, с которой вы сталкиваетесь, связана со значением по умолчанию context, который window,

http://imakewebthings.com/waypoints/api/context-option/

offset Вы говорите, безусловно, может быть скорректирована, но если я прав, не имеет значения, если это 20% или же 20pxкажется, что ваша проблема заключается в том, что вы определяете смещение windowcontext а не какой-то другой элемент.

Что произойдет, если вы попытаетесь определить context как body элемент?

Что-то вроде:

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

    // Smooth OUT
    $('#smooth-logo').waypoint(function(direction) {

        if (direction === 'down') {

            $('.fadeMe').addClass('blur-in-fwd');
            $('.fadeMe').removeClass('blur-in-bkw');
            $('#smooth-logo').addClass('slideLeft');
            $('#smooth-logo').removeClass('slideRight');
            $('#animOut').get(0).beginElement(); // restart the animation

        } else if (direction === 'up') {  

            $('.fadeMe').addClass('blur-in-bkw');
            $('.fadeMe').removeClass('blur-in-fwd slide-right');
            $('#smooth-logo').addClass('slideRight');
            $('#smooth-logo').removeClass('slideLeft');
            $('#animIn').get(0).beginElement(); // restart the animation
        }
    }, 

    // { offset: '0%' });
    { offset: '0%', context: 'body' });

});

Извините, я не видел ошибку при наведении ссылки, поэтому не могу дать вам подсказки об этом.

0

Источник

user5108832 21 май '19 в 12:33

Другие вопросы по тегам jquery jquery-waypoints waypoint

user2963031 21 май '19 в 19:47 2019-05-21 19:47 · Accepted Answer · 2019-05-21 19:47

Рабочий фрагмент ниже, это то, что вы хотите? В основном вам не нужно указывать #smooth-logo путевая точка, поскольку она является частью вашей анимации, и сам логотип, который всегда остается фиксированным в том же положении, когда вы прокручиваете страницу, все, что вам нужно указать, это целевая точка, и когда она достигнет ее, анимация будет работать (я поставил console.log() для уведомления о достижении цели):

$(function() {
    $('#targetPoint').waypoint(function(direction) {
    console.log('waypoint reached!');
   
    // Target this element and run the up or down animation respectively
  
  if (direction === 'down') {
   $(".fadeMe").addClass("blur-in-fwd");
   $(".fadeMe").removeClass("blur-in-bkw");
   $("#smooth-logo").addClass("slideLeft");
   $("#smooth-logo").removeClass("slideRight");
   $("#animOut").get(0).beginElement(); // restart the animation
  } else if (direction === 'up') {  
   $(".fadeMe").addClass("blur-in-bkw");
   $(".fadeMe").removeClass("blur-in-fwd slide-right");
   $("#smooth-logo").addClass("slideRight");
   $("#smooth-logo").removeClass("slideLeft");
   $("#animIn").get(0).beginElement(); // restart the animation
  }
 }, 
  
 { offset: "0%" })
  
});

.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* PRIMARY LOAD ANIMATION */
.dropInAll {
  animation: drop 0.5s alternate;
  opacity: 0;
  animation-fill-mode:forwards;
}
.dropIn1 {
  animation-delay: 0.4s;
}
.dropIn2 {
  animation-delay: 0.5s;
}
.dropIn3 {
  animation-delay: 0.6s;
}

/* Slide Letters */
.slideAll {
  position: relative;
  animation: slideThis 5s alternate;
  animation-duration: 0.5s;
  opacity: 0;
  animation-fill-mode:forwards;
}
@keyframes slideThis {
    0% {opacity: 0.2;-webkit-transform: translateX(200px);}
    100% {opacity: 1;-webkit-transform: translateX(0px);}
}

/* S */
.bigS {
  animation-delay: 0.5s;
}
/* T */
.bigS1 {
  animation-delay: 0.6s;
}
/* A */
.bigS2 {
  animation: drop 0.5s ease-in-out, colorChange 5s ease-in 30s infinite;
  animation-delay: 1.2s;
}
@keyframes drop {
  0% {opacity: 0.2;transform: translateY(-100px);}
  100% {opacity: 1;transform: translateY(0px);}
}
@keyframes colorChange {

    0% { opacity: 1; fill: black; }
    20% { opacity: 1; fill: black; }
    50% { opacity: 1; fill: maroon; }
    100% { opacity: 1; fill: black; }
}

.bigS3 {
  animation-delay: 0.9s;
}
/* B */
.bigS4 {
  animation-delay: 1s;
}
/* L */
.bigS5 {
  animation-delay: 1.1s;
}
/* E */
.bigS6 {
  animation-delay: 1.2s;
}

/* SCROLLING ANIMATIONS */
.blur-in-fwd {
  filter: url(#filt-blur-out);
}
.blur-in-bkw {
  filter: url(#filt-blur-in);
}

/* Slide Animations */
.slideLeft {
  -webkit-animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation-delay: 1.8s;
}
#filt-blur-in {
  animation-delay: 2s!important;
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
.slideRight {
  -webkit-animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-right .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}


/* SCROLLING ANIMATIONS */
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}

<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="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
 <svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="6in" height="2in" viewBox="0 0 2036.7197 612">
  <title>Stable Smooth Logo</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="bigS" class="fadeMe bigS slideAll" 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 S Blur Animation -->
  <defs>

    <!-- BLUR IN -->
       <filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
         <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
           <animate id="animOut"
                    attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
         </feGaussianBlur>
         <feFlood flood-color="white" flood-opacity="1" result="alphapart">
           <animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
         </feFlood>
         <feComposite in="blurpart" in2="alphapart" operator="in"/>
       </filter>
       
       <!-- BLUR OUT -->
       <filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
         <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
           <animate id="animIn"
                    attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530" />
         </feGaussianBlur>
         <feFlood flood-color="white" flood-opacity="0" result="alphapart">
           <animate attributeName="flood-opacity" from="0" to="1" fill="freeze" dur="1.2s" begin="animIn.begin"
                    calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
         </feFlood>
         <feComposite in="blurpart" in2="alphapart" operator="in"/>
       </filter>
     </defs>


  <!-- BIG T -->
  <polygon id="bigS1" class="fadeMe bigS1 slideAll" 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="bigS2" class="bigS2 slideAll"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="bigS3" class="bigS3 slideAll" 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="bigS4" class="fadeMe bigS4 slideAll" 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="bigS5" class="fadeMe bigS5 slideAll" 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="bigS6" class="fadeMe bigS6 slideAll" 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>
</header>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div id="targetPoint" style="color: red;">Run the Fade Out and Slide Left Animation!</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>
<div>Not yet</div>