Jqueryベースの記事リストの特効

22883 ワード

先端

1.効果を実現する
csdn個人ブログと同様に、各文章は1つのプレートに分かれています.私が実現した機能は、ブラウザのスクロールバーが下にスクロールするにつれて、各文章divが特効で現れます.
2.必要な環境

<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js">script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>

3.考え方の出所
詩酒は年を取って【自分のブログを開発したい人は彼のブログを真似して、個人的にはとてもきれいだと思います】
主にanimationを利用しています.cssが提供するアニメーション+jsはスクロールバーのスクロールを監視し、divが現れたばかりの時にcssアニメーションを再生する.
考え方:
スクロールイベントでは、各divから現在のビジュアルウィンドウの一番下までの距離をリスニングし、一定の戻り値に達するとdivが表示され、アニメーションが再生されます(一般的には、divがすぐ下から現れるのを待って、アニメーションが再生されます).
簡単な数式:(現在の要素の上部からの距離offset.top-ブラウザがスクロールする距離scrollTop)<現在のビューポートの高さですが、この条件に基づいて判断すると、現在の要素が露出していないうちにアニメーションが再生され、ユーザ体験が悪くなり、一定のオフセット量を設定するという問題があります
4.コード実装


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
         <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js">script>
         <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.article {
				width: 50%;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
			}
			.animated {
				height: 150px;
				width: 100%;
				margin-bottom: 10px;
				background-color: green;
			}
			.hidden {
				visibility: hidden;
			}
		style>
	head>
	<body>
		<div class="article">
			<div class="animated">1div>
			<div class="animated">2div>
			<div class="animated">3div>
			<div class="animated">4div>
			<div class="animated">5div>
			<div class="animated">5div>
			<div class="animated">5div>
			<div class="animated">5div>
			<div class="animated">5div>
		div>
		<script>
			$(document).ready(function() {
				//          div,      
				$(".animated").each(function() {
					if (isUnderViewPort($(this).offset().top, $(window).scrollTop(), $(window).height(), 0)) {
						$(this).css("visibitity", "visiable");
						$(this).addClass("bounceInLeft");
					}
				})

				//      ，     div，  div     ，     
				let windowHeight = $(window).height();
				$(window).scroll(function() {
					const scrollTop = $(window).scrollTop();
					$(".animated").each(function() {
						const offsetTop = $(this).offset().top;
						if (isUnderViewPort(offsetTop, scrollTop, windowHeight, 30)) {
							$(this).css("visibitity", "visiable");
							$(this).addClass("bounceInLeft");
						}
					})
				})
			})
			/**
			 *   div     （             ） 
			 * @param {Object} offsetTop dom       
			 * @param {Object} scrollTop         
			 * @param {Object} viewportHeight      (     )
			 * @param {Object} offset   
			 */
			function isUnderViewPort(offsetTop, scrollTop, viewportHeight, offset) {
				if (offsetTop - scrollTop < viewportHeight - offset) return true;
				return false;
			}
		script>
	body>
html>

5.拡張
cssアニメーションライブラリはanimationを使用しているためです.css、そのためアニメーションライブラリの提供するすべてのアニメーションを1つのjsonファイルあるいは1つの配列の中で書くことができて、それからいくつかの乱数をアニメーションの配列の下標として発生して、乱数はcookieの中に保存する必要があって、さもなくばリフレッシュした後に消えてなくなって、これによって毎回リフレッシュの効果を実現することができます

objective-c -- nil/Nil/NULL/NSNull

画像スクロール画像の効果(異なる実現構想)