#jquery #svg #css-animations
#jquery #svg #css-анимации
Вопрос:
Анимация, к которой применяется анимация, представляет собой «размытие» CSS, которое должно размыть элемент при прокрутке вниз, а затем вернуть его в фокус при прокрутке вверх.
Пример № 1 — РАБОТАЕТ!HTML и CSS идентичны. jQuery немного отличается тем, что он нацелен на родительский, а не на дочерний элемент. (работает в FF и Chrome)
Пример 2 — НЕ работает!HTML и CSS идентичны. jQuery немного отличается тем, что он нацелен на дочерний элемент, а не на родительский. (работает в FF, но НЕ В Chrome)
Что происходит?В первом случае jQuery нацеливается на родительский элемент с анимацией РАЗМЫТИЯ и, как и ожидалось, размывает и не размывает при прокрутке, когда это предполагается.
Что не так?Во втором примере все то же самое, ЗА ИСКЛЮЧЕНИЕМ того, что вместо таргетинга на родительский элемент я хотел бы размыть только букву «S» и оставить «T» в покое.
Как вы можете видеть, те же классы стиля размытия, которые работают в первом случае, также применяются ко второму случаю. ОДНАКО, хотя стили применяются ко второму случаю, они фактически не влияют на элемент. Нет размытия, нет границ (которые я добавил для тестирования).
Кто-нибудь знает, почему эта анимация будет работать на родительском элементе, затрагивая дочерние элементы, но НЕ работает при нацеливании на конкретного дочернего элемента?
Спасибо!
ПРИМЕР 1 (работает)
jQuery(document).ready(function($) {
// Smooth OUT
$('#smooth-logo').waypoint(function(direction) {
if (direction === 'down') {
$('#smooth-logo').addClass('swirl-in-fwd');
$('#smooth-logo').removeClass('swirl-in-bkw');
} else if (direction === 'up') {
$('#smooth-logo').addClass('swirl-in-bkw');
$('#smooth-logo').removeClass('swirl-in-fwd');
}
},
{ offset: '0%' });
}); .header {
min-height: 2000px;
position: relative;
}
#smooth-logo {
position: fixed;
}
/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
border: 1px solid red;
}
.swirl-in-bkw {
animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
border: 1px solid blue;
}
/* 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="10in" height="2in" viewBox="0 0 2036.7197 612">
<title>Stable Smooth Logo</title>
<!-- BIG S -->
<path id="bigS" class="" 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="bigS1" class="" 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"/>
</svg>
</div>
</header> EXAMPLE 2 (does not work even though the styles ARE being applied to the element)
jQuery(document).ready(function($) {
// Smooth OUT
$('#smooth-logo').waypoint(function(direction) {
if (direction === 'down') {
$('#bigS').addClass('swirl-in-fwd');
$('#bigS').removeClass('swirl-in-bkw');
} else if (direction === 'up') {
$('#bigS').addClass('swirl-in-bkw');
$('#bigS').removeClass('swirl-in-fwd');
}
},
{ offset: '0%' });
}); .header {
min-height: 2000px;
position: relative;
}
#smooth-logo {
position: fixed;
}
/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
border: 1px solid red;
}
.swirl-in-bkw {
animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
border: 1px solid blue;
}
/* 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="10in" height="2in" viewBox="0 0 2036.7197 612">
<title>Stable Smooth Logo</title>
<!-- BIG S -->
<path id="bigS" class="" 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="bigS1" class="" 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"/>
</svg>
</div>
</header> Комментарии:
1. Во втором примере вы напрямую ориентируетесь на первую букву (
#bigS), и для этой буквы эффект действительно работает. Так что, похоже, все работает так, как задумано?2. Хорошо, просто проверил это в Chrome, где это не работает. Но это не работает в Firefox. Похоже, это проблема браузера.
3. Боже… CHROME! Я думаю, это относится к следующему вопросу. Почему первая анимация работает в Chrome, а вторая нет? Спасибо за уловку, Коннум.
Ответ №1:
Разница в том, что в первом примере вы применяете функцию фильтра CSS к элементу HTML. Во втором вы применяете функцию фильтра CSS к дочернему элементу SVG. Пока не все браузеры поддерживают использование функций фильтрации для элементов SVG.
Обходной путь заключается в использовании вместо этого фильтров и анимации SVG.
Обратите внимание, что анимация SVG не работает в IE / Edge. Поэтому вам может потребоваться использовать полизаполнение для этого. Смотрите https://leunen.me/fakesmile /
jQuery(document).ready(function($) {
// Smooth OUT
$('#smooth-logo').waypoint(function(direction) {
if (direction === 'down') {
$('#bigS').addClass('swirl-in-fwd');
$('#bigS').removeClass('swirl-in-bkw');
$('#animOut').get(0).beginElement(); // restart the animation
} else if (direction === 'up') {
$('#bigS').addClass('swirl-in-bkw');
$('#bigS').removeClass('swirl-in-fwd');
$('#animIn').get(0).beginElement(); // restart the animation
}
},
{ offset: '0%' });
}); .header {
min-height: 2000px;
position: relative;
}
#smooth-logo {
position: fixed;
}
/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
filter: url(#filt-blur-out);
}
.swirl-in-bkw {
filter: url(#filt-blur-in);
} <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="10in" height="2in" viewBox="0 0 2036.7197 612">
<title>Stable Smooth Logo</title>
<defs>
<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>
<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" dur="1.2s" fill="freeze" 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 S -->
<path id="bigS" class="" 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="bigS1" class="" 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"/>
</svg>
</div>
</header> Комментарии:
1. Это здорово, большое вам спасибо за подробный ответ. Я собираюсь включить эту ссылку для собственной справки, если я снова наткнусь на это, а также для всех, кто работает с SVG и хочет узнать варианты: D developer.mozilla.org/en-US/docs/Web/SVG/Element