無縫滾動 HTML5

是一個無縫輪播效果，當輪播到最后一組圖片的時候又讓他變到第一張讓他走，其實這是讓兩組一模一樣的圖片做成做成這個效果的，給人以一種錯覺，這些圖片你自己可以隨便從哪里找一些。也可以換成女朋友的照片哦，這樣也會有動力，其實H5還是有很多好玩的。其實這個還是有很多方法能實現這個的，可以用原生JS來試試做。我覺得原生JS是非常重要的在H5中。

原生JS我是剛剛接觸，還是有很多不會，如果大家有什么好的創意，好的想法可以拿出來大家一起分享，大家共同進步。我不是大神，我只是一個剛開始摸索H5的一個爬行者。如果有什么不好的地方大家請多多見諒。

其實昨天那顆心如果配合JS來做我覺得效果會更震撼，不需要借助鼠標的滑動，而是讓他自己來進行360度的旋轉，然后在他慢慢旋轉的過程中那個盒子的蓋會慢慢的打開，里面那顆心也會隨著蓋子的打開緩緩的升起來，不需要借助外力。我正在思考，如果有大神會的話，求請教。

代瀏覽器都內置了專用動畫技術，Martin G?rner為您展現四種最棒的實例。

現代移動操作系統將用戶接口動畫化，并已達到了電腦端交互的標準——精選流暢的動畫，體現出沉浸效果以及支持直觀的交互。我們都想當然的認為，可以設置一個列表，使之帶有運動特性，用手指輕輕一推，它就如同有重量和慣性一樣運動起來，直到遇到邊緣再反彈回來一點。但是，在網絡上，我們還達不到這樣的效果。

接受事實吧，現有網上的動畫經常被視作UI災難，還在使用二十年前陳舊的<blink>標簽技術。加入Flash有點幫助，不過它缺乏HTML DOM集成，都變成了不美觀的800×600分辨率，并且JavaScript DOM操作還有其標志性的5幀/秒（fps）動畫率——真是絕望啊！

改變

2013年，現代瀏覽器內置了專用動畫技術，達到60 fps。是時候去忘掉過去，開始構建美妙的UI動畫體驗了。我將展示四個動畫技術，幫助你決定，哪一個更適合你的項目。

CSS3動畫——3D

讓我們從最簡單的聲明式技術開始：CSS3。這里不需要JavaScript，存CSS，加上一點現代手段。

CSS通過兩種基本屬性來聲明動畫：過渡和動畫。過渡屬性通知瀏覽器計算兩種狀態（由各自CSS定義）間的中間幀。動畫通過改變元素CSS觸發。比如，當你以編程方式改變它的層，或啟動一個:hover CSS。

當縮略圖層從開始轉變到結束，圖像則從一處平滑的移動到另一處，典型的表現為JavaScript DOM動作的結果。

img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }

動畫屬性最常用于持續運行的動畫特效，它還允許自定義中間步驟的動畫。

創建一個旋轉的圖像：

img {-webkit-animation: myAnim 3s infinite; }@-webkit-keyframes myAnim{ from {-webkit-transform: rotate(0deg) } 50% {/* possible intermediate positions at any % */} to {-webkit-transform: rotate(360deg) }}

利用大量CSS屬性制作動畫具有無限的創造性，你可以根據意圖在邊框寬度內任意創建動畫。不過，大多數對動畫有用的屬性都是幾何變換和不透明的。CSS3通過易操作的轉換屬性提供了全系列二維幾何變換：平移、旋轉、縮放和歪斜。

用旋轉、縮放和歪斜創建2D轉換：

webkit-transform：旋轉30度
webkit-transform：縮小50%
webkit-transform：歪斜-20度，再20度

接下來變得有趣了。如果你覺得在CSS中添加3D效果，技術上是為了粗體和斜體的設計，這很愚蠢，請接著閱讀。通過擴展幾何轉換到三維圖像將是一個很自然的方式，相同變換屬性還可以做平移X，Y，Z軸以及旋轉X，Y，Z軸。

3D旋轉圖像：

webkit-transform：Y軸旋轉45度

再加上點拋出動畫效果，看上去就像是一個旋轉的三維立方體。

如果確實這般容易的話，就不會有任何趣味性了。設計師留了一點懸念，你可以試一下，只對一個圖像進行旋轉，瀏覽器默認渲染出來的效果是不帶透視性的：

webkit-transform：Y軸旋轉45度

可以添加上透明屬性，默認是無窮大極限值也是不帶有一點透明效果的。就如同靠近鏡頭的對象與很遠距離外的對象看上去大小一樣。

為了確保圖像看上去更真實，你還需要指定一個鏡頭與屏幕之間距離的值。加上-webkitperspective: 1000px就可以了。

一點數學問題：什么是透視性？

要在一塊平面屏幕上呈現一個3D對象，首先畫出一條線連接眼鏡或相機與3D物理上的點。這條線與屏幕的交集就是相應像素所在的位置。為了找到像素在屏幕上的坐標，利用泰勒斯定理，你需要空間中點的3D坐標和相機與屏幕之間的距離（f在光學中也被稱為焦距）。這就是視角屬性提供的距離。如果這個距離是無限遠的，你可以看到所有射線（眼球到3D點線）是水平緊密狀的，而且很遠很遠的對象在屏幕上的大小一樣。

現在我們有設置一個3D立方體的所有基礎了，利用六個圖像以及CSS 3D轉換，接下來就可以實現旋轉了。

旋轉

這一步很簡單：我們把一個三維旋轉封裝到一個div，將會產生如下效果：

瀏覽器執行你讓它所做的步驟：在div渲染一個三維立方體，然后像一張平面圖片般在自身運用3D旋轉。這是默認效果，雖然不是你想要的。你要告訴瀏覽器運用嵌套div來構成3D轉換，-webkit-transform-style: preserve-3d屬性。通過這個，我們就能得到想要的旋轉立方體了。

準確獲取

很容易在空間失去定位。我的建議是采用一個div，命名為SCENE。這就是透明屬性存放的位置。在內部，放置一個命名為OBJECT的div，它應當擁有transform-style: preserve-3d屬性，并且該div就是你應用轉換移動整個對象的地方。最后，在該div內部，使用3D轉換設置你想要的正面圖像，創建所需對象。在我們的例子中，立方體的六個面：

.SCENE { -webkit-perspective: 1000px; }.OBJECT{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(20deg rotateY(120deg) rotateZ(50deg); /* replace this with an animation property if you want movement */}.FACE1 { -webkit-transform:translateX(150px)rotateY(90deg);}...

關于3D CSS轉換很棒的一點是CSS動畫和過渡的完美結合。我們在這留了一個練習，讓旋轉立方體運動起來，當鼠標光標懸停其上時，立方體自動打開來。操作方法是：把立方體的面移動到與中心一定距離的地方。第二組CSS屬性有一個 :hover選擇器，將立方體的面放置在更遠的距離。通過運用第一種轉換屬性，你將看到立方體從中心盤旋打開，同時還保持旋轉（演示）。

可縮放的矢量圖像（SVG）

HTML與CSS都是強大的動畫技術，但缺乏繪圖基元。SVG能夠彌補這點，并擁有其獨特的動畫標簽。SVG動畫部分被特定稱為同步多媒體集成語言（SMIL）。

首先，SVG是用于矢量基元的，比如矩形、圓形和貝塞爾曲線：

同樣可用于：

其中一個基元，<path>標簽，是SVG中最好用的。它允許你使用直線、弧和貝塞爾曲線定義任意路徑。路徑定義看上去想一個字母，如同Inkscape矢量圖形軟件生成的。對于SVG動畫，你應該理解這一點。

一個二次和三次貝塞爾曲線的例子：

語法：

M x,y ? ? 新的起點 (標記)

L x,y ? ? ?到哪里的直線

Q cx, cy, x, y ?二次貝塞爾曲線到 (x,y)和一個控制點

C cx,cy, dx,dy, x,y 三次貝塞爾曲線到(x, y)和兩個控制點

A ? ? ? 橢圓弧

z ? ? ? 字符串最后，用于結束路徑

讓我們把這些矢量變得更生動化。你可以查看演示，一個家伙踏著滑板翱翔于白云間。

沖浪板上下擺動，小人的嘴巴在大和更大的笑容間交替變化，眼睛滾動，瞳孔擴張。這是SVG動畫四種可能的類型。

最簡單的一種SVG動畫運用<animate>標簽，改變一種幾何形狀的一個參數，在本例中，就是眼睛的半徑。

要使瞳孔擴張，需要改變屬性列表值中的半徑值。

方便的是變化的屬性還可以成為<path>標簽。允許你創建一個動畫路徑。唯一的限制是兩個曲線之間要進行轉換，必須是同一種類型且擁有相同數量的控制點。它們必須由相同位置上的同一個字母定義，唯一不同的只能是參數的改變。當移動小人的嘴巴時，只有“微笑”和“大笑”位置被定義了。SVG動畫將完成插值。

當然，SVG還能進行幾何變換，也能做成動畫。這里的動畫標簽是<animate Transform>。你必須告訴它想要將哪里的轉變做成動畫，還要提供一個分號分隔的所有關鍵位置的值列表。還可以組成動畫轉換，你告訴瀏覽器使用additive=”sum” 屬性。

幾何轉換的動畫：

第三個和最后一個SVG動畫標簽也很有用。<animateMotion>用來引導對象沿著特定路徑運動。它有一個隱藏的技巧稱為rotate=”auto”屬性。它讓對象不僅能夠遵循指定路徑，同時自身保持朝前，如同路上行駛的車輛一樣。

SMIL有大量控制動畫特征。在它的JavaScript API中揭露pauseAnimations(), unpauseAnimations()和setCurrentTime(t) 函數在全局性開始/停止/暫停一個動畫的功能。還在所有三種動畫標簽(<animate>, <animateTransform>, <animateMotion>)上指定了begin與end屬性。它們可以利用一個事件節點/用戶事件/動畫事件的強大組合。你可以指定，動畫在點擊之后的一秒結束或開始。

例如，下面這個SVG按鈕被點擊后有一個移動的陰影效果：

HTML5繪圖

由聲明性動畫轉換到編程性動畫技術，<canvas>標簽是你的第一選擇。本文所提到的所有技術中，<canvas>標簽最具有跨瀏覽器支持，瀏覽器廠商做了很多努力使之兼容60fps動畫，以下是設置一個畫布的方法：

第一個尺寸（標簽屬性）設置了畫布的分辨率，這就是你所使用的坐標空間。第二個尺寸（CSS屬性）是畫布出現在屏幕上的形狀大小。為什么不把畫布物理尺寸設置到100%分辨率，內部坐標空間不變，瀏覽器為任意窗口都能正確渲染圖畫？非常遺憾，瀏覽器將畫布內容作為點陣圖來掃描的，任何擴大范圍的結果都將導致模糊混亂的像素。于是，把這兩個值設置成相同的值是唯一可行的選項。

初始化畫布需要JavaScript中<canvas>元素，并在其上調用getContext('2d')函數。獲得的圖畫內容對象被用來調用到畫布API。內容是狀態性的，存儲三種不同的狀態信息：繪畫風格，即時幾何轉換以及累計繪圖路徑。在畫布上進行繪畫的方法是發布繪圖指令，不產生任何可見內容，但在內存中已創建了一個路徑，然后發布一個油墨指令（ctx.stroke(), ctx.fill() 或兩者皆有），就能顯示出路徑了。

逐幀動畫

畫布動畫需要設置一個動畫循環，你應當基于requestAnimationFrame()函數（帶有正確的前綴）。該函數使瀏覽器能夠管理幀率，在瀏覽器選項卡隱藏時也能停止動畫。

function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}

一般來說，畫布被用于動畫的時候，對象的位置必須是在逐幀的基礎上才行，這是因為它們都是物理仿真的結果。觀看box2dweb.js教程。仿真不斷改變仿真世界中對象的位置，動畫循環周期性的在屏幕上展現當前環境狀態。

畫布SVG精靈

在畫布動畫中使用SVG精靈是一種很有用的技巧。一個任意復雜性的靜態矢量圖片在畫布上呈現都是繁瑣的，這樣做實際上可行，雖然不如發送一個.svg到 ctx.drawImage()簡單。出于模糊安全的原因，只有內聯SVG支持，你必須在Blob API中使用它（代碼）。

SVG精靈能夠以任意比例展示其矢量美態，但遺憾的是，只支持Chrome瀏覽器。

使用WebGL

WebGL暴露瀏覽器運行的JavaScript應用程序OpenGL API，而不需要任何插件。理論上講，你只需要在<canvas> 元素上調用getContext(‘webgl’)（而不是之前的2d）就可以了。然而，WebGL非常大，并且API等級低。最重要的是，web版本沒有默認的渲染路徑，這意味著你無法給它一個形狀，讓它使用適合的默認值展示出來。所以你必須編寫著色器，使用GLSL語言編寫屏幕上出現的任何內容。

幸運的是我們有Three.js幫助。Three最初是由Mr.doob開發的庫，用于一些Chrome演示（www.ro.me/www.chaostoperfection.com），但它是相對獨立的。它擁有所有的基礎，以及內置獨特的著色器，你就可以專注于其他有用的方面：相機、燈光、行動。

首先要做的是編寫Three粘合代碼（很簡單）：

var renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColorHex(0x000000, 0); // color,transparency// the renderer creates a canvas elementfor youdocument.whereeveryouwant.appendChild(renderer.domElement);

在lights和action之前，需創建camera和位置：

// arguments: FOV,viewAspectRatio, zNear, zFarvar camera = new THREE.PerspectiveCamera(35,width/height, 1, 10000);camera.position.z = 300;

然后是light：

var light = new THREE.DirectionalLight(0xffffff, 1);//color, intensitylight.position.set(1, 1, 0.3); // direction

我們試著呈現一個立方體吧，3D對象在Three中被稱為網絡，都由一個幾何體和一個材料構成。

我們使用一個簡單的結構：

var texture = THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube = new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );

最后添加內容，稱為渲染函數。

var scene = new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);

這將為我們的立方體產生一個靜態圖像，為了讓它動起來，我們包裹渲染召集一個動畫循環，改變立方體在每一幀的位置。

function runAnimation(t){ // animate your objects depending on time cube.rotation.y = t/1000; cube.position.x = ... renderer.render(scene, camera); // display requestAnimationFrame(runAnimation); // and loop}

推薦使用三維建模軟件例如Sketchup。Three識別幾類3D模型結構，包括COLLADA（.dae）具有廣泛行業支撐。下面是如何在Three中加載一個模型：

var loader = new THREE.ColladaLoader();loader.load("Android.dae", function(collada){ var model = collada.scene; model.position = ...; // x, y, z model.rotation = ...; // x, y, z scene.add(model);} );

再做一些努力，更換機器人外觀花式，Three提供蘭伯特和馮氏照明風格，法線貼圖，凹凸貼圖，環境映射以及更多。

還可以使機器人運動起來，具體步驟參考教程。

原文鏈接：http://www.gbtags.com/gb/share/2124.htm

好程序員web前端學習路線分享滾動穿透方法，這篇文章主要介紹Html5滾動穿透的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著一起學習學習吧。

網站需要在移動端完成適配,針對移動端H5以及web端采用的都是bluma這種flex布局解決方案

在H5中使用的列表采用的是react-virtualized 來繪制表格

為了展示表格中單行數據的具體詳情，通常的解決方案是采用新頁面或者是彈窗來完成。

這里采用的是彈窗的方案，點擊單行數據后的數據詳情用的是bluma的modal-card。

在點擊單行數據后，彈窗顯示詳情數據，整個modal-card設置成position:fixed;

沒有footer部分，設置modal-card的高度為整個屏幕的高度：100vh

表現：

1、在chrome瀏覽器中顯示，整個modal-card占滿整個屏幕

2、在手機端顯示也是占滿，但是問題是，根據手勢移動，會將瀏覽器的搜索框部分往上頂，此時彈窗下面的數據列表頁能夠進行滑動，之后彈窗的標題覆蓋瀏覽器原搜索框部分，但這之間有延遲，能清晰看到下面頁面的數據

3、在其他手-機上會有另外一種顯示，如果滑動速度比較快，彈窗出現后立即滑動，就會看到在彈窗的底部就會出現一個小的空白，同樣彈窗下面的頁面能夠滾動，并且有明顯延遲和數據滾動顯示。

解決方案：

modal-card 自身解決方案：

JS + CSS overflow:hidden

通過JS動態給彈窗下面的頁面html添加css類

if ($modalButtons.length > 0) {
 $modalButtons.forEach(function ($el) {
 $el.addEventListener('click', function () {
 var target = $el.dataset.target;
 openModal(target);
 });
 });
}
 
function openModal(target) {
 var $target = document.getElementById(target);
 rootEl.classList.add('is-clipped');
 $target.classList.add('is-active');
}

通過 overflow:hidden 來禁止頁面的滾動

is-clipped {
 overflow:hidden!important
}

當彈窗關閉時，通過JS刪除掉頁面的 css 類：is-clipped

function closeModals() {
 rootEl.classList.remove('is-clipped');
 $modals.forEach(function ($el) {
 $el.classList.remove('is-active');
 });
}

但是這種方案在應用中測試過后，發現并不能解決問題，上面的問題還是出現

position:fixed 方案

JS + CSS Position:fixed + scrollTop

方案思路：

1. 彈窗時，將html的position 設置為 fixed，將彈窗關閉后，將html的postion 屬性取消。

2. 因為列表頁會出現滾動的情況，而點擊的行有可能是在滾動發生后，所以需要計算html頁面本身的scrollTop 值。

3. 因為彈窗時設置position為fixed后，html頁面的 scrollTop 值會變成0，會回到頁面頂部，所以在關閉彈窗后，需要手動設置html頁面的scrollTop 值，讓其滾動到html頁面原來的位置。

4. 對于兼容性，需要設置不同屬性的 scrollTop 值

彈窗之前：

const scrollTop = global.document.documentElement.scrollTop || global.pageYOffset || global.document.body.scrollTop;
global.document.documentElement.style.position = 'fixed';
this.scrollTop = scrollTop;

關閉彈窗：

在線咨詢

上一篇：html+css寫出響應式側邊導航欄
下一篇：用HTML怎么制作網頁呢？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商