视差效果原理 background-attachment:fixed

<html>
<head>
<style type="text/css">
body
{
  background-image:url(‘http://images2015.cnblogs.com/blog/441096/201610/441096-20161013163910781-1393436376.jpg‘);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>

<body>
<body>

<div style="width:100px;height:100px;background:red;position:absolute;top:100px;left:100px">
</div>

<div style="width:100px;height:100px;background:blue;position:absolute;top:300px;left:300px">
</div>

<div style="width:100px;height:100px;background:white;position:absolute;top:600px;left:600px">
</div>

<div style="width:100px;height:100px;background:gray;position:absolute;top:900px;left:900px">
</div>

<div style="width:100px;height:100px;background:black;position:absolute;top:1200px;left:1200px">
</div>

</body>
</body>
</html>
时间: 2024-10-26 01:20:42

视差效果原理 background-attachment:fixed的相关文章

基于Parallax设计HTML视差效果

年关将至,给大家拜年. 最近时间充裕了一点,给大家介绍一个比较有意思的控件:Parallax.它可以用来实现鼠标移动时,页面上的元素也做偏移的视差效果.在一些有表现层次,布局空旷的页面上,用来做Head最合适不过了,大家可以看这个官方Demo. 一.准备工作 如果不想用cdn的话,就下载 1.在github上下载parallax 2.下载jquery 二.实现效果 这里只介绍最简单的使用方法,先上代码: 1 <!DOCTYPE html> 2 <html> 3 <head&g

网页固定背景交替实现视差效果

视差滚动效果近年来很受大家的欢迎,但实现这个功能一般都需要javaScript,而且实现做起来有一定的难度.就这个问题,我们跟大家分享另外一种比较简单的视差滚动效果技术,只需要CSS就可以实现了.一起来看看吧. 该滚动效果特点是使用固定背景与色块内容交替,当访客向下滚动时,背景是fixed固定的.可学习HTML高级教程了解. 从上图可以看出,内容向上滚动时,第一张背景是固定的,不会跟着向上滚动.即:固定背景 + 色块内容 + 固定背景 + 色块内容…这样的交替方式,从而产生视差效果. 兼容性 I

使用UITableView实现图片视差效果

视差效果如下: 原理: 根据偏移量计算不同的移动速度,so easy! // // RootTableViewController.h // TableView // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface RootTableViewController : UITableViewController @end // // RootTableViewContro

使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了:先扔一个最终实现的效果图 先分析下效果图中实现的功能点 顶部下拉时背景图形成视差效果 上拉时标题栏透明切换显示 底部实现TabLayout+ViewPager+Fragment+RecyclerV

OCiOS动效设计:UITableView 实现滚动视差效果

前言 最近在使用'悦跑圈'这个App,其'跑鞋展厅'功能的滚动视差效果深深地吸引了我,在网上搜罗了大量的资料,如下,我将仿照该效果简单介绍实现方法. 效果演示 细节实现 OffsetImageCell.m - (void)cellOffset { // 1.获取cell在屏幕中的rect CGRect centerToWindow = [self convertRect:self.bounds toView:self.window]; // 2.获取cell中心点y轴坐标 CGFloat cen

剖析Path侧边栏抽屉效果原理(抽屉效果,Path效果)

如今很多App应用,都用到了侧边栏的效果,比如网易新闻(还带有偏移缩小),今日头条(普遍这种),Path(最先应用这种抽屉效果,所以这种效果也叫Path效果),code4App上已经有很多网友写的第三方侧边栏类,大家可以直接拿来用.这里我主要的是介绍一下这种效果的实现原理,涉及了几个知识点,在其他地方也能用到. UINavigationController和UITabBarController是2个主要的视图控制容器,都有属性viewControllers,能够很好地管理多个视图控制器.但有的时

各种效果原理(抽屉,多个tableView复用)

1.抽屉效果原理 添加3个UIView1,2,3到控制器上并记录属性. 添加当前view3的手势,实现手势方法(不能使用view3.transform,用frame根据偏移量计算view3的frame) 根据拖动时的偏移量来判断view2,view3谁隐藏 根据手势的几个状态来设置抽屉效果并计算view3的frame(UIGestureRecongnizerStateEnded[手指松开]) 添加点按手势复位(设置frame) 注意:当一个控制器的View添加到另一个控制器的View上,那么他的

用UIScrollView产生视差效果

效果: 高级效果: 源码: MoreInfoView.h  +  MoreInfoView.m // // MoreInfoView.h // YXCell // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h> @interface MoreInfoView : UIView @property (nonatomic, strong) UIImageView *imageView; @end

视差滚动原理与实现

1:视差滚动 Parallax Scrolling 指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页技术. 2:特性 效果不凡,适合个性展示,适合讲故事,但是滚动容易迷航,需要较强的导航能力 3:原理 传统的网页,文字,图片,背景都是按相同方向速度滚动,而视差滚动则是在滚动的适合内容和多层次的背景实现或不同速度.方向运动,有时候可以加上一些透明度.大小的动画来优化. 4:实现 4.1:简单的:利用background-attachment属性.展示见这里 原文地址: