js的图片渐渐入渐渐出的效果(html逻辑 css逻辑 js逻辑))

js逻辑：
第一步;

可视区的高度+只是滑出去的高度-图片的1/2===如果结果是650和文档顶部到图片的中部的距离一样的话,代表滑动到了图片的一半了。
第一：滑动过了图片的一半了.
第二：滑动等于图片的一半.

第三步：意思是滑动出去scrollY的部分小于文档顶部距离图片底部的距离的话就代表图片还没有完全滑动出去.

图片的顶部距离文档顶部的距离+图片的高度===第四步：图片的底部到文档的顶部的距离.

第五步：if：意思是说图片已经在可视区中过了一半或者等于一半的话,并且图片已经完全滑动出去了
第六步：else：图片的一半还没有到达可视区的部分的话,并且scroll部分的部分还小于图片的底部到达文档的顶部的话.

<script>const sliderImages = document.querySelectorAll('.slide-in');function checkSlide(e) {sliderImages.forEach(sliderimage => {// 滑动到图片显示的一半const slideAt = window.innerHeight + window.scrollY - sliderimage.height / 2;console.log(`window.innerHeight = ${window.innerHeight} `);console.log(`window.scrollY = ${window.scrollY}`);console.log(`slideAt = ${slideAt}`);// 图片底部距文档顶部的距离const imageBottom = sliderimage.offsetTop + sliderimage.height;console.log(`sliderimage.offsetTop = ${sliderimage.offsetTop}`);console.log(`sliderimage.height = ${sliderimage.height}`);console.log(`imageBottom = ${imageBottom}`);// 图片是否已经显示了一半const isHalfShown = slideAt >= sliderimage.offsetTop;console.log(`isHalfShown = ${isHalfShown}`);// 图片是否已经被完全滚动出去const isNotScrolledPast = window.scrollY < imageBottom;console.log(`isNotScrolledPast = ${isNotScrolledPast}`);// if(isHalfShown && isNotScrolledPast) {//     console.log(`window.scrollY = ${window.scrollY}`);//     console.log(`imageBottom = ${imageBottom}`);// }if (isHalfShown && isNotScrolledPast) {sliderimage.classList.add('active');} else {sliderimage.classList.remove('active');}});}window.addEventListener('scroll', checkSlide);</script>

css逻辑：
第一步：清空掉系统默认的外内边距.
第二步;文档的背景颜色为background: #ffc600
第三步;max-width: 700px;代表宽度最宽不能超过700px.不写高度代表随意.高度随意.
第四步;图片左浮动右浮动.
第五步：图片过渡效果: transition: all .5s;
第六步;
代表图片是先在-30%地方，在.active的情况下0%。

*{padding: 0px;margin: 0px;}html{background: #ffc600;}.site-wrap{max-width: 700px;margin: 100px auto;background: white;padding: 40px;text-align: justify;}.align-left{float: left;margin-right: 20px;}.align-right {float: right;margin-left: 20px;}
.slide-in {/*opacity: 0;*/transition: all .5s;}.align-left.slide-in {transform: translateX(-30%) scale(0.95);}.align-right.slide-in {transform: translateX(30%) scale(0.95);}.slide-in.active {opacity: 1;transform: translateX(0%) scale(1);}

html部分：

<div class="site-wrap"><h1>Slide in on Scroll</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis teneturest. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magniillo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandaesed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiamaut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis teneturest. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magniillo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandaesed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiamaut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis teneturest. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magniillo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandaesed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiamaut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p><p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidemdolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad temporain aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p><p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis autasperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores suntesse magni, ut, dignissimos.</p><p>Adipisicing elit. Tempore tempora rerum..</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a quilibero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quaslaborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a quilibero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quaslaborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a quilibero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quaslaborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p><img src="http://unsplash.it/400/400" class="align-left slide-in"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis teneturest. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magniillo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandaesed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiamaut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis teneturest. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magniillo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandaesed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiamaut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis teneturest. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magniillo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandaesed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiamaut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p><!-- <img src="http://unsplash.it/400/401" class="align-right slide-in"> --><p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam,illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribusvoluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita,ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum doloreitaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestiasfacilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptatescum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullambeatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem!Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimusmodi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa?Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animisoluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optioaccusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis nequefugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumquesuscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sintquidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique,voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur idvelit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptatedoloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.</p><!-- <img src="http://unsplash.it/200/500" class="align-left slide-in"> --><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor veroplaceat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia veroperferendis, deserunt et incidunt eveniet  temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deseruntlaudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quosdistinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimusatque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibusaliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosamest, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa quirem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p><img src="http://unsplash.it/200/200" class="align-right slide-in"> <p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderitratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hicquidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpadebitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunteligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet,provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilisiusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibusdistinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quasodio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptatesaepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facereducimus accusantium eos veritatis neque.</p><!-- <img src="http://unsplash.it/400/400" class="align-right slide-in"> --><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor veroplaceat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia veroperferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore!Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis laboreiste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium,rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A velnon incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expeditain, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi.Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita,laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumendanatus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimosdolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porrosaepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo,ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendusquia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maioresquis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam,quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Temporenon magnam, amet, facere ducimus accusantium eos veritatis neque.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor veroplaceat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia veroperferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore!Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis laboreiste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium,rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A velnon incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expeditain, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi.Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita,laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumendanatus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimosdolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porrosaepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo,ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendusquia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maioresquis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam,quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Temporenon magnam, amet, facere ducimus accusantium eos veritatis neque.</p></div>

js的图片渐渐入渐渐出的效果(html逻辑 css逻辑 js逻辑))相关推荐

在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
js源生实现图片点击弹出放大效果
参考https://blog.csdn.net/qq_36375934/article/details/78952485 的弹出框查看大图,同时总结自己遇到的问题,做个笔记 HTML代码 <!D ...
【JS动态效果】如何jquery实现div右侧滑入滑出的效果
二话不多说,先看效果哈,这样才能吸引你那双有故事的双眸: 下面就针对这个效果我们做一个核心技术的介绍: 首先我们用到的核心知识点为:jquery的animate函数,其中滑出来和滑进去的缓慢效果是利用 ...
微信小程序-实现元素渐入渐出动画效果-封装方法
开端之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只 ...
js实现图片滚动以及点击切换效果
js可以实现多张图片自动滚动的效果,且鼠标移上去则会停止移动,鼠标移开则会继续滚动,点击滚动中的某一张图片则会实现从另外一个地方显示(放大,且鼠标移上去会放大)的效果. 点击链接查看效果:http:/ ...
fullpage.js 滑入滑出滚屏动画, 纯css方式。利用css权重,无需js操作dom
**完整案例在下方** 1.分析如下图所示, 一共8屏, 当前在第2屏上,fullpage.js 会在当前可视屏的最外层div上,插入一个active的class,根据框架添加外层的active动态 ...
VUE.JS 实现图片随鼠标变换的动画效果
先来看演示效果首先我们设置一个这样的图片样式 <template><div class="login100-pic"><img src=" ...
css上滑事件,css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
用AR.js做图片追踪的webAR Demo
用AR.js做图片追踪的webAR Demo Demo效果项目地址部署使用页面代码替换想要追踪的图片 (1)web版(推荐使用) (2)node版替换模型 Demo效果可在手机浏览器中打开 ...

js的图片渐渐入渐渐出的效果(html逻辑 css逻辑 js逻辑))

js的图片渐渐入渐渐出的效果(html逻辑 css逻辑 js逻辑))相关推荐

最新文章

热门文章