CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで視差スクロール効果を作成するにはどうすればよいですか？

CSSで視差スクロール効果を作成するには、コードは次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      height: 100vh;
      margin: 0px;
      padding: 0px;
   }
   .parallax {
      background-image: url("https://i.picsum.photos/id/250/800/800.jpg");
      height: 100%;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }
   .parallaxText {
      font-size: 20px;
      height: 100%;
   }
</style>
</head>
<body>
<div class="parallax"></div>
<div class="parallaxText">
<h1>Some random text</h1>
<h1>Some random text</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, praesentium assumenda 
illum nisi minima libero accusamus adipisci aspernatur architecto qui aliquam quo similique 
eos vitae. Cum iste laboriosam vero excepturi eum sed ex fuga repellat accusantium officia 
rerum ducimus sequi maiores reprehenderit veniam corrupti, aspernatur explicabo nesciunt 
architecto voluptate! Consectetur.
</p>
</div>
<div class="parallax"></div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSで視差スクロール効果を作成するにはどうすればよいですか？

少し下にスクロールすると、視差効果が次のように表示されます-

CSSで視差スクロール効果を作成するにはどうすればよいですか？


  1. CSSで矢印を作成するにはどうすればよいですか？

    CSSで矢印を作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  2. CSSで視差スクロール効果を作成する方法

    背景と前景のコンテンツに異なる速度を指定することで、CSSを使用して視差スクロール効果を作成できます。 次の例は、CSS視差スクロール効果-を示しています。 例 <!DOCTYPE html> <html> <head> <style> body, html {    height: 100%;    text-align: center; } .example {    height: 100%;    background-attachment: fixed;