Вход Регистрация
* Balloo *

Забавная анимация скроллинга

  1. <style>
  2.  
  3.  
  4.  
  5. #sticky {
  6.  
  7. position: sticky;
  8.  
  9. background: #F762BC;
  10.  
  11. width: 100px;
  12.  
  13. height: 100px;
  14.  
  15. top: 70px;
  16.  
  17. left: 10px;
  18.  
  19. display: flex;
  20.  
  21. justify-content:center;
  22.  
  23. align-items:center;
  24.  
  25. box-shadow: 0 0 6px #000;
  26.  
  27. text-shadow: 0 0 4px #fff
  28.  
  29. }
  30.  
  31.  
  32.  
  33. #wrapper {
  34.  
  35. width: 75%;
  36.  
  37. margin: auto;
  38.  
  39. height: 400px;
  40.  
  41. background-color: #ccc;
  42.  
  43. }
  44.  
  45.  
  46.  
  47. .extra{
  48.  
  49. background: #ccc;
  50.  
  51. width: 75%;
  52.  
  53. margin: auto;
  54.  
  55. height: 100px;
  56.  
  57. }
  58.  
  59.  
  60.  
  61. body {
  62.  
  63. height: 1000px;
  64.  
  65. font-family: georgia;
  66.  
  67. }
  68.  
  69. h4{
  70.  
  71. text-align: center;
  72.  
  73. }
  74.  
  75. </style>
  76.  
  77. <h4>Scroll to see the sticky element <em>sticking</em></h4>
  78.  
  79. <div class="extra"></div>
  80.  
  81. <br />
  82.  
  83. <div id="wrapper">
  84.  
  85. <div id="sticky">
  86.  
  87. sticky
  88.  
  89. </div>
  90.  
  91. </div>
  92.  
  93. <br />
  94.  
  95. <div class="extra"></div>
» Описание: Смотрится довольно мило и игрушечно
» Время добавления: 16 Окт 2018 в 08:54
» Посмотров: 1927
» textarea
» Рейтинг: [+0 | -0]
Комментарии [0]
Онлайн: 4
Реклама