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

标签 html css gsap scrollmagic

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。

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

problem

我的文件夹结构如下:

-- 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/

上一篇：javascript - 静态与动态 SVG

下一篇：html - 可以使用 css 折叠具有不同行高的内联元素周围的空白吗？

相关文章：

javascript - jquery背景图像样式

javascript - 使用 tweenlite 被动补间属性

javascript - SVG LinearGradient - 如何从下到上淡入淡出？

javascript - 快速点击会减慢 Android chrome 上的计时器速度

javascript - 当没有空间容纳时如何在新行中断开长单词

java - 我的语言翻译在谷歌浏览器和 IE 中不起作用

css - iOS 上 HTML 中的水平下拉刷新

javascript - 在 IE9 中滚动是跳跃的

html - 网格布局中的中心列

html - 是否可以在 Flexbox 中的基线时拉伸(stretch)元素？

©2024 IT工具网  联系我们