javascript js + html + css - 块的动画vith滚动

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript js + html + css - 块的动画vith滚动相关的知识，希望对你有一定的参考价值。

//Для начала подключаем animate_plugin
//Далее подключаем плагин waypoints https://github.com/imakewebthings/waypoints
//Далее на странице подключаем "animate" стили в 
<head>
	<link rel="stylesheet" href="libs/animate-plugin/animate.min.css">
</head>
//После в самом низу тега 
<body>
	<script type="text/javascript" src="libs/animate-plugin/animate-css.js"></script>
	<script type="text/javascript" src="libs/animate-plugin/jquery.waypoints.min.js"></script>
</body
//В файле "common.js" прописываем функцию вызова плагина
$(document).ready(function(){
  $("section h2").animated("zoomInUp");
})

//--HTML--//
//Пример применения
<section class="s_1" style="height: 800px;">
	<h2>Section Header</h2>
</section>
<section class="s_2" style="height: 800px;">
	<h2>Section Center</h2>
</section>
<section class="s_3" style="height: 800px;">
	<h2>Section Content</h2>
</section>
<section class="s_4" style="height: 800px;">
	<h2>Section Footer</h2>
</section>
//--end HTML--//

//--JS--//
//Animate CSS + WayPoints javaScript Plugin
//Example: $(".element").animated("zoomInUp", "zoomOutDown");
//Урок http://webdesign-master.ru/blog/html-css/22.html
(function($) {
	$.fn.animated = function(inEffect) {
		$(this).each(function() {
			var ths = $(this);
			ths.css("opacity", "0").addClass("animated").waypoint(function(dir) {
				if (dir === "down") {
					ths.addClass(inEffect).css("opacity", "1");
				};
			}, {
				offset: "90%"
			});

		});
	};
})(jQuery);
//--end JS--//

以上是关于javascript js + html + css - 块的动画vith滚动的主要内容，如果未能解决你的问题，请参考以下文章

Javascript

JS和CS互访后台前台代码调用JavaScript变量以及JavaScript调用代码变量

请教大师们,JavaScript怎么调用.cs文件方法啥的?

javascript基础dom操作html元素

winform WebBrowser控件中，cs后台代码执行动态生成的js

.net 用户控件ascx.cs注册js脚本代码无效果