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過渡？

回答

相關問題