如何在小屏幕上不激活或停止动画

发布于 2025-01-19 15:20:03 字数 6572 浏览 0 评论 0原文

所以我有这个动画，其中有一个 h1，当我向下滚动图像缩小并且 h1 跟随图像动画时，我的问题是，当我在移动设备上或将屏幕大小调整为平板电脑或移动设备时，我想要动画滚动至不激活。我已经尝试使用调整大小功能或者如果屏幕>但它不起作用我正在使用scrollMagic cdn。

动画

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Css/style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body class="contenet">
    <div class="overflow-wrap">
        <header id="header">
            <img src="./Asset/Img/1.png" loading="lazy" alt="" id="hero-ui">
            <div class="container container--hero">
                <div class="hero__header">
                    <h1 class="hero-heading">The Webflow Expert.</h1>
                </div>
            </div>
        </header>
    </div>
    <section class="section section--manifest">
        <div class="section-header section-header--intro">
            <h2 class="fluid-gradient-heading fluid-gradient-heading--hero cc-en">World-class Webflow<br>sites for ambitious<br>companies.</h2>
        </div>
    </section>

    <script src="./JS/app.js"></script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*::-webkit-scrollbar {
    display: none;
}

body {
    background-color: #1d1d1f;
    color: white;
    font-family: Inter, sans-serif;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#header {
    display: flex;
    height: 100vh;
    align-items: center;
    position: sticky;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform-style: preserve-3d;
}

.overflow-wrap {
    overflow: hidden;
    height: 100%;
}

#hero-ui {
    position: relative;
    left: 50%;
    z-index: 1;
    width: 16.9em;
    max-width: none;
    margin-top: 3.2em;
    margin-left: -8.45em;
    font-size: 10vw;
    opacity: 0;
}

.hero-heading {
    will-change: transform, opacity;
    animation: fadeIn 0.8s ease;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
    animation-delay: 0.5s;
    font-size: 92px;
}

.container.container--hero {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: auto;
    display: flex;
    height: 100vh;
    max-width: none;
    padding-top: 100px;
    padding-bottom: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.section.section--manifest {
    padding-top: 100px;
    padding-bottom: 160px;
}

.section-header.section-header--intro {
    position: relative;
    max-width: 1050px;
    margin-bottom: 0;
}

.section-header {
    width: 90%;
    max-width: 980px;
    margin-right: auto;
    margin-bottom: 142px;
    margin-left: auto;
    text-align: left;
}

.fluid-gradient-heading.fluid-gradient-heading--hero.cc-en {
    font-size: 103px;
}

.fluid-gradient-heading.fluid-gradient-heading--hero {
    margin-right: auto;
    margin-left: auto;
    line-height: 1.05;
    text-align: center;
}

.fluid-gradient-heading {
    background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 10s infinite ease both;
    -moz-animation: intro-gradient 10s infinite ease both;
    animation: intro-gradient 10s infinite ease both;
}

.fluid-gradient-heading {
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 92px;
    line-height: 1.1;
    letter-spacing: -.045em;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 32px;
    line-height: 36px;
    font-weight: 600;
}

JAVASCRIPT

/*==================== zoom out image ====================*/


let controller = new ScrollMagic.Controller();
let zoomHeader = TweenMax.to("#header", 0.9, { opacity: 1, scale: 0.35, ease: Circ.EaseIn });
let headerZoom = new ScrollMagic.Scene({
        triggerElement: "#header",
        triggerHook: 0,
        duration: "3000ms"
    })
    .setPin('#header')
    .setClassToggle('#header')
    .setTween(zoomHeader)

.addTo(controller);

/*==================== smooth link scrooling====================*/
let $root = $('html, body');

$('a[href^="#"]').click(function() {
    $root.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);

    return false;
});


/*==================== Change opacity image ====================*/
$(window).scroll(function() {
    let scrollTop = $(this).scrollTop();

    $('#hero-ui').css({
        opacity: function() {
            let elementHeight = $(this).height();
            return 1 - (elementHeight - scrollTop) / elementHeight;
        }
    });
});

原文

So i have this animation where there is this a h1 and when i scroll down the image zoom out and the h1 follow the image animation, my problem is that when im on mobile or i resize the screen to tablet or mobile i want the animation on scroll to not activate.
i already tried to use the resize function or if screen is > than but it doesn't work i'm using scrollMagic cdn.

animation

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Css/style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body class="contenet">
    <div class="overflow-wrap">
        <header id="header">
            <img src="./Asset/Img/1.png" loading="lazy" alt="" id="hero-ui">
            <div class="container container--hero">
                <div class="hero__header">
                    <h1 class="hero-heading">The Webflow Expert.</h1>
                </div>
            </div>
        </header>
    </div>
    <section class="section section--manifest">
        <div class="section-header section-header--intro">
            <h2 class="fluid-gradient-heading fluid-gradient-heading--hero cc-en">World-class Webflow<br>sites for ambitious<br>companies.</h2>
        </div>
    </section>

    <script src="./JS/app.js"></script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*::-webkit-scrollbar {
    display: none;
}

body {
    background-color: #1d1d1f;
    color: white;
    font-family: Inter, sans-serif;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#header {
    display: flex;
    height: 100vh;
    align-items: center;
    position: sticky;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform-style: preserve-3d;
}

.overflow-wrap {
    overflow: hidden;
    height: 100%;
}

#hero-ui {
    position: relative;
    left: 50%;
    z-index: 1;
    width: 16.9em;
    max-width: none;
    margin-top: 3.2em;
    margin-left: -8.45em;
    font-size: 10vw;
    opacity: 0;
}

.hero-heading {
    will-change: transform, opacity;
    animation: fadeIn 0.8s ease;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
    animation-delay: 0.5s;
    font-size: 92px;
}

.container.container--hero {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: auto;
    display: flex;
    height: 100vh;
    max-width: none;
    padding-top: 100px;
    padding-bottom: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.section.section--manifest {
    padding-top: 100px;
    padding-bottom: 160px;
}

.section-header.section-header--intro {
    position: relative;
    max-width: 1050px;
    margin-bottom: 0;
}

.section-header {
    width: 90%;
    max-width: 980px;
    margin-right: auto;
    margin-bottom: 142px;
    margin-left: auto;
    text-align: left;
}

.fluid-gradient-heading.fluid-gradient-heading--hero.cc-en {
    font-size: 103px;
}

.fluid-gradient-heading.fluid-gradient-heading--hero {
    margin-right: auto;
    margin-left: auto;
    line-height: 1.05;
    text-align: center;
}

.fluid-gradient-heading {
    background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 10s infinite ease both;
    -moz-animation: intro-gradient 10s infinite ease both;
    animation: intro-gradient 10s infinite ease both;
}

.fluid-gradient-heading {
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 92px;
    line-height: 1.1;
    letter-spacing: -.045em;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 32px;
    line-height: 36px;
    font-weight: 600;
}

JAVASCRIPT

/*==================== zoom out image ====================*/


let controller = new ScrollMagic.Controller();
let zoomHeader = TweenMax.to("#header", 0.9, { opacity: 1, scale: 0.35, ease: Circ.EaseIn });
let headerZoom = new ScrollMagic.Scene({
        triggerElement: "#header",
        triggerHook: 0,
        duration: "3000ms"
    })
    .setPin('#header')
    .setClassToggle('#header')
    .setTween(zoomHeader)

.addTo(controller);

/*==================== smooth link scrooling====================*/
let $root = $('html, body');

$('a[href^="#"]').click(function() {
    $root.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);

    return false;
});


/*==================== Change opacity image ====================*/
$(window).scroll(function() {
    let scrollTop = $(this).scrollTop();

    $('#hero-ui').css({
        opacity: function() {
            let elementHeight = $(this).height();
            return 1 - (elementHeight - scrollTop) / elementHeight;
        }
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼睛会笑 2025-01-26 15:20:03

在滚动事件监听器中，您可以检查实际的设备宽度。
然后您可以在移动时禁用动画。
就像

$(window).scroll(function() {
 if($(window).width() < 500) return
 .....
}

您可以对点击事件应用相同的检查。
如果您也处理调整大小/加载事件，那就太好了。

In your scroll event listener you may check actual device width.
Then you can disable animation when it is mobile.
Smth like

$(window).scroll(function() {
 if($(window).width() < 500) return
 .....
}

You can apply the same check for click event.
Also it will be good if you handle resize/load events as well.

回复收藏 0 原文

~没有更多了~

关于作者

云巢

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

如何在小屏幕上不激活或停止动画

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

琉璃梦幻

qq_4zWU6L

话少情深

西西弗的石头怪

彻夜缠绵

千寻…

友情链接

如何在小屏幕上不激活或停止动画

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

琉璃梦幻

qq_4zWU6L

话少情深

西西弗的石头怪

彻夜缠绵

千寻…

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。