微信公众号css实现滑动效果,基于HTML/CSS/JS微信公众号展示页面模板

首先看一下成品

演示页面

https://pai-daxing1.github.io/weixin/

项目结构：

HTML代码：

啦啦啦好像biu点什么

$(document).ready(function() {

my_section1.init();

$('#welcome').fullpage({

'verticalCentered': false,

'css3': true,

'sectionsColor': ['#6cbb52','#e89c38', '#40a3e1'],

'navigation': true,

'navigationPosition': 'right',

//'easing' : 'easeInOutBounce',

'afterRender' : function (index,anchorLink ) {

$(".iphone_img").addClass('fadeInTop');

},

'afterSlideLoad':function(index ) {

}

,

'afterLoad': function(anchorLink, index){

if( index == 2) {

$(".iphone_img").removeClass('fadeInTop');

}

if(index==3){

my_section1.init();

}

if(index==1){

my_section1.init();

}

if(index==2){

my_section2.init();

}

},

'onLeave': function(index, nextIndex, direction){

if( nextIndex == 1 ) {

$(".iphone_img").addClass('fadeInTop');

}

if(index==1){

my_section1.anim();

}

if(index==3){

my_section1.anim();

}

if(index==2){

my_section2.anim();

}

}

});

});

公众号：

啦啦啦好像biu点什么

全中国最大的微信公众平台！

iPhone版下载

Andriod版下载

• 
• 
• 
• 
• 
• 

那些事

关注发展，分享精彩

• 旅游
• 景点
• 文化
• 黄金沙滩
• 旅游攻略
• 旅游网

那些事

掌控生活，旅游资讯，吃喝玩乐

• 旅游景点
• 旅游攻略
• 妈祖文化
• 酒店
• 风景
• 莆田

微信号

|

wh1836360

关于我们

|

广告合作

|

免责声明

|

联系我们

Copyright © 1999-2021 那些事 来源:海拥优快云

部分CSS代码：

body,html {

font-family: "微软雅黑";

font-size: 14px;

}

.fixed {

position: fixed

}

html {

width: 100%;

height: 100%;

}

.icon {

background: url(img/icon.png) no-repeat;

overflow: hidden;

}

.iphone_icon {

background: url(img/iphone.png) no-repeat;

}

.download_box .item_pc {

text-align: center!important;

border: 1px solid #fff;

}

.head {

top: 0px;

left: 0px;

width: 100%;

height: 57px;

padding-top: 10px;

border-bottom: 1px solid rgba(48, 48, 48,0.14);

overflow: hidden;

}

.head .head_content {

width: 74%;

max-width: 1000px;

height: 57px;

margin: 0 auto;

}

.head .login_box,

.head .login_box a {

color: #fff;

margin-right: 10px;

font-size: 105%;

}

.head .login_box {

margin-top: 2%;

margin-right: 3%;

}

.head .login_box span {

margin-right: 10px;

}

.head .logo {

width: 113px;

height: 46px;

background: url(img/logo.png) no-repeat;

}

.head .logo_blue {

}

.head .logo_green {

background-position: -11px -61px;

}

.bottom {

width: 100%;

bottom: 10px;

}

.bottom .bottom_content {

width: 74%;

max-width: 1045px;

margin: 0 auto;

}

.bottom a,

.bottom span {

float: left;

margin-right: 5px;

color: #000000;

font-size: 10px;

opacity: .4;

}

.bottom p {

font-size: 12px;

opacity: .4;

}

.my_section {

width: 74%;

max-width: 1000px;

margin: 0 auto;

padding-top: 64px;

position: relative;

transform:scale(1);

-webkit-transform:scale(1);

-moz-transform-origin:top left;

}

完整代码已打包上传