Главная » Языки программирования

Parallax effect with css

Содержание
  1. 26 CSS Parallax Effects
  2. Related Articles
  3. Author
  4. Links
  5. Made with
  6. About a code
  7. Parallax Photo Columns with CSS Scroll Linked Animations
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. Disney Wall Parallax. Only CSS
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Easy Parallax Effect with background-attachment: fixed
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. CSS Sticky Parallax Sections
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. CSS Parallax Hero
  28. Author
  29. Links
  30. Made with
  31. About a code
  32. CSS-Only Horizontal Parallax Gallery
  33. Author
  34. Links
  35. Made with
  36. About a code
  37. Pure CSS Multilayer Parallax
  38. Author
  39. Links
  40. Made with
  41. About a code
  42. Whole UI without JavaScript
  43. Author
  44. Links
  45. Made with
  46. About the code
  47. Mouse Move Parallax
  48. Author
  49. Links
  50. Made with
  51. About the code
  52. Parallax Effect
  53. Author
  54. Links
  55. Made with
  56. About the code
  57. Parallax Shadows
  58. Author
  59. Links
  60. Made with
  61. About the code
  62. 3D CSS Parallax Depth Effect
  63. Author
  64. Links
  65. Made with
  66. About the code
  67. Image Cutout, Parallax Effect: CSS + SVG
  68. Author
  69. Links
  70. Made with
  71. About the code
  72. CSS Only Parallax
  73. Author
  74. Links
  75. Made with
  76. About the code
  77. CSS-Only Parallax Effect
  78. Author
  79. Links
  80. Made with
  81. About the code
  82. Parallax Image Gallery
  83. Author
  84. Links
  85. Made with
  86. About the code
  87. Page Top Parallax
  88. Author
  89. Links
  90. Made with
  91. About a code
  92. Parallax Scroll
  93. Author
  94. Links
  95. Made with
  96. About the code
  97. Parallax Grid
  98. Author
  99. Links
  100. Made with
  101. About the code
  102. Parallax Background
  103. Author
  104. Links
  105. Made with
  106. About a code
  107. Card
  108. Author
  109. Links
  110. Made with
  111. About a code
  112. CSS Parallax Orbs
  113. Author
  114. Links
  115. Made with
  116. About a code
  117. Responsive Magazine Spread
  118. Author
  119. Links
  120. Made with
  121. About a code
  122. Parallax Landscape CSS Only
  123. Author
  124. Links
  125. Made with
  126. About a code
  127. Pure CSS Parallax Effect (Depth of Field)
  128. Author
  129. Links
  130. Made with
  131. About a code
  132. Parallax World of UGG
  133. How TO — Parallax Scrolling
  134. Parallax
  135. How To Create a Parallax Scrolling Effect
  136. Example with pixels
  137. Example with percent
  138. Example
Читайте также:  Zerodivisionerror integer division or modulo by zero питон ошибка

26 CSS Parallax Effects

Collection of hand-picked free HTML and CSS parallax effect code examples from Codepen, GitHub and other resources. Update of February 2021 collection. 11 new items.

Author

Made with

About a code

Parallax Photo Columns with CSS Scroll Linked Animations

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Disney Wall Parallax. Only CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Easy Parallax Effect with background-attachment: fixed

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Sticky Parallax Sections

Uses position: sticky and scale transforms to create a sticky parallax effect with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Parallax Hero

Parallax effect created with CSS transforms and perspective properties.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

A few beautiful photos from Paris in this experimental gallery. Uses transforms together with perspective property for parallax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Multilayer Parallax

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Whole UI without JavaScript

The whole site on pure CSS (without JavaScript): parallax scrolling; simple animation of links and buttons with the css-property cubic-bezier ; smooth scrolling when click on the navigation animation of the hamburger click open/close the click menu. etc.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Mouse Move Parallax

Simple parallax in HTML and CSS with little vanilla JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Parallax Effect

Optimised for Google Chrome, some problems appear on Mozilla with background-clip: text;

Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari

Author

Made with

About the code

Parallax Shadows

Mobile-friendly parallax shadows.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

3D CSS Parallax Depth Effect

Playing with CSS translate and rotate transforms based on mousemove (sorry mobile users) to simulate some z-axis depth on the card and individual movie characters.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Image Cutout, Parallax Effect: CSS + SVG

This works on desktop/laptop, but not on mobile. Make an SVG cutout of the same background color as your background. Make a parallax background with CSS. Use the same proportions as your SVG. Place an img of your SVG inside the HTML for your parallax div . Align and size parallax background as you like. Don’t forget to make things responsive!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS Only Parallax

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS-Only Parallax Effect

No Javascript required. Just plain CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Page Top Parallax

Page top parallax (SVG + CSS Variables).

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

Parallax Scroll

Simple parallax scroll with a fixed background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Parallax Grid

I used parallax.js to set up this interactive panning image grid. Uses cursor position if you’re on a desktop or laptop.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, parallax.js

Author

Made with

About the code

Parallax Background

Pure CSS background parallax.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Parallax Orbs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Responsive Magazine Spread

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Parallax Landscape CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Parallax Effect (Depth of Field)

Use pure CSS create parallax effect with depth of field. And a little bit pop-up photo browser.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Parallax World of UGG

A parallax experiment with the World of UGG landing page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Источник

How TO — Parallax Scrolling

Learn how to create a «parallax» scrolling effect with CSS.

Parallax

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Click on the links below to see the difference between a website with and without parallax scrolling.

Note: Parallax scrolling does not always work on mobile devices/smart phones. However, you can use media queries to turn off the effect on mobile devices (see last example on this page).

How To Create a Parallax Scrolling Effect

Use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

Example with pixels

/* Set a specific height */
min-height: 500px;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>

The example above used pixels to set the height of the image. If you want to use percent, for example 100%, to make the image fit the whole screen, set the height of the parallax container to 100%. Note: You must also apply height: 100% to both and :

Example with percent

.parallax <
/* The image used */
background-image: url(«img_parallax.jpg»);

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>

Some mobile devices have a problem with background-attachment: fixed . However, you can use media queries to turn off the parallax effect for mobile devices:

Example

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) .parallax background-attachment: scroll;
>
>

Источник

Оцените статью
© 2024 Программирование