个人中心
gpt4 book ai didi

jquery - scrollmagic 部分删除示例的问题

转载 作者：太空宇宙 更新时间：2023-11-04 16:13:50 26 4
gpt4 key购买 nike

伙计们，我正在使用 scrollmagic 来实现其视差部分删除视差效果。我一直在完全按照发现的方式关注演示 here而且我尝试的任何事情似乎都没有用。这让我发疯我已经在这里待了几个小时了。我在这里遗漏了什么？

这是一个 jsfiddle

HTML

<body>
    <section class="panel blue">    
        <b>ONE</b>
    </section>
    <section class="panel turqoise">
        <b>TWO</b>
    </section>
    <section class="panel green">
        <b>THREE</b>
    </section>
    <section class="panel bordeaux">
        <b>FOUR</b>
    </section>
</body>

CSS

body, html {
    height: 100%
}                   
.panel {
height: 100%;
width: 100%;
}
.blue {
    background-color: #3883d8;
}
.green {
    background-color: #22d659;
}
.turqoise {
    background-color: #38ced7;
}
.bordeaux {
    background-color: #953543;
}

JavaScript/JQuery

$(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 'onLeave'
        }
    });

    // get all slides
    var slides = document.querySelectorAll("section.panel");

    // create scene for every slide
    for (var i = 0; i < slides.length; i++) {
        new ScrollMagic.Scene({
            triggerElement: slides[i]
        })
            .setPin(slides[i])
            .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
    }
});

感谢您的协助!

最佳答案

您可以使用他们的示例相当轻松地创建它。这里有一些适用于您的代码，只需将其复制并粘贴到 html 页面中，您就可以根据自己的喜好为每张幻灯片自定义 javascript 和 css。确保您包括了所有必需的库，它需要 jquery、TweenMax、ScrollMagic 和 animation.gsap。我已直接链接到它们，因此您只需复制它并查​​看它是否有效，但您可以在下载的 scrollmagic 中找到它们。

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: "Source Sans Pro", Arial, sans-serif;
  background-color: #c7e1ff;
  font-size: 13px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  margin:0;
  padding:0;
  color:#fff;
}
body, html {
  height: 100%
}
#pinContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.panel {
  height: 100%;
  width: 100%;
  position: absolute;
  text-align:center;
}
b {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position:relative;
  font-size:30px;
}
</style>


</head>
<body>
<div style="height:100%;background:#000;text-align:center;"><b>OUTSIDE OF PIN CONTAINER</b></div>
<div id="pinContainer">
     <div class="panel first" style="background:#111;">
        <b>FIRST SLIDE</b>
     </div>
     <div class="panel second" style="background:#333;">
         <b>IN FROM LEFT</b>
     </div>
     <div class="panel third" style="background:#555;">
          <b>IN FROM RIGHT</b>
     </div>
     <div class="panel fourth" style="background:#777;">
          <b>IN FROM TOP</b>
     </div>
     <div class="panel fifth" style="background:#999;">
          <b>IN FROM BOTTOM</b>
     </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script>
$(function () { // wait for document ready
     // init
     var controller = new ScrollMagic.Controller();
     // define movement of panels
     var wipeAnimation = new TimelineMax()
         .fromTo("div.panel.second", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
         .fromTo("div.panel.third",    1, {x:  "100%"}, {x: "0%", ease: Linear.easeNone})  // in from right
         .fromTo("div.panel.fourth", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone}) // in from top
         .fromTo("div.panel.fifth", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}); // in from bottom
         // create scene to pin and link animation
     new ScrollMagic.Scene({
         triggerElement: "#pinContainer",
         triggerHook: "onLeave",
         duration: "300%"
     })
     .setPin("#pinContainer")
     .setTween(wipeAnimation)
     .addTo(controller);
});
</script>
</body>
</html>

我已经在我的浏览器中测试过了，它工作正常。

关于jquery - scrollmagic 部分删除示例的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33406212/

26 4 0
文章推荐： c++ - 失败和错误的类型转换
文章推荐： javascript - 如何获取 InDesign 中应用嵌套样式的文本
文章推荐： html - CSS/HTML - 浏览器调整大小时单列布局溢出
文章推荐： javascript - 想要每小时更改一次数组的选定元素
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com