मैंने देखा है कि सीएसएस linear-gradient एक गतिशील पृष्ठभूमि के रूप में (keyframes का उपयोग करके) यदि आप पृष्ठ के साथ वास्तव में जल्दी स्क्रॉल करते हैं तो गड़बड़ लग रहा है। उदाहरण के लिए, यहां, अगर आप स्क्रोल बार को पकड़ते हैं और वास्तव में तेज़ी से ऊपर और नीचे स्क्रॉल करते हैं, आप नीचे सफेद देख सकते हैं। ऐसा प्रतीत होता है कि जैसे-जैसे पृष्ठ का अधिक भाग प्रकट होता है, ग्रेडिएंट फिर से कैसे आकर्षित होता है, या... मैंने हर जगह खोजने की कोशिश की है, लेकिन इसके लिए कुछ भी विशिष्ट नहीं मिला है - कोई विचार? प्रासंगिक सीएसएस है:

body {
    background: linear-gradient(angle, some colours);
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

मुझे आश्चर्य है कि पृष्ठभूमि को किसी प्रकार की "छवि" के रूप में किसी भी तरह से तय किया जाना है ताकि ब्राउज़र को स्क्रॉल पर ढाल को फिर से तैयार न करना पड़े।

0
Thomas Nicholson 26 सितंबर 2020, 12:05

2 जवाब

सबसे बढ़िया उत्तर

सीधे body पर करने के बजाय छद्म ::before तत्व पर अपनी स्टाइलिंग करें, ताकि आप position: fixed का उपयोग कर सकें।

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(240deg, #567EB9 0%, #B29ACA 50%, #B29ACA 70%, #F9839B 95%, #e6b394 100%);
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
}

यह सर्वश्रेष्ठ समाधान नहीं हो सकता है, लेकिन यह काम करता है।

1
Agénor Debriat 26 सितंबर 2020, 13:19

एक निश्चित तत्व पर विचार करें जहाँ आप अनुवाद लागू करते हैं:

html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(60deg, red, blue, green);
  animation: gradient 3s linear infinite alternate;
}

@keyframes gradient {
  100% {
    transform: translateX(-50%);
  }
}
1
Temani Afif 26 सितंबर 2020, 13:07