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

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

转载作者：太空宇宙更新时间：2023-11-04 16:13:50

伙计们，我正在使用 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/

文章推荐： c++ - 失败和错误的类型转换

文章推荐： javascript - 如何获取 InDesign 中应用嵌套样式的文本

文章推荐： html - CSS/HTML - 浏览器调整大小时单列布局溢出

文章推荐： javascript - 想要每小时更改一次数组的选定元素

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

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