仿苹果官网产品页面效果特效

案例：
https://fujifilm-x.com/zh-cn/products/cameras/gfx100s/
https://www.apple.com.cn/ipad-pro/

实现代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!--JQ-->
<script  src="js/superslide.2.1.js" type="text/javascript"></script>
<!--banner-->
<link rel="stylesheet" href="css/swiper.min.css">
<script type="text/javascript" src="js/swiper.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css"> </head><body><div class="index">
<div class="wrap">
<div class="nr1 img2">
<img src="data:images/wapk_kv_camera_02_landscape.png"> </div>    <div class="nr1 img1">
<img src="data:images/wapk_kv_camera_01_landscape.png"> </div>    </div>
</div><script>//根据滚动条位置设置元素的透明度变化
var n=0
$(window).scroll(function(){n=$(window).scrollTop()document.title=n$(".img1").css({opacity:1-n/1100})}
)
</script><div class="index2">
<div class="wrap">
<div class="tt">更高分辨率</div>
<div class="nr1">
<img src="data:images/wapk_resolution_image_02.jpg">
<img src="data:images/wapk_resolution_image_02.jpg">
</div>    <div class="nr1 imgg1">
<img src="data:images/wapk_resolution_image_01.jpg">
<img src="data:images/wapk_resolution_image_01.jpg">
</div>
</div>
</div><script>var k=0;
$(function(){var index2 = $(".index2").offset().top;$(window).scroll(function(){var this_scrollTop = $(this).scrollTop();var k =$(this).scrollTop();if(this_scrollTop>index2 ){$(".imgg1").css({opacity:5-k/1100})}});
});</script>
//可完全复制进行使用</body>
</html>

css部分

.index{width:100%;height:4000px;}
.index .wrap{overflow: hidden;position: sticky;top: 0;left: 0;width: 100%;height: 100vh;background-color: #000;}
.index .wrap .nr1{position: absolute;top: 0;left: 0;right: 0;bottom: 0;transform-origin: center top; opacity: 1; transform: translateY(0px);}
.index .wrap .nr1 img{width: 100%;height: 100%;object-fit: contain;}    .index2{width:100%;height:4000px;position: relative;}
.index2 .wrap{overflow: hidden;position: sticky;top: 0;left: 0;width: 100%;height: 100vh;}
.index2 .wrap .nr1{position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;}
.index2 .wrap .nr1 img{width: 100%;height: auto;object-fit: contain;}

仿苹果官网产品页面效果特效相关推荐

苹果官网产品展示特效
给大家分享一个由原生JS实现的苹果官网产品展示特效,看起来很不错,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><head& ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
timeAxis.js--一个简单的时间轴JS框架--仿苹果官网
代码已经上传到Github,希望各位大佬指教. ReadMe还是以GitHub为准 GitHub地址:https://github.com/royalknight56/timeAxis.js 基本实现 ...
1499元被标149元，苹果官网产品出现Bug价后续：白高兴了！
从来只有苹果的"割肾行动",很少有人能薅到苹果羊毛. 12月23日,有多位网友发现,苹果中国官网商店惊现价格乌龙,千元商品被标价一两百元,引得很多人薅羊毛. 比如,Shure MO ...
结合Bootstrap实现一点点奶茶加盟官网首页页面效果
学完bootstrap3后,找了一个简单的网站进行实战练习,只实现了网站首页的效果.用上bootstrap基本的栅格布局,轮播图和几个常用的样式类,适合小白练手. 整个完整首页的实现效果是这样的: 这 ...
响应式布局（多媒体查询）仿苹果官网部分实例
html代码部分: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
超强的苹果官网滚动文字特效实现
每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页.其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外. 最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣 ...
仿Apple官网导航条
仿Apple官网导航条效果在线预览使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条,仿做的动画,字体不一致不会CSS动画,未有学习 flex掌握感觉还可以媒体查询也懂得了一小部 ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...

仿苹果官网产品页面效果特效

仿苹果官网产品页面效果特效相关推荐

最新文章

热门文章