延迟出现在滚动条上
Delay appearance on scroll
我正在尝试实现与此网站类似的效果:http://pollenlondon.com/antiques-boutiques/
我得到了视差效果,但我不知道如何稍微延迟内容的显示。我正在寻找一个不依赖插件的解决方案,比如 skrollr。
fiddle: http://jsfiddle.net/1kj1j63o/4/
HTML
<section class="module content">
<div class="wrapper">
<h2>Some text</h2>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</section>
<section class="module parallax parallax-1">
<div class="wrapper">
</div><!-- /.wrapper -->
</section>
<section class="module content">
<div class="wrapper">
<h2>This part is supposed to show up with an effect</h2>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</section>
CSS
section.module.content {
padding: 100px 0 50px 0;
min-height: 600px;
font-family: Arial;
}
section.module.content.parallax {
height: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.content.parallax-1 {
margin-top: 300px;
height: 700px;
background-image: url('https://ununsplash.imgix.net/uploads/141319062591093cefc09/ad50c1f0?q=75&fm=jpg&s=a356dd61ff3da2269124bcd12a303b7e');
}
.wrapper-effect {
display: none;
}
jquery
$(function(){
$('.wrapper-effect').scrollTop(300px).css("display":"block");
});
我对此很陌生,非常乐意提供任何帮助!!
看看这个网站:http://www.justinaguilar.com/animations/scrolling.html
以下是来自该站点的关于如何在滚动时为对象设置动画的说明:
将 jQuery 添加到您网页的 <head>
元素:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
在 </body>
标记之前添加此内容以在用户滚动到元素时触发动画:
<script>
$(window).scroll(function() {
$('.wrapper').each(function(){
var pos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (pos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
将 .wrapper
替换为您想要设置动画的元素的 ID 或 class。
用动画替换 slideUp class.
400 表示元素和屏幕顶部之间的 space。当元素距离屏幕顶部 400 像素时动画激活。增加这个数字可以使动画更快地激活。
这是 slideUp class(也来自该网站):
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
Fiddle: http://jsfiddle.net/g5gjwm3v/(为简单起见,此示例使用计时器而不是滚动)
我正在尝试实现与此网站类似的效果:http://pollenlondon.com/antiques-boutiques/
我得到了视差效果,但我不知道如何稍微延迟内容的显示。我正在寻找一个不依赖插件的解决方案,比如 skrollr。
fiddle: http://jsfiddle.net/1kj1j63o/4/
HTML
<section class="module content">
<div class="wrapper">
<h2>Some text</h2>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</section>
<section class="module parallax parallax-1">
<div class="wrapper">
</div><!-- /.wrapper -->
</section>
<section class="module content">
<div class="wrapper">
<h2>This part is supposed to show up with an effect</h2>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</section>
CSS
section.module.content {
padding: 100px 0 50px 0;
min-height: 600px;
font-family: Arial;
}
section.module.content.parallax {
height: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.content.parallax-1 {
margin-top: 300px;
height: 700px;
background-image: url('https://ununsplash.imgix.net/uploads/141319062591093cefc09/ad50c1f0?q=75&fm=jpg&s=a356dd61ff3da2269124bcd12a303b7e');
}
.wrapper-effect {
display: none;
}
jquery
$(function(){
$('.wrapper-effect').scrollTop(300px).css("display":"block");
});
我对此很陌生,非常乐意提供任何帮助!!
看看这个网站:http://www.justinaguilar.com/animations/scrolling.html
以下是来自该站点的关于如何在滚动时为对象设置动画的说明:
将 jQuery 添加到您网页的 <head>
元素:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
在 </body>
标记之前添加此内容以在用户滚动到元素时触发动画:
<script>
$(window).scroll(function() {
$('.wrapper').each(function(){
var pos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (pos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
将 .wrapper
替换为您想要设置动画的元素的 ID 或 class。
用动画替换 slideUp class.
400 表示元素和屏幕顶部之间的 space。当元素距离屏幕顶部 400 像素时动画激活。增加这个数字可以使动画更快地激活。
这是 slideUp class(也来自该网站):
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
Fiddle: http://jsfiddle.net/g5gjwm3v/(为简单起见,此示例使用计时器而不是滚动)