素材网 素材网

html5页面视觉差效果代码

下载资源()次

阅读次数()次

发布时间:2015-07-13

html5页面视觉差效果代码
分享到:

用法简介:

来源:xw素材网

html5页面视觉差效果代码。
文件引用:

<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/sscr.min.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/viewport-units-buggyfill.js"></script>
<script src="midnight.jquery.js"></script>
<script>
$(document).ready(function(){
  // vh fix for iOS7 (Not that it works well on that anyway)
  viewportUnitsBuggyfill.init();
  $(window).resize(function(){
	viewportUnitsBuggyfill.refresh();
  });
  // Start Midnight!
  $('nav.fixed').midnight();
  // Start wow.js
  new WOW().init();
  // The island disappears when the logo moves on top of it
  var $island = $('#space-island');
  var islandTop = $island.offset().top;
  var windowHeight = $(window).height();
  $(window).resize(function(){
	islandTop = $island.offset().top;
	windowHeight = $(window).height();
  });
  $(document).scroll(function(){
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	var minScrollTop = islandTop - windowHeight * 0.4;
	var maxScrollTop = islandTop;
	// Opacity goes from 1.0 at the bottom 2/3 of the screen to 0.4 at the top
	if( scrollTop <= islandTop*2 ) {
	  var targetOpacity = 1.0;
	  var minOpacity = 0.4;
	  if( scrollTop > minScrollTop && scrollTop < maxScrollTop ) {
		targetOpacity = ((maxScrollTop - scrollTop) / (maxScrollTop - minScrollTop)) * (1.0 - minOpacity) + minOpacity;
	  }
	  else if( scrollTop > maxScrollTop ) {
		targetOpacity = minOpacity;
	  }
	  else if( scrollTop < minScrollTop ) {
		targetOpacity = 1.0;
	  }
	  $island.css('opacity', targetOpacity);
	}
  });
  $('.scroll-prompt').click(function(event){
	event.preventDefault();
	$('html, body').animate({
	  scrollTop: $("section.step-one").offset().top - $('nav').height() * 0.5
	}, 1000, 'swing');
  });
  $(window).trigger('resize');
});
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。