首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >当我在全屏滚动时,我的最后一个过渡不会显示

当我在全屏滚动时,我的最后一个过渡不会显示
EN

Stack Overflow用户
提问于 2019-02-20 03:49:06
回答 1查看 114关注 0票数 0

所以,查看这个问题的最好方法是让我发布代码。我不能完全确定我哪里出错了,我一直在找,但我似乎不能让它显示出来,除非我把浏览器变小。因此,在手机上,它看起来很好,但在浏览器上,它没有显示最后的注册部分。当它是移动版/大小时,最后一个注册区域没有居中,我也搞不清楚这一点

代码语言:javascript
复制
skrollr.init({
  forceHeight: false
});

/*!
 * Plugin for skrollr.
 * This plugin makes hashlinks scroll nicely to their target position.
 *
 * Alexander Prinzhorn - https://github.com/Prinzhorn/skrollr
 *
 * Free to use under terms of MIT license
 */
(function(document, window) {
  'use strict';

  var DEFAULT_DURATION = 500;
  var DEFAULT_EASING = 'sqrt';

  var MENU_TOP_ATTR = 'data-menu-top';
  var MENU_OFFSET_ATTR = 'data-menu-offset';

  var skrollr = window.skrollr;
  var history = window.history;
  var supportsHistory = !!history.pushState;

  /*
  	Since we are using event bubbling, the element that has been clicked
  	might not acutally be the link but a child.
  */
  var findParentLink = function(element) {
    //Yay, it's a link!
    if (element.tagName === 'A') {
      return element;
    }

    //We reached the top, no link found.
    if (element === document) {
      return false;
    }

    //Maybe the parent is a link.
    return findParentLink(element.parentNode);
  };

  /*
  	Handle the click event on the document.
  */
  var handleClick = function(e) {
    //Only handle left click.
    if ((e.which || e.button) !== 1) {
      return;
    }

    var link = findParentLink(e.target);

    //The click did not happen inside a link.
    if (!link) {
      return;
    }

    if (handleLink(link)) {
      e.preventDefault();
    }
  };

  /*
  	Handles the click on a link. May be called without an actual click event.
  	When the fake flag is set, the link won't change the url and the position won't be animated.
  */
  var handleLink = function(link, fake) {
    //Don't use the href property (link.href) because it contains the absolute url.
    var href = link.getAttribute('href');

    //Check if it's a hashlink.
    if (!/^#/.test(href)) {
      return false;
    }

    //Now get the targetTop to scroll to.
    var targetTop;

    //If there's a data-menu-top attribute, it overrides the actuall anchor offset.
    var menuTop = link.getAttribute(MENU_TOP_ATTR);

    if (menuTop !== null) {
      targetTop = +menuTop;
    } else {
      var scrollTarget = document.getElementById(href.substr(1));

      //Ignore the click if no target is found.
      if (!scrollTarget) {
        return false;
      }

      targetTop = _skrollrInstance.relativeToAbsolute(scrollTarget, 'top', 'top');

      var menuOffset = scrollTarget.getAttribute(MENU_OFFSET_ATTR);

      if (menuOffset !== null) {
        targetTop += +menuOffset;
      }
    }

    if (supportsHistory && !fake) {
      history.pushState({
        top: targetTop
      }, '', href);
    }

    //Now finally scroll there.
    if (_animate && !fake) {
      _skrollrInstance.animateTo(targetTop, {
        duration: _duration(_skrollrInstance.getScrollTop(), targetTop),
        easing: _easing
      });
    } else {
      defer(function() {
        _skrollrInstance.setScrollTop(targetTop);
      });
    }

    return true;
  };

  var defer = function(fn) {
    window.setTimeout(fn, 1);
  };

  /*
  	Global menu function accessible through window.skrollr.menu.init.
  */
  skrollr.menu = {};
  skrollr.menu.init = function(skrollrInstance, options) {
    _skrollrInstance = skrollrInstance;

    options = options || {};

    _easing = options.easing || DEFAULT_EASING;
    _animate = options.animate !== false;
    _duration = options.duration || DEFAULT_DURATION;

    if (typeof _duration === 'number') {
      _duration = (function(duration) {
        return function() {
          return duration;
        };
      }(_duration));
    }

    //Use event bubbling and attach a single listener to the document.
    skrollr.addEvent(document, 'click', handleClick);

    if (supportsHistory) {
      window.addEventListener('popstate', function(e) {
        var state = e.state || {};
        var top = state.top || 0;

        defer(function() {
          _skrollrInstance.setScrollTop(top);
        });
      }, false);
    }
  };

  //Private reference to the initialized skrollr.
  var _skrollrInstance;

  var _easing;
  var _duration;
  var _animate;

  //In case the page was opened with a hash, prevent jumping to it.
  //http://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page
  defer(function() {
    if (window.location.hash) {
      window.scrollTo(0, 0);

      if (document.querySelector) {
        var link = document.querySelector('a[href="' + window.location.hash + '"]');

        if (link) {
          handleLink(link, true);
        }
      }
    }
  });
}(document, window));

var s = skrollr.init( /*other stuff*/ );

//The options (second parameter) are all optional. The values shown are the default values.
skrollr.menu.init(s, {
  //skrollr will smoothly animate to the new position using `animateTo`.
  animate: true,

  //The easing function to use.
  easing: 'sqrt',

  //How long the animation should take in ms.
  duration: function(currentTop, targetTop) {
    //By default, the duration is hardcoded at 500ms.
    return 1000;

    //But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
    //return Math.abs(currentTop - targetTop) * 10;
  },
});

$(".icon-bookmark").click(function() {
  $("#placemark").addClass("placemarked");
  $(".icon-bookmark").addClass("pressed");
});
代码语言:javascript
复制
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Signika");
@import url("https://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css");
@import url("https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");

html {
  font-family: 'Signika', sans-serif;
}

body {
  background: #DDD7D1;
}

#map {
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 100%;
  height: 2000px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/52524/NewYork2_bg.png");
}

.notPlacemarked {
  visibility: hidden;
}

.placemarked {
  visibility: visible;
  height: 55px;
  width: 55px;
  position: relative;
  top: 110px;
  margin-left: 40%;
  z-index: 100;
  transition: width 1s, height 1s, transform 1s;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}

.container {
  background: #00C993;
  position: absolute;
  display: block;
  width: 100%;
  height: 2050px;
  color: white;
  text-align: center;
  min-width: 24px;
}

.section {
  position: absolute;
  display: block;
  width: 100%;
  color: white;
  text-align: left;
}

#sect1 {
  top: 400px;
}

#sect2 {
  top: 1000px;
}

#sect3 {
  top: 1500px;
}

#footer {
  top: 2000px;
  height: 50px;
  text-align: center;
}

#twitter {
  float: left;
  width: 20%;
  font-size: 5em;
  padding-left: 15%;
}

#rocket {
  float: right;
  width: 20%;
  font-size: 5em;
  padding-left: 15%;
}

#hiddenIcon {
  text-align: center;
  visibility: hidden;
  height: 0;
  font-size: 5em;
}

.anchor {
  height: 100px;
}

band2 h2 {
  text-align: left;
}

.explanation {
  min-width: 12.42em;
  float: left;
  width: 40%;
}

.explanation-right {
  min-width: 12.42em;
  float: left;
  text-align: right;
  padding-left: 5%;
  width: 40%;
}

#phone {
  background: #DDD7D1;
  border-radius: 30px;
  box-shadow: 0 0.5em 0 #BCB1A5;
  padding: 50px 18px 50px 18px;
  width: 20%;
  min-width: 200px;
  max-width: 400px;
  margin-right: 5%;
  float: left;
}

#screen {
  background: #ffffff;
  height: 300px;
  overflow: hidden;
  padding: 0;
  position: relative;
  min-width: 200px;
}

#topBar {
  background: #00C993;
  height: 10%;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  min-width: 100px;
}

#mc_embed_signup {
  text-align: right;
  background-color: #00C993;
}

#mce-EMAIL {
  text-align: right;
  width: auto;
  height: 30px;
  margin-bottom: 20px;
  padding-right: 1em;
  border-style: none;
  outline: none;
}

#mce-EMAIL:focus {
  outline: none;
}

#mc-embedded-subscribe {
  border-style: none;
}

.icon-bookmark {
  float: right;
}

.icon-bookmark:hover {
  color: #FFC52F;
}

.pressed {
  color: #FFC52F;
}

h1,
h3 {
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  text-align: center;
}

.container h1 {
  font-size: 5em;
  line-height: 1em;
  /*margin-bottom: 1em;*/
}

a {
  color: white;
}

.button {
  background: #DDD7D1;
  text-align: center;
  padding: .5em 1em;
  color: white;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 0.2em 0 #BCB1A5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /*transition cross-browser stuff*/
  -webkit-transition: background 0.2s ease-out;
  /* Safari 3.2+, Chrome */
  -moz-transition: background 0.2s ease-out;
  /* Firefox 4-15 */
  -o-transition: background 0.2s ease-out;
  /* Opera 10.5–12.00 */
  transition: background 0.2s ease-out;
  /* Firefox 16+, Opera 12.50+ */
}

.button:hover {
  background: #BCB1A5;
}

a.arrow {
  color: white;
  text-align: center;
  font-size: 3em;
  text-decoration: none;
  padding-bottom: 30px;
  /*transition cross-browser stuff*/
  -webkit-transition: color 0.2s ease-out;
  /* Safari 3.2+, Chrome */
  -moz-transition: color 0.2s ease-out;
  /* Firefox 4-15 */
  -o-transition: color 0.2s ease-out;
  /* Opera 10.5–12.00 */
  transition: color 0.2s ease-out;
  /* Firefox 16+, Opera 12.50+ */
}

a.arrow:hover {
  color: #FFC52F;
}

@media only screen and (min-width: 767px) {
  body {
    font-size: 1.125em;  /* 18px / 16px */
  }
  
  .container {
    background-size: 100%;
  }
  
  .container h1 {
    font-size: 3.25em;  /* 52 / 16 */
  }
  
  a.button {
    padding: .75em 1.5em;
  }
}

@media only screen and (max-width: 600px) {
  .explanation {
    float: none;
    margin: auto;
    text-align: center;
  }
  
  .explanation-right {
    float: none;
    margin: center;
    text-align: center;
  }
  
  #sect1 {
    top: 350px;
  }
  
  #phone {
    visibility: hidden;
    height: 0px;
    width: 0px;
    padding: 0;
    margin: 0;
  }
  
  #map {
    width: 0px;
    height: 0px;
  }
  
  #sect2 {
    top: 900px;
  }
  
  #rocket {
    visibility: hidden;
  }
  
  #twitter {
    visibility: hidden;
    padding-left: 0em;
  }
  
  #hiddenIcon {
    visibility: visible;
    height: auto;
  }
  
  #mce-EMAIL {
    text-align: center;
    padding: 0;
    float: none;
  }
  
  #mc_embed_signup {
    text-align: center;
  }
}
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<div class="container" id="skrollr-body" data-0="background-color:rgb(0,201,147);" data-400="background-color:rgb(74,173,255);" data-1000="background-color:rgb(74,173,255);" data-1300="background-color:rgb(0,201,147);">
  <h1><i class="icon-circle-blank"></i></h1>
  <h2>PoshFit</h2>
  <p> it's coming to your smartphone </p>

  <a class="arrow" href="#anchor1"><i class="icon-sort-down"></i></a>

  <div class="section" id="sect1">
    <div class="anchor" id="anchor1"></div>
    <div id="hiddenIcon">
      <i class="icon-mobile-phone"></i>
    </div>
    <div id="phone" data-0="margin-left: -20%; opacity:0" data-350="margin-left: 10%; opacity:1">

      <div id="topBar">
        <p>Press---> <i class="icon-bookmark"></i> </p>
      </div>
      <div id="screen">
        <div id="map">
          <img id="placemark" class="notPlacemarked" src="https://s.cdpn.io/52524/CircleMarkerTest3.png">
        </div>
        <!--/ map-->
      </div>
      <!--/ screen-->
    </div>
    <!--/ phone-->
    <div class="explanation" data-300="opacity: 0" data-350="opacity: 1">
      <h2>Right where you are</h2>
      <p>Try on clothes from home. There's no need to travel all the way to the store to find the perfect outfit.</p>
      <a class="arrow" href="#anchor2"><i class="icon-sort-down"></i></a>
    </div>
    <!--/ explanation-->
  </div>
  <!--/ sect1-->

  <div class="section" id="sect2">
    <div class="anchor" id="anchor2"></div>
    <div id="hiddenIcon">
      <i class="icon-twitter"></i>
    </div>
    <div id="twitter" data-600="margin-top: -20%; opacity: 0" data-1000="margin-top: 0; opacity:1">
      <i class="icon-twitter"></i>
    </div>
    <div class="explanation" data-850=" opacity: 0" data-900=" opacity:1">
      <h2>Follow @PoshFit on Twitter</h2>
      <p>Keep up with the latest updates from PoshFit. </p>
      <a class="arrow" href="#anchor3"><i class="icon-sort-down"></i></a>
    </div>
    <!--/ explanation-->
  </div>
  <!--sect2-->

  <div class="section" id="sect3">
    <div class="anchor" id="anchor3"></div>
    <div id="hiddenIcon">
      <i class="icon-rocket icon-rotate-180"></i>
      <p></p>
    </div>
    <div class="explanation-right" data-1350=" opacity: 0" data-1400=" opacity:1">
      <h2>It's almost here!</h2>
      <p>Leave your email address for our beta newsletter.</p>

      <!-- Begin MailChimp Signup Form -->

      <div id="mc_embed_signup">
        <form action="">
          <!-- currently empty -->
          <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="me@example.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'me@example.com'" required>
          <div><input type="submit" value="I want it!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </form>
      </div>

      <!--End mc_embed_signup-->
    </div>
    <!--/ explanation-->
    <div id="rocket" data-1100="margin-top:-300px; margin-right:0%; opacity: 0" data-1400="margin-top:50; margin-right:20%; opacity:1">
      <i class="icon-rocket icon-rotate-180"></i>
    </div>
    <!--/ rocket-->
  </div>
  <!--sect2-->
  <div class="section" id="footer">
    <p><a href="https://twitter.com/PoshFit">@PoshFit</a></p>
  </div>
</div>
<!--/ band-->

EN

回答 1

Stack Overflow用户

发布于 2019-02-20 04:27:31

在我看来,你的动画结束得太晚了,如果你改变你的data-1350data-1400data-1050data-1200,它会在正确的时间结束。

对于糟糕的解决方案,我很抱歉,我仍在努力寻找更好的解决方案。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54773911

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档