页面柔和加载 smoove插件效果

最新推荐文章于 2021-12-13 15:17:20 发布

leo编程的博客

最新推荐文章于 2021-12-13 15:17:20 发布

阅读量186

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_59929417/article/details/120059124

版权

本文介绍了如何使用smoove插件创建页面柔和加载效果，通过jQuery的动画功能，让元素从一个位置平滑过渡到另一位置，以渐显的方式呈现，达到视觉上的舒适体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


	    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
	    <style>
	    html, body, .banner, .container {
	        height:100%;
	        text-align: center;
	    }
	    .block {
	        height:300px;
	        background: blue;
	        margin-bottom: 20px;
	    }
	    </style>
		
	</head>
	<body>
<div class="container">
    <h1>向下滚动鼠标您将看到效果</h1>
  </div>
  <div class="container">
    <h2>Use Smoove to create smooth fade-in effects as you scroll down</h2>
    <div class="row">
      <div class="col-md-6"><div class="block"></div></div>
      <div class="col-md-6"><div class="block"></div></div>
    </div>
    <h2>You can also move objects across the screen...</h2>
    <div class="row">
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-200px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-100px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="100px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x

最低0.47元/天解锁文章

leo编程的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面柔和加载 smoove插件效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <style> html, body, .ban.
复制链接

扫一扫