如何在網站中集成視差效果

[英]How to integrate parallax effect in the webstite

這是網站鏈接：網站任何人都知道如何在 React 網站中添加這種視差效果。 我試過反應滾動視差庫但無法做到 ...

CSS和JS全屏帶滾動視差效果

[英]CSS and JS full-screen Parallax effect with scroll

我正在實現像這個演示一樣的整頁視差效果。 但是我的代碼像垂直 slider 一樣工作，因為我無法查看 slider 2 和 slider 3 的全部內容。我正在嘗試添加滾動條行為，而不是像演示一樣的 slider 行為。 如果有人可以建議我如何添加滾動條行為，那就太好了。 我在 JS_Fiddle ...

視差滾動效果不起作用 - 僅限 HTML CSS

[英]Parallax Scrolling effect isn't working - HTML CSS only

我正在嘗試學習如何制作視差滾動效果，觀看了一些教程並嘗試了一個，但它不起作用，知道可能出什么問題了嗎？ 顯示的只是static張圖片，完全沒有任何視差效果。 我無法上傳這篇文章，因為它說我的文章主要是代碼，我希望我可以在這里添加一些 lorem 因為我真的不知道要添加更多什么樣的信息...... ...

在 WordPress 站點中調試 CSS 干擾自定義 HTML 的技術

[英]Technique to debug CSS interference with custom HTML in WordPress Sites

我正在開發一個自定義 HTML 塊，它可以為我的 WordPress 網站中的特色圖像創建多層視差效果。 我得到的代碼主要在代碼示例中工作（見下文） body { margin: 0; }.parallax_layer { position: absolute; top: 0; right: 0; ...

為什么視差滾動不起作用？ （Next.js 圖片 + Tailwind）

[英]Why is the Parallax scrolling not working? (Next.js Image + Tailwind)

我錯過了什么讓視差滾動起作用？ <div className="h-screen"> <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat"> <Image s ...

滾動時網頁視差背景抖動

[英]Webpage parallax background jitters when scrolling

我編寫了我的第一個網站，我希望在滾動時在我的背景上產生視差效果。 它可以工作，但在某些計算機和/或某些瀏覽器上和/或某些 window 尺寸上，滾動時背景會上下抖動，同時仍會保持視差效果。 我無法弄清楚到底是什么組合導致了這個問題，這似乎是不一致的。 在 css 中，我的頁面主體上有一個垂直重復的背 ...

CSS視差中perspective, translateZ, scale 和 height 是什么關系？

[英]What is the relation between perspective, translateZ, scale and height in CSS parallax?

當涉及到純 CSS 視差時，我一直試圖找出透視、變換（更具體地說是 translateZ 和縮放）和高度屬性（使用 vh）之間的確切關系。 使用以下數字時，效果按預期工作：2px perspective，-1px translateZ，視差部分的比例為 1.7，非視差部分的高度為 70vh。 看這 ...

如何使用 HTML + CSS + JS（有限）在滾動上創建簡單的視差？

[英]How to create simple parallax on scroll using HTML + CSS + JS (limited)?

我遇到的問題是在沒有任何額外的 HTML 元素的情況下在身體上創建一個簡單的視差效果。 設置： <body>具有固定的背景圖像和 background-size:cover;。 body 的所有直接子級都有背景顏色，但是用於顯示body 背景圖片的<header> 。 ...

圖像不隨 translateZ() 移動

[英]Image is not moving with translateZ()

我正在嘗試創建一個包含一些圖像的網站。 當您向下滾動時，我希望這些圖像移動一點（只是一點點）。 背景附件：固定對我不起作用，因為我只想要一點點運動，所以我嘗試使用我在網上找到的指南進行轉換：translateZ()。 但是，這不起作用。 translateZ() 對圖像完全沒有任何作用。 這是因為 ...

將鼠標懸停事件變成自動滾動

[英]Turn a mouseover event into an autoscroll

作為創建疊加層的一部分，我在 codepen 上得到了一個接近我想要做的代碼。 這個在背景上顯示文本的視差。 但是在 CodePen 項目中，運動 animation 是在鼠標懸停事件上完成的。 我想讓這個 animation 在十秒內自動發生，而無需調用鼠標懸停。 這是有問題的代碼 const p ...

如何使用視差滾動制作一個固定背景

[英]How to make one fixed background with parallax scrolling

是否可以有一個固定的視頻 gif 頁面，然后當我滾動時，只需在該固定視頻 gif 頁面上添加內容。所以它只有一頁，但當用戶滾動時，內容會添加。 ...

Swift 中 imageViews 的視差效果問題 animation

[英]Problem with parallax effect animation for imageViews in Swift

我正在嘗試為滾動視圖中的圖片創建視差效果 animation。 主要思想是打開和關閉約束來實現這一點。 通常一切正常，但滾動后，有時您會看到一條細線是下一張圖像的一部分，或者 animation 變得非常清晰，我真的不明白為什么會發生這種情況。 也許有人會告訴我一個更好的方法來實現視差效果anim ...

在小屏幕中查看網站時圖像被截斷

[英]Images are getting cut off when the website is viewed in a small screen

我有一個問題，當高度或寬度減小時，我的圖像會被截斷。 我需要讓它響應，所以我沒有幫助。 我曾嘗試使用媒體查詢，但它仍然無法正常工作。 代碼 - Github 示例網站 - GitHub 頁面謝謝。 ...

視差效果重復圖像

[英]Parallex effect repeats image

我昨天創造了一個視差效果，覺得效果很好。 今天我調整了瀏覽器的大小，看到我使用的圖片重復了。 不重復破壞了整個事情。 所以我嘗試了很多東西，但沒有任何工作。 這是發生的事情的一個例子： https://imgur.com/a/6XIurKS ...

反應滾動視差圖像在手機上抖動

[英]React scroll Parallax image are jittery on phone

我嘗試使用React 滾動視差來獲得著名的滾動效果，這些圖像在 chrome 中運行良好，但在 safari 中，我應該說在小屏幕上看起來很緊張，給用戶一個糟糕的體驗。 這是在 stackBitz 中創建的示例項目： https://stackblitz.com/edit/react-ybdmbn ...

如何使用tailwind css添加背景圖像視差滾動效果？

[英]how can i add background image parallax scroll effect using tailwind css?

這是我正在處理的代碼示例。 我需要為背景圖像添加視差滾動效果。 我試過 background-attachment: fixed，但這只是一個固定的背景。 我想像通常的視差一樣添加一些變換或縮放效果。 ...

視差圖像不適用於 iphone 設備

[英]Parallax Image not working on iphone devices

嗨，我創建了一個視差 ui pure css。但是，當我嘗試在 android 和桌面上運行時，一切正常，但是在 ios 或 iphone 中，我得到了奇怪的結果，視差也不起作用。 我不知道為什么，但我可以尋求幫助嗎？ 我真的很感激..... 謝謝你……你也可以在這里訪問代碼： https://co ...

Flutter 如何為背景圖片創建視差效果

[英]Flutter how to create parallax effect for background image

我正在嘗試為容器的背景圖像創建視差效果。 我遵循了本教程https://docs.flutter.dev/cookbook/effects/parallax-scrolling 。 但是，我希望背景圖像保持在用戶滾動的視口廣告中。 基本上我想實現這種行為https://www.w3schools. ...

滾動過程中不平滑的視差效果 - 使用邊框半徑方法

[英]Unsmooth parallax effect during scrolling - with border-radius method

我剛剛開始學習 HTML/CSS。 我的目標是在我的測試網站上准備一個視差效果。 我在 CSS 中構建了一個具有視差效果的代碼，但問題是位於容器下方的圖像在滾動頁面期間不流暢（圖像擴展和撕裂）。 請考慮我使用了border-radius方法，該方法將圖像所在的容器的角變圓。 我注意到當我切割邊界半 ...

如何使用反應滾動視差

[英]How to use react-scroll-parallax

我yarn add react-scroll-parallax 設置新功能但出現錯誤： 它提供了以下錯誤：找不到react-scroll-parallax上下文值。 請確保組件包裹在<ParallaxProvider>中 ...