个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试在 CSS 或 JS 中创建类似于此的动画:http://oshinewptheme.com/v29/
因此，当用户向下滚动到图像时，它会稍微上升并淡入。我为此创建了基本结构:
<body>
<div class="gallery" align="center">
<img src="1.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="8.jpg">
<img src="9.jpg">
</div>
</body>
.gallery{
align-content: center;
margin-left: 200px;
margin-right: 200px;
margin-top: 500px;
}
我不确定如何让动画工作，如果你有任何想法，这将是很棒的元素:https://codepen.io/Hamzaw_GD/pen/zRQxZo
提前非常感谢您，我只有 13 岁，非常渴望找到解决方案，所以请耐心等待。
最佳答案
其他答案涉及悬停叠加层或一般动画，但我认为您对让图像淡入并在向下滚动时向上移动特别感兴趣。
这就是诀窍。我评论过JS。当心，它使用 jquery。如果您有任何问题，请告诉我。
$('.gallery img').addClass('hidden');
$(window).on('scroll', function(){
// Get the vertical offset of the first gallery image that is hidden.
var p = $('.gallery .hidden').offset();
p = p.top;
// Check for the current scroll position.
var s = $('body').scrollTop();
// Get the height of the window.
var h = $(window).height();
// Just logging the results for better understanding.
console.clear();
console.log(s + h, p);
// Triggering the fade in when the image is partially reached by scrolling (in this case 100px)
if((s + h) >= p) {
// Find the first element within <gallery> that has the class 'hidden'. Then fade it in by adding the class 'fadeIn' and removing the class 'hidden' so it is taken out of the rotation.
$('.gallery').find('.hidden').first().addClass('fadeIn').removeClass('hidden');
}
else {}
});.gallery {
margin-left: auto;
margin-right:auto;
margin-top:100vh;
max-width:600px;
position:relative;
}
.gallery__help {
text-align:center;
transform: translateY(-50vh);
}
.gallery img {
opacity:0;
max-width:600px;
}
.hidden {
transform: translateY(100px);
}
.fadeIn {
opacity:1 !important;
transform: translateY(0);
-webkit-transition: all 2s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
<p class="gallery__help">Please Scroll Down</p>
<img src="https://media.springernature.com/full/nature-static/assets/v1/image-assets/531S56a-i1.jpg">
<img src="http://www.samoaobserver.ws/images/cache/600x400/crop/images%7Ccms-image-000009332.jpg">
<img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg">
<img src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/4037855/300/200/m2/fpc/wm0/ofj73imzdnhtoxcvlmowaxbdmbbtf2yixqwhacy3wwsjctvxybw0ggbjs9y7hr1h-.jpg?1519205483&s=10ea078a417885590d11783ca8a43b52">
<img src="https://lucysmagazine.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-01-at-8.58.36-AM.jpg">
<img src="http://img.fotocommunity.com/alte-hoehenburg-9eebdd0f-f85d-40d7-9944-c15672ca0242.jpg?height=400">
</div>关于javascript - 向上滑动并淡入淡出动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49096625/
24
4
0
这是在我的 MainActivity 中用作 BroadcastReceiver 的代码 mRegistrationBroadcastReceiver = new BroadcastRecei
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我想在大部分时间隐藏 UISearchBar，只在用户需要时调用它来显示。 我在 Interface Builder 中放置了一个 UISearchBar 并将其隐藏在 View 后面，当用户单击按钮
我有一个包含 CCMenuItemImage 的菜单(“myMenu”)。我希望此菜单能够检测手指滑动并相应地滑动。 我的问题是 CCMenuItemImage 似乎吸收了触摸事件。当用户触摸 CCM
我正在寻找一个简单的 jQuery 或 Javascript 解决方案，以使导航侧边栏在用户向下滚动页面时顺利跟随用户。像这里一样:http://ucon-acrobatics.com/shop/ 任
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
我想将 String 行标记化为标记(存储到 String 表中)，并且我只能使用 java.io.*它是为了实现一个计算器。 例如:第一行:1+2+3第二行:1+ 2*3(标记之间有空格) 进入表{
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
我有一个导航栏，当单击菜单图标时，它将滑入“#secondary-nav”并隐藏“#primary-nav”。然而 jquery 似乎没有显示“#secondary-menu”。下面提供的是 HTMl
这个问题已经有答案了: how to make a sliding up panel like the Google Maps app? (2 个回答) 已关闭 7 年前。 我正在寻找类似的实现，如下
我有 ViewPager(Slide) 和 3 张图片。共有三个图像是通过 Internet 下载的。如果我将图片换到服务器上的另一台服务器上，链接保持不变，但应用程序中的图片没有改变，仍然是缓存中的
我在 gridview 中创建了两个按钮。 我想达到以下目的，但不知道应该用什么方法？ 首先我触摸第一个按钮，将显示 toast 1 msg。通过将我的手指滑到第二个按钮而不抬起我的手指，将显示 to
所以我设置了一个小的 jquery 动画，用户将鼠标悬停在容器上一段时间，这会导致容器 split ，然后显示内部信息。 我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动
这个问题在这里已经有了答案: Simulate swipe with mouse in javascript (5 个答案) 关闭 7 年前。
我希望我的 Sprite 像在冰上一样滑动。因此，如果他在地面上，那么他可以正常行走，但当他接触冰时，他会滑动，直到有东西阻止他。有谁知道如何才能做到这一点？谢谢 最佳答案 像“Sprite Move
我的代码有几个问题:HTML: Bellevue
我正在尝试实现从 fragment1 过渡到 fragment2 的滑动动画。我正在使用 setCustomAnimations 方法。而且我知道我需要使用框架方法来替换 fragment 。 我的代
我不知道你们是否听说过 app chomp，但应用程序中有一个布局，如下图所示。我想知道他们是如何设置的，我将如何使用它来为我自己的应用程序制作类似的东西。有趣的是，当你滑动时，没有像水平 Scrol
我想检测用户何时在一个单元格占据整个屏幕宽度的 collectionView 中向左或向右滑动。是否可以不添加手势识别器。我试过添加手势识别器，但只有当我们将 collectionView 的 scr
我正在尝试开发一个应用程序来复制类似 tinder 的基于滑动的提要。该应用程序的想法与火种非常相似，也具有向右滑动和向左滑动匹配功能。 到目前为止我做了什么-我在 MongoDB 中创建了一个刷卡集
我是一名优秀的程序员,十分优秀！