jQuery，CSS3或HTML5过渡？

当您点击主菜单链接时，这个网站会进行什么样的过渡（如果是过渡）？jQuery，CSS3或HTML5过渡？

http://ivalladare7.wix.com/testepi#!home/mainPage

这只是一个测试，但我认为这个想法是清楚的。是HTML5，CSS还是jQuery/JavaScript？

我在几个地方看到它，但我不知道如何实现它，因为我不知道如何找到一个示例。

任何帮助赞赏

来源

2012-10-18 nachovall

它是在互联网上，你可以看看源。 –

CSS3和新的JavaScript API是HTML5的一部分，它们不是分开的。我不认为你明白HTML5是什么，我建议你阅读这个简介http://www.html5rocks.com/en/why – BBog

@BBog你是对的。我会看看你的链接。谢谢。 – nachovall

这似乎是一个CSS过渡。

如果你看到的规则：

.wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1 { 
-webkit-transition: color 0.4s ease 0s; 
}

但你可以得到的东西在好：http://css3generator.com/

选择过渡和使用该工具。它会帮助你获得更多的跨浏览器。

来源

2012-10-18 10:41:48 goncaloGomes

这是一个CSS过渡（而不是一个很好的，因为它只是webkit）。与供应商前缀更好的版本将是：

.menu a { 
    color: #999; 
      transition: color 0.4s ease; /* vendorless fallback */ 
     -o-transition: color 0.4s ease; /* opera */ 
     -ms-transition: color 0.4s ease; /* IE 10 */ 
     -moz-transition: color 0.4s ease; /* Firefox */ 
    -webkit-transition: color 0.4s ease; /*safari and chrome */ 
} 

.menu a:hover { 
    color: #340065; 
}

如果您的意思是滑动内容，那就是Javascript。

来源

2012-10-18 10:42:50 SpaceBeers

其实，坚持下去，你的意思是内容下降或颜色褪色？ – SpaceBeers

HTML结构看起来有点让人望而生畏。我不确定你的意思是哪个转换（？），但我认为这是滑动内容，当我们点击菜单。

起初我怀疑它是某种Javascript（很可能是jQuery），因为它在地址栏中添加了网站URL的路径。然后我尝试查看源代码（使用Chrome的检查元素），并发现菜单上没有<a>元素。我只发现这一点：

<p skinpart="label" class="wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1-label" style="line-height: 25px; width: auto; ">Articles&nbsp;&amp;&nbsp;Videos</p>

然后为了确保它，我在浏览器上禁用Javascript。滑动内容停止工作。所以，是的，这是Javascript。

编辑：

事实上，如果你试图查看源代码（按Ctrl + U）直接，你会发现一堆的Javascript线。如果你尝试Ctrl + F文本Home，你会发现它在Javascript的行内。所以这确实是一个JS。

来源

2012-10-18 10:48:31 deathlock

是的，我的意思是滑动内容。对不起，如果我不清楚。我同意它的JavaScript，但什么。我不想要完全相同的解决方案，并且只需说明如何滑动内容。我认为这是一个非常酷的效果。 – nachovall

我认为这来自用于制作Flash网站的网站构建器（Wix）。代码是疯狂的。 – SpaceBeers

绝对是一个网站建设者，当代码是令人畏惧的...顺便说一句，@ nachovall，这不完全一样，但我想它有点类似：http://www.queness.com/resources/html /scroll/vertical.html教程位于：http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery – deathlock

本网站简单的转换是用css3转换完成的。然而，内容转换的滑动是用TweenMax（Greensock）制作的

这是一个轻量级的脚本，它可以与jQuery或vanilla js专门用于补间/动画制作。

结帐他们的演示（与使用GreenSock动画）

https://greensock.com/jump-start-js

来源

2017-07-27 10:40:42 Benidorm

jQuery，CSS3或HTML5过渡？

回答

相关问题