html - 如何在使用 ScrollMagic 向下滚动后到达页面末尾时才显示页脚？-6ren

html - 如何在使用 ScrollMagic 向下滚动后到达页面末尾时才显示页脚？

转载作者：可可西里更新时间：2023-11-01 13:41:46

It looks like there are several questions on StackOverflow similar to this question. However, I tried several methods and nothing worked for me. :(

您好!

我目前在 PHP 中使用 MVC 模型。
我正在为此网页使用 GSAP 和 ScrollMagic。

当我向下滚动页面时，图像会按顺序显示。
顺便说一句，当触发器到达第二张图片时，我看到了第二张图片后面的页脚。

我的文件夹结构如下:

-- controller
   -- backend
   -- frontend
      -- 0_header_and_footer.php
-- model
-- public
   -- css
   -- images
   -- js
      -- backend
      -- frontend
         -- 0_header_and_footer
         -- 1_work
         -- 2_writings
         -- 3_about
            -- personality.js
-- view
   personality.php
   -- backend
   -- frontend
         -- 0_header_and_footer
         -- 1_work
         -- 2_writings
         -- 3_about
            -- personality.php
index.php

查看/template.php

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- code for <head> -->
</head>
<body>
    <?php require("view/frontend/0_header_and_footer/header.php");?>
    <?=$content?>
    <?php require("view/frontend/0_header_and_footer/footer.php");?>
</body>
</html>

查看/前端/3_about/personality.php

<?php $title='Account'; ?>

<?php ob_start(); ?>

<h2 class="title"><a href="index.php?action=about_personality">Personality</a> / <a href="index.php?action=about_interests">Interests</a></h2>
<section>
    <!-- code for <section> -->
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="public/js/frontend/3_about/personality.js"></script>

<?php $content = ob_get_clean(); ?>
<?php require('view/template.php') ?>

以下代码显示了问题:

我将页脚背景更改为橙色，以便更清楚地显示页脚。
不过，这不包括 MVC 模型。

Please check out this CodePen to see what happens: https://codepen.io/hlim18/pen/MRWjbp.

我尝试了几种方法来解决问题:

[第一次尝试]
看完this StackOverflow question ，我添加了从 this CodePen 获得的以下代码.

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -80px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 80px; 
}

但是，这并没有解决我的问题。

[第二次尝试]
this StackOverflow question 的已接受答案建议将页脚固定在底部。
-- 这不是我想要的。我只想在用户完成滚动到底部时才在底部显示页脚。

[第三次尝试]
This CSS-Tricks article展示了制作粘性页脚的五种方法:

要求固定高度页脚的 3 种方式包括我的第一次尝试
一种使用flexbox的方式
一种使用网格的方式。

我试过网格法。

HTML

<div>
    <h2 class="title">...</h2>
    <section class="page-wrap">...</section>
</div>
<footer class="site-footer">...</footer>

CSS

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
footer {
  grid-row-start: 2;
  grid-row-end: 3;
  height: 80px;
}

这也不起作用:https://codepen.io/hlim18/pen/LvYNaZ :(

[第四次尝试]
我尝试了接受的答案 this StackOverflow question .

footer {
    position:absolute;
    right:0; 
    left:0;
}

它也没有用:https://codepen.io/hlim18/pen/eoYdpW :(

我该如何解决这个问题？我将不胜感激任何帮助。谢谢!

最佳答案

如 doc使用下面的代码在页面末尾设置页脚

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#footer",
    duration: 1000,
     triggerHook: 3
  })
  .setPin("#footer")
  .addTo(controller);

See full code:

var controller = new ScrollMagic.Controller();

var project_left = document.querySelectorAll('.project_left');

project_left.forEach((element) => {
  var pic_overlay = element.children[0].children[1],
    project_info = element.children[1],
    small_title = element.children[1].children[0],
    h4_test = element.children[1].children[1],
    project_link = element.children[1].children[2];

  var animate_in = new TimelineMax();

  animate_in
    .fromTo(pic_overlay, 2, {
      skewX: 10,
      scale: 1.5
    }, {
      skewX: 0,
      xPercent: 100,
      transformOrigin: "0% 100%",
      ease: Power2.easeOut
    })
    .from(project_info, 1, {
      scaleY: 0,
      transformOrigin: 'bottom left'
    }, '-=1.5')
    .from(small_title, 0.3, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(project_link, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(h4_test, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8');

  // Make a ScrollMagic scene
  var scene = new ScrollMagic.Scene({
      triggerElement: element
    })
    .addIndicators()
    .setTween(animate_in).addTo(controller);
});

var project_right = document.querySelectorAll('.project_right');

project_right.forEach((element) => {
  var pic_overlay = element.children[0].children[1],
    project_info = element.children[1],
    small_title = element.children[1].children[0],
    h4_test = element.children[1].children[1],
    project_link = element.children[1].children[2];

  var animate_in = new TimelineMax();

  animate_in
    .fromTo(pic_overlay, 2, {
      skewX: 10,
      scale: 1.5
    }, {
      skewX: 0,
      xPercent: 100,
      transformOrigin: "0% 100%",
      ease: Power2.easeOut
    })
    .from(project_info, 1, {
      scaleY: 0,
      transformOrigin: 'bottom left'
    }, '-=1.5')
    .from(small_title, 0.3, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(project_link, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(h4_test, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8');

  // Make a ScrollMagic scene
  var scene = new ScrollMagic.Scene({
      triggerElement: element
    })
    .addIndicators()
    .setTween(animate_in).addTo(controller);

    var scene2 = new ScrollMagic.Scene({
        triggerElement: "#footer",
        duration: 1000,
         triggerHook: 3
      })
      .setPin("#footer")
      .addTo(controller);


});

.h1_test {
  font-weight: 600;
  font-size: 48px;
  color: red;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.0001em;
}

.h4_test {
  font-weight: 600;
  font-size: 28px;
  color: #666;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.0001em;
}

p.top_titles {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.small_title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project_link {
  text-decoration: none;
  border-bottom: 2px solid #b00f24;
  padding: 5px 0;
  font-size: 1.5rem;
}

.section_test {
  height: 90vh;
  width: 100vw;
}

.grid_test {
  display: grid;
  height: 100%;
  align-content: center;
  justify-content: center;
  text-align: center;
}

.project_div {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.project_left .box_test {
  position: relative;
  overflow: hidden;
  height: 90vh;
  grid-row: 1/span 3;
  width: 100%;
}

.project_left .project_info {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 20%;
  background: lightgoldenrodyellow;
  padding: 20px;
}

.project_left .box_test {
  grid-column: 2/span 7;
}

.project_left .project_info {
  left: 5%;
}

.project_right .box_test {
  position: relative;
  overflow: hidden;
  height: 90vh;
  grid-row: 1/span 3;
  width: 100%;
}

.project_right .project_info {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 20%;
  background: lightgoldenrodyellow;
  padding: 20px;
}

.project_right .box_test {
  grid-column: 5/span 7;
}

.project_right .project_info {
  right: 5%;
}

.img_test {
  width: 100%;
}

.overlay_test {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: white;
  width: 100%;
  height: 100%;
}

footer {
  display: flex;
  margin-top: 10px;
  padding-top: 7px;
  justify-content: space-between;
  height: 80px;
  background-color: orange;
}

#footer_left {
  display: flex;
  flex-direction: row;
  padding-left: 2vw;
  width: 100%;
}

#footer_left #input_icon_footer {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 24px;
  top: 10px;
}

#footer_left #search_input {
  text-indent: 40px;
  margin: 10px 0;
  width: 100%;
  background-color: #e0e2e5;
  text-indent: 40px;
  margin-top: 0px;
  width: 150px;
  background-color: #e0e2e5;
  box-sizing: border-box;
}

#footer_left #search_input:focus {
  outline: none !important;
  border: 2px solid #0b82dc;
  padding: 5px 0;
}

#footer_left #search_input:focus {
  box-sizing: border-box;
  width: 300px;
  transition: width 0.7s cubic-bezier(0.47, 0, 0.75, 0.72);
}

#footer_left #search_input:focus::-webkit-input-placeholder {
  color: #e0e2e5;
}

#footer_middle {
  padding-left: 0;
  margin-top: 22px;
  color: #6c6e70;
  width: 450px;
  text-align: center;
}

#footer_middle>li {
  list-style-type: none;
}

#footer_right {
  padding-left: 0px;
  padding-right: 2vw;
  width: 100%;
  justify-content: flex-end;
  display: flex;
  flex-direction: row;
}

#footer_right>li {
  list-style-type: none;
  padding-right: 15px;
  padding-top: 10px;
}

#footer_right>li>a>i {
  color: #6c6e70;
}

#footer_right>li>a>i:hover {
  color: #0b82dc;
}

#footer_right>li:last-child {
  padding-right: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<?php $title='Account'; ?>

<?php ob_start(); ?>

<h2 class="title"><a href="index.php?action=about_personality">Personality</a> / <a href="index.php?action=about_interests">Interests</a></h2>
<section>
  <section class="section_test">
    <div class="grid_test">
      <h1 class="h1_test">StrengthsQuest!</h1>
      <p>scroll down</p>
    </div>
  </section>
  <section class="section_test">
    <div class="project_div project_left">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
    <div class="project_div project_right">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
    <div class="project_div project_left">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1553714191-c89281730c67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
  </section>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="public/js/frontend/3_about/personality.js"></script>

<footer id="footer">
  <ul id="footer_left">
    <form action="" action="view/frontend/4_acct/footer_searchbar.php" method="POST">
      <div id="search_div" class="input_container">
        <i class="material-icons" id="input_icon_footer">search</i>
        <input id="search_input" class="acct_input" name="search" type="text" placeholder="search">
      </div>
    </form>
  </ul>
  <ul id="footer_middle">
    <li>Copyright &copy; 2019 Jen Lim
      <li>
  </ul>
  <ul id="footer_right">

  </ul>
</footer>

关于html - 如何在使用 ScrollMagic 向下滚动后到达页面末尾时才显示页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55439399/

文章推荐： windows - Egit 在处理大项目时非常慢

文章推荐： PHP - 作为助手的特征

scrollmagic - 使用相同的类在带有 scrollmagic 的 View 上设置动画
我对 scrollmagic 很陌生，我希望在整个页面中多次使用单个类来在它进入 View 时进行动画处理。这可能吗？ see pen 欢迎任何指点。 $(function() { cont
ScrollMagic - 永久添加类，向上滚动时不会删除
我想做的就是在 div 第一次滚动到 View 中时向其添加一个类，然后将其保留在那里。 (所以，我不想切换它 - 只需触发一次)。我有一个基于向父 div 添加类的动画，即使我指定了一个方向，当我在
javascript - ScrollMagic 在不同窗口高度上的偏移
我正在使用 ScrollMagic 来获取一些滚动动画。问题是我需要使用偏移量，以便动画在滚动的某个点触发，但这完全取决于窗口高度。所以在我提供的示例中 https://jsfiddle.net/5
jquery - ScrollMagic 补间动画
我以前使用过 superscrollorama 并开始使用scrollmagic，但我无法设法让一些 div 正确地设置动画。前 2 个 div 很好，但最后两个，一旦我向下滚动，就不会动画。我还想向
javascript - 如何在窗口调整大小时禁用和启用 ScrollMagic？
我正在尝试固定 ul全尺寸屏幕上的侧边栏，然后取消该图钉并将其更改为父图 nav ul的在半尺寸屏幕上。所以基本上从一个触发器、目标和偏移开始>当屏幕尺寸改变时取消它们>(并)用新的设置固定一个新的选
jquery - ScrollMagic 固定并显示问题
我正在尝试将图片暂停一段时间。滚动一点后，图片(第 1 部分)应该淡出并显示下面的图片。再滚动一段时间后，两者都应该滚动出来。我正在使用http://janpaepke.github.io/Scro
jquery - Scrollmagic:防止页面在场景中滚动
我想使用scrollmagic 在我的页面上添加效果。我的滚动场景已定义并且可以工作。现在我希望页面在场景未完成时停止滚动。我尝试将场景放入带有 overflow-y:scroll; 的容器中，但这
javascript - ScrollMagic 未正确加载
我正在尝试使用 ScrollMagic 的这个特定动画 http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sectio
javascript - ScrollMagic - 进度条
我在需要显示进度条的站点上使用 scrollMagic 库。该栏将显示用户在页面上的位置。进度条的宽度会随着用户向上或向下滚动而改变。我似乎无法让它与 scrollMagic 库一起使用。这是我在其他
javascript - ScrollMagic 销垫片太大
我是 ScrollMagic 的新手，所以不确定我是否忽略了一些明显的东西。我设置了一个 codepen这说明了我正在努力实现的目标，以及一个 alternative version 几乎做我想做的
javascript - Scrollmagic 添加结束触发器
我是第一次使用 ScrollMagic，据我了解如何根据起始元素和持续时间触发我的动画是否可以设置结束触发器而不是持续时间？ var smcontroller = new ScrollMagic.C
javascript - scrollMagic - 如何滚动到正确的位置？
有这样的事情。 https://jsfiddle.net/j6u6wp7x/1/ var scene; var controller; $(document).ready(function() {
javascript - Scrollmagic:视差部分内的动画内容问题
我正在试验视差和滚动魔法。在 scrollmagic demo 的视差示例中我正在尝试在第一个视差部分中制作动画内容。这是 a fiddle of my experiment . 我无法让 #box
javascript - ScrollMagic 在调整大小时更新触发位置
在我的网站上，ScrollMagic 场景触发器 Hook 位置存储在一个数组中 slideOffsets = []这是在使用初始化时填充的 var scene; for (var i=0; i元素滚
javascript - ScrollMagic - 鼠标滚轮和触控板停止工作
我正在使用 ScrollMagic 在这之后进行视差部分滚动 tutorial .我让它在视觉上工作，但现在使用鼠标滚轮或触控板时页面已停止滚动。它滚动的唯一方法是拖动右侧的滚动条。 main.c
javascript - ScrollMagic:如何将内容放置在视差背景之上
所以我在构建垂直视差滚动网站时遇到了问题。目前我正在使用 ScrollMagic 来创建视差部分，并且效果很好。当我尝试将内容放在上面时，问题就来了。对于我的情况，我正在使用 Bootstrap 的
javascript - Scrollmagic 触发器元素不工作
我有一个Scrollmagic问题:我正在使用triggerElement，但它说它在页面顶部进入triggerElement，但triggerElement却在页面中间。这是我的 ScrollMag
javascript - Scrollmagic - 滚动时背景颜色未正确更改
我在使用 scrollmagic 时遇到问题，因为我试图在 scrollmagic 中创建自然部分删除的演示，但我遇到了上述问题。看起来我在 querySelector 中出错了，但我不知道我在这里做
javascript - ScrollMagic 媒体查询？
我正在使用 ScrollMagic 插件，发现 here 。我在尝试跨多个屏幕尺寸固定对象时遇到问题。问题是我在引脚的“持续时间”属性中进行硬编码，但持续时间设置为像素。由于像素根据您使用的设备而不同
jquery - scrollmagic 部分删除示例的问题
伙计们，我正在使用 scrollmagic 来实现其视差部分删除视差效果。我一直在完全按照发现的方式关注演示 here而且我尝试的任何事情似乎都没有用。这让我发疯我已经在这里待了几个小时了。我在这里遗

可可西里

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在使用 ScrollMagic 向下滚动后到达页面末尾时才显示页脚？