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

最新推荐文章于 2022-05-30 10:45:15 发布

赖赖赖先生

最新推荐文章于 2022-05-30 10:45:15 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/qq_42177117/article/details/116711177

版权

案例：
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="images/wapk_kv_camera_02_landscape.png">	

</div>	

<div class="nr1 img1">
<img src="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="images/wapk_resolution_image_02.jpg">	
<img src="images/wapk_resolution_image_02.jpg">	
</div>	

<div class="nr1 imgg1">
<img src="images/wapk_resolution_image_01.jpg">	
<img src="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;}

赖赖赖先生

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
仿苹果官网产品页面效果特效

案例：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=devi
复制链接

扫一扫