html随着页面滑动,实现桌面和移动浏览器元素随页面滚动产生动画

妖狐艹你老母 2022-10-06 04:48 57阅读 0赞

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

实现桌面和移动浏览器元素随页面滚动产生动画的js插件

document.documentElement.classList.add('js-enabled');

body, html \{ font-size: 100%; padding: 0; margin: 0;\}

/\* Reset \*/

\*,

\*:after,

\*:before \{

\-webkit-box-sizing: border-box;

\-moz-box-sizing: border-box;

box-sizing: border-box;

/\* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ \*/

.clearfix:before,

.clearfix:after \{

content: " ";

display: table;

.clearfix:after \{

clear: both;

body\{

background: \#494A5F;

overflow-x:hidden;

color: \#D5D6E2;

font-weight: 500;

font-size: 1.05em;

font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;

a\{color: \#2fa0ec;text-decoration: none;outline: none;\}

a:hover,a:focus\{color:\#74777b;\}

.htmleaf-container\{

margin: 0 auto;

text-align: center;

overflow: hidden;

.htmleaf-content \{

font-size: 150%;

padding: 1em 0;

.htmleaf-content h2 \{

margin: 0 0 2em;

opacity: 0.1;

.htmleaf-content p \{

margin: 1em 0;

padding: 5em 0 0 0;

font-size: 0.65em;

.bgcolor-1 \{ background: \#f0efee; \}

.bgcolor-2 \{ background: \#f9f9f9; \}

.bgcolor-3 \{ background: \#e8e8e8; \}/\*light grey\*/

.bgcolor-4 \{ background: \#2f3238; color: \#fff; \}/\*Dark grey\*/

.bgcolor-5 \{ background: \#df6659; color: \#521e18; \}/\*pink1\*/

.bgcolor-6 \{ background: \#2fa8ec; \}/\*sky blue\*/

.bgcolor-7 \{ background: \#d0d6d6; \}/\*White tea\*/

.bgcolor-8 \{ background: \#3d4444; color: \#fff; \}/\*Dark grey2\*/

.bgcolor-9 \{ background: \#ef3f52; color: \#fff;\}/\*pink2\*/

.bgcolor-10\{ background: \#64448f; color: \#fff;\}/\*Violet\*/

.bgcolor-11\{ background: \#3755ad; color: \#fff;\}/\*dark blue\*/

.bgcolor-12\{ background: \#3498DB; color: \#fff;\}/\*light blue\*/

.bgcolor-20\{ background: \#494A5F;color: \#D5D6E2;\}

.mt50\{margin-top: 50px;\}

/\* Header \*/

.htmleaf-header\{

padding: 1em 190px 1em;

letter-spacing: -1px;

text-align: center;

background: \#66677c;

.htmleaf-header h1 \{

color: \#D5D6E2;

font-weight: 600;

font-size: 2em;

line-height: 1;

margin-bottom: 0;

font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;

.htmleaf-header h1 span \{

font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;

display: block;

font-size: 60%;

font-weight: 400;

padding: 0.8em 0 0.5em 0;

color: \#c3c8cd;

/\*nav\*/

.htmleaf-demo a\{color: \#fff;text-decoration: none;\}

.htmleaf-demo\{width: 100%;padding-bottom: 1.2em;\}

.htmleaf-demo a\{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid \#fff;font-weight: 700;\}

.htmleaf-demo a:hover\{opacity: 0.6;\}

.htmleaf-demo a.current\{background:\#1d7db1;color: \#fff; \}

/\* Top Navigation Style \*/

.htmleaf-links \{

position: relative;

display: inline-block;

white-space: nowrap;

font-size: 1.5em;

text-align: center;

.htmleaf-links::after \{

position: absolute;

top: 0;

left: 50%;

margin-left: -1px;

width: 2px;

height: 100%;

background: \#dbdbdb;

content: '';

\-webkit-transform: rotate3d(0,0,1,22.5deg);

transform: rotate3d(0,0,1,22.5deg);

.htmleaf-icon \{

display: inline-block;

margin: 0.5em;

padding: 0em 0;

width: 1.5em;

text-decoration: none;

.htmleaf-icon span \{

display: none;

.htmleaf-icon:before \{

margin: 0 5px;

text-transform: none;

font-weight: normal;

font-style: normal;

font-variant: normal;

font-family: 'icomoon';

line-height: 1;

speak: none;

\-webkit-font-smoothing: antialiased;

/\* footer \*/

.htmleaf-footer\{width: 100%;padding-top: 10px;\}

.htmleaf-small\{font-size: 0.8em;\}

.center\{text-align: center;\}

/\*\*\*\*/

.related \{

color: \#fff;

background: \#494A5F;

text-align: center;

font-size: 1.25em;

padding: 0.5em 0;

overflow: hidden;

.related > a \{

vertical-align: top;

width: calc(100% - 20px);

max-width: 340px;

display: inline-block;

text-align: center;

margin: 20px 10px;

padding: 25px;

font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;

.related a \{

display: inline-block;

text-align: left;

margin: 20px auto;

padding: 10px 20px;

opacity: 0.8;

\-webkit-transition: opacity 0.3s;

transition: opacity 0.3s;

\-webkit-backface-visibility: hidden;

.related a:hover,

.related a:active \{

opacity: 1;

.related a img \{

max-width: 100%;

opacity: 0.8;

border-radius: 4px;

.related a:hover img,

.related a:active img \{

opacity: 1;

.related h3\{font-family: "Microsoft YaHei", sans-serif;\}

.related a h3 \{

font-weight: 300;

margin-top: 0.15em;

color: \#fff;

/\* icomoon \*/

.icon-htmleaf-home-outline:before \{

content: "\\e5000";

.icon-htmleaf-arrow-forward-outline:before \{

content: "\\e5001";

@media screen and (max-width: 50em) \{

.htmleaf-header \{

padding: 3em 10% 4em;

.htmleaf-header h1 \{

font-size:2em;

@media screen and (max-width: 40em) \{

.htmleaf-header h1 \{

font-size: 1.5em;

@media screen and (max-width: 30em) \{

.htmleaf-header h1 \{

font-size:1.2em;

.js-enabled .fooReveal \{ visibility: hidden; \}

.fooContainer \{ perspective: 800px; \}

默认

3D效果

![1.jpg][]

![2.jpg][1.jpg]

![3.jpg][1.jpg]

![4.jpg][1.jpg]

![5.jpg][1.jpg]

![6.jpg][1.jpg]

![7.jpg][1.jpg]

![8.jpg][1.jpg]

![9.jpg][1.jpg]

![10.jpg][1.jpg]

![11.jpg][1.jpg]

![12.jpg][1.jpg]

![13.jpg][1.jpg]

![14.jpg][1.jpg]

![15.jpg][1.jpg]

![16.jpg][1.jpg]

![13.jpg][1.jpg]

![14.jpg][1.jpg]

![15.jpg][1.jpg]

![16.jpg][1.jpg]

![13.jpg][1.jpg]

![14.jpg][1.jpg]

![15.jpg][1.jpg]

![16.jpg][1.jpg]

![13.jpg][1.jpg]

![14.jpg][1.jpg]

![15.jpg][1.jpg]

![16.jpg][1.jpg]

![13.jpg][1.jpg]

![14.jpg][1.jpg]

![15.jpg][1.jpg]

![16.jpg][1.jpg]

![13.jpg][1.jpg]

![14.jpg][1.jpg]

![15.jpg][1.jpg]

![16.jpg][1.jpg]

![13.jpg][1.jpg]

![14.jpg][1.jpg]

![15.jpg][1.jpg]

![16.jpg][1.jpg]

window.sr = ScrollReveal();

sr.reveal( '.fooReveal', \{ rotate: \{x: 65\},reset:true \} );

哈哈，有好的有用的源码我会在和大家分享，大家也可以关注H5EDU

[1.jpg]:

html随着页面滑动,实现桌面和移动浏览器元素随页面滚动产生动画

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html（公众号、移动端网页）禁止页面滑动放大

相关 vue中监听页面滚动和监听某元素滚动

相关 html随着页面滑动,实现桌面和移动浏览器元素随页面滚动产生动画

相关 html监听页面滚动高度,html – 浏览器垂直滚动条的高度限制

相关 html不随页面滚动条滚动,css如何让元素不随滚动条滚动？

相关移动端禁止页面滑动

相关原生js实现鼠标在页面上滑动时，物体随着转动

相关 HTML页面元素拖动

相关移动端禁止页面滚动

相关解决移动端，模态框、弹框滑动滚动，底部页面随着滑动、穿透的问题