他们在横幅和标题中使用了什么样的转换？

-1

你打电话给他们在这个网站使用的过渡？他们在横幅和标题中使用了什么样的转换？

Please loo at this site

enter image description here

谢谢！

来源

2017-10-05 Delthon_20

这只是一个淡出和视差效果（在文字上） – mrid

在哪里我可以找到它的教程？ –

检查了这一点：http://www.jqueryscript.net/animation/Simple-jQuery-Plugin-For-Background-Parallax-Scrolling-Effect-Fallings.html的视差。和淡入淡出，你不需要一个库，只是淡出滚动文本 – mrid

他们只是听滚动事件，并更改标题容器元素的position和opacity。您可以打开检查元素，看看到底发生了什么。 translate(x, x)和opacity属性正在更改。

来源

2017-10-05 07:28:00 jmosawy

这是正确的答案 – Hamzaouiii

@Hamzaouiii这对初学者没有意识到视差和要求教程 – godblessstrawberry

初学者没有帮助，问题是他们在做什么来实现这一转变。 jimosawy说的答案是他们听滚动事件并相应地改变标题的位置和不透明度。 – Hamzaouiii

它被称为视差。你可以找到简单的W3Schools的教程下方

https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

也这可以通过各种JS库来实现

来源

2017-10-05 07:30:36 godblessstrawberry

软滚动图像如何？ –

纯CSS一个简单的视差效果

html, 
 
body { 
 
    min-height:100%; 
 
    min-width:100%; 
 
    height: 100%; 
 
    padding:0; 
 
    margin:0; 
 
    text-align:center; 
 
    font-family: Arial; 
 
} 
 

 
.background { 
 
    width: 100%; 
 
    min-height: 100%; 
 
    background-size: contain; 
 
    background-position: center center; 
 
    background-attachment: fixed; 
 
} 
 

 
.background > div { 
 
    background-color: #000000; 
 
    color: #ffffff; 
 
    padding: 30px 0; 
 
} 
 

 
.background1 { 
 
    background-image: url(http://placehold.it/800x450&text=Background1); 
 
} 
 

 
.background2 { 
 
    background-image: url(http://placehold.it/800x450&text=Background2); 
 
} 
 
.background3 { 
 
    background-image: url(http://placehold.it/800x450&text=Background3); 
 
}

<div class="background background1"> 
 
    <div>Some content</div> 
 
</div> 
 
<div class="background background2"> 
 
    <div>A Second Page</div> 
 
</div> 
 
<div class="background background3"> 
 
    <div>A Third Page</div> 
 
</div>

来源

2017-10-05 07:33:14 mrid

他们在横幅和标题中使用了什么样的转换？

回答

相关问题