Найти на сайте
  2. Форумы
  3. РАЗНОЕ
  4. Флейм / Флуд / Оффтопик
  5. Прикрутить кота при прокрутке

Прикрутить кота при прокрутке

InstantCMS 2.X

Прикрутить кота при прокрутке

#1 18 марта 2019 в 14:44
Доброе время суток. Помогите прикрутить кота nisnom.com/veb-razrabotki/longcat-scroll-do-beskonechnosti-rastyagivayushhijsya-kot-pri-prokrutke-stranitsy/.
0
#2 18 марта 2019 в 15:34
А в чём конкретно трудность?
0
#3 18 марта 2019 в 15:37
Файлы закидывал в папку шаблона, пытался подключить css и js — не получилось. Через sitekreator не понимаю как )
Много плюшек на scss…
PS переводил PUG в HTML, SCSS в CSS, кот появляется, просто болтается, страница уезжает...
Кот на гитхаб gist.github.com/rulers/7f4d0b71ff6b6d4335b264bd4ab5e302, instant с .pug, .scss дружит?
0
#4 19 марта 2019 в 23:14
Хорошие новости с полей. Один хороший человек подсказал position:absolute поменять на другое значение (поменял на position: relative;), переписать название стилей потому что они конфликтуют с системными, хорошей ему жены, всех благ и + в карму.

  1. <div class="achiev-banner" id="banner">
  2.   <div class="achiev-name">Name</div>
  3.   <div class="achiev-req">req</div>
  4. </div>
  5. <div class="eye-track-cell"></div>
  6. <div class="eye-track-cell"></div>
  7. <div class="eye-track-cell"></div>
  8. <div class="eye-track-cell"></div>
  9. <div class="eye-track-cell"></div>
  10. <div class="eye-track-cell"></div>
  11. <div class="eye-track-cell"></div>
  12. <div class="eye-track-cell"></div>
  13. <div class="eye-track-cell"></div>
  14. <div class="eye-track-cell"></div>
  15. <div class="eye-track-cell"></div>
  16. <div class="eye-track-cell"></div>
  17. <div class="eye-track-cell"></div>
  18. <div class="eye-track-cell"></div>
  19. <div class="eye-track-cell"></div>
  20. <div class="eye-track-cell"></div>
  21. <div class="eye-track-cell"></div>
  22. <div class="eye-track-cell"></div>
  23. <div class="eye-track-cell"></div>
  24. <div class="eye-track-cell"></div>
  25. <div class="eye-track-cell"></div>
  26. <div class="eye-track-cell"></div>
  27. <div class="eye-track-cell"></div>
  28. <div class="eye-track-cell"></div>
  29. <div class="eye-track-cell"></div>
  30. <div class="length-counter"><strong>Longcat's Length </strong>
  31. <span>300</span> pixels
  32. </div>
  33. <div class="longcat">
  34.   <div class="right-ear"></div>
  35.   <div class="left-ear"></div>
  36.   <div class="right-arm">
  37.     <div class="right-paw"></div>
  38.   </div>
  39.   <div class="torso">
  40.     <div class="bottom">
  41.       <div class="tail">
  42.         <div class="tail-outer"></div>
  43.       </div>
  44.       <div class="right-leg">
  45.         <div class="right-lower-leg">
  46.           <div class="right-foot"></div>
  47.         </div>
  48.       </div>
  49.       <div class="left-leg">
  50.         <div class="left-lower-leg">
  51.           <div class="left-foot"></div>
  52.         </div>
  53.       </div>
  54.     </div>
  55.   </div>
  56.   <div class="head">
  57.     <div class="right-eye"></div>
  58.     <div class="left-eye"></div>
  59.     <div class="nose-mouth"></div>
  60.     <div class="right-cheek"></div>
  61.     <div class="left-cheek"></div>
  62.     <div class="whisker"></div>
  63.     <div class="whisker"></div>
  64.     <div class="whisker"></div>
  65.     <div class="whisker"></div>
  66.     <div class="whisker"></div>
  67.     <div class="whisker"></div>
  68.     <div class="whisker"></div>
  69.     <div class="whisker"></div>
  70.     <div class="whisker"></div>
  71.     <div class="whisker"></div>
  72.   </div>
  73.   <div class="left-arm">
  74.     <div class="left-paw"></div>
  75.   </div>
  76. </div>
  77.  
  78. <style>
  79. body {
  80.  // background-color: #967d46;
  81.   font-family: "Catamaran", sans-serif;
  82.   /* Yes, Cat-amaran! :3 */
  83.   margin: 0;
  84. }
  85.  
  86. div {
  87.   position: relative;
  88. }
  89.  
  90. .achiev-banner,
  91. .eye-track-cell,
  92. .length-counter {
  93.   position: absolute;
  94. ;
  95. }
  96.  
  97. .achiev-banner {
  98. background-color: rgba(255, 255, 255, 0.8);
  99.   height: 80px;
  100.   text-align: center;
  101.   top: -80px;
  102.   width: 100%;
  103.   z-index: 3;
  104. }
  105. .achiev-banner > div {
  106.   position: static;
  107. ;
  108. }
  109. .achiev-banner .achiev-name {
  110.   font-size: 18pt;
  111.   font-weight: bold;
  112.   height: 48px;
  113.   line-height: 48px;
  114. }
  115. .achiev-banner .achiev-req {
  116.   font-size: 13pt;
  117.   height: 32px;
  118.   line-height: 32px;
  119. }
  120.  
  121. .achiev-earned {
  122.   animation: achievement 4s linear;
  123. }
  124.  
  125. /* Longcat cursor tracking with eyes */
  126. .eye-track-cell {
  127.   width: 20%;
  128.   height: 20%;
  129.   z-index: 2;
  130. }
  131. .eye-track-cell:nth-of-type(2) {
  132.   top: 0;
  133.   left: 0;
  134. }
  135. .eye-track-cell:nth-of-type(2):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(2):hover ~ .longcat .left-eye {
  136.   transform: rotate(90deg);
  137. }
  138. .eye-track-cell:nth-of-type(3) {
  139.   top: 0;
  140.   left: 20%;
  141. }
  142. .eye-track-cell:nth-of-type(3):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(3):hover ~ .longcat .left-eye {
  143.   transform: rotate(90deg);
  144. }
  145. .eye-track-cell:nth-of-type(4) {
  146.   top: 0;
  147.   left: 40%;
  148. }
  149. .eye-track-cell:nth-of-type(4):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(4):hover ~ .longcat .left-eye {
  150.   transform: rotate(0deg);
  151. }
  152. .eye-track-cell:nth-of-type(5) {
  153.   top: 0;
  154.   left: 60%;
  155. }
  156. .eye-track-cell:nth-of-type(5):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(5):hover ~ .longcat .left-eye {
  157.   transform: rotate(-90deg);
  158. }
  159. .eye-track-cell:nth-of-type(6) {
  160.   top: 0;
  161.   left: 80%;
  162. }
  163. .eye-track-cell:nth-of-type(6):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(6):hover ~ .longcat .left-eye {
  164.   transform: rotate(-90deg);
  165. }
  166. .eye-track-cell:nth-of-type(7) {
  167.   top: 20%;
  168.   left: 0;
  169. }
  170. .eye-track-cell:nth-of-type(7):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(7):hover ~ .longcat .left-eye {
  171.   transform: rotate(63.43495deg);
  172. }
  173. .eye-track-cell:nth-of-type(8) {
  174.   top: 20%;
  175.   left: 20%;
  176. }
  177. .eye-track-cell:nth-of-type(8):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(8):hover ~ .longcat .left-eye {
  178.   transform: rotate(45deg);
  179. }
  180. .eye-track-cell:nth-of-type(9) {
  181.   top: 20%;
  182.   left: 40%;
  183. }
  184. .eye-track-cell:nth-of-type(9):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(9):hover ~ .longcat .left-eye {
  185.   transform: rotate(0deg);
  186. }
  187. .eye-track-cell:nth-of-type(10) {
  188.   top: 20%;
  189.   left: 60%;
  190. }
  191. .eye-track-cell:nth-of-type(10):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(10):hover ~ .longcat .left-eye {
  192.   transform: rotate(-45deg);
  193. }
  194. .eye-track-cell:nth-of-type(11) {
  195.   top: 20%;
  196.   left: 80%;
  197. }
  198. .eye-track-cell:nth-of-type(11):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(11):hover ~ .longcat .left-eye {
  199.   transform: rotate(-63.43495deg);
  200. }
  201. .eye-track-cell:nth-of-type(12) {
  202.   top: 40%;
  203.   left: 0;
  204. }
  205. .eye-track-cell:nth-of-type(12):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(12):hover ~ .longcat .left-eye {
  206.   transform: rotate(45deg);
  207. }
  208. .eye-track-cell:nth-of-type(13) {
  209.   top: 40%;
  210.   left: 20%;
  211. }
  212. .eye-track-cell:nth-of-type(13):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(13):hover ~ .longcat .left-eye {
  213.   transform: rotate(26.56505deg);
  214. }
  215. .eye-track-cell:nth-of-type(14) {
  216.   top: 40%;
  217.   left: 40%;
  218. }
  219. .eye-track-cell:nth-of-type(14):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(14):hover ~ .longcat .left-eye {
  220.   transform: rotate(0deg);
  221. }
  222. .eye-track-cell:nth-of-type(15) {
  223.   top: 40%;
  224.   left: 60%;
  225. }
  226. .eye-track-cell:nth-of-type(15):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(15):hover ~ .longcat .left-eye {
  227.   transform: rotate(-26.56505deg);
  228. }
  229. .eye-track-cell:nth-of-type(16) {
  230.   top: 40%;
  231.   left: 80%;
  232. }
  233. .eye-track-cell:nth-of-type(16):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(16):hover ~ .longcat .left-eye {
  234.   transform: rotate(-45deg);
  235. }
  236. .eye-track-cell:nth-of-type(17) {
  237.   top: 60%;
  238.   left: 0;
  239. }
  240. .eye-track-cell:nth-of-type(17):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(17):hover ~ .longcat .left-eye {
  241.   transform: rotate(33.6
0
#5 21 марта 2019 в 16:20
absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit
Наследует значение родителя.
С
  1. div {
  2.   position: inherit;
Голова стала на место, с ногами проблемы crazy
Кот собран !
  1. <div class="achiev-banner" id="banner">
  2.   <div class="achiev-name">Name</div>
  3.   <div class="achiev-req">req</div>
  4. </div>
  5. <div class="eye-track-cell"></div>
  6. <div class="eye-track-cell"></div>
  7. <div class="eye-track-cell"></div>
  8. <div class="eye-track-cell"></div>
  9. <div class="eye-track-cell"></div>
  10. <div class="eye-track-cell"></div>
  11. <div class="eye-track-cell"></div>
  12. <div class="eye-track-cell"></div>
  13. <div class="eye-track-cell"></div>
  14. <div class="eye-track-cell"></div>
  15. <div class="eye-track-cell"></div>
  16. <div class="eye-track-cell"></div>
  17. <div class="eye-track-cell"></div>
  18. <div class="eye-track-cell"></div>
  19. <div class="eye-track-cell"></div>
  20. <div class="eye-track-cell"></div>
  21. <div class="eye-track-cell"></div>
  22. <div class="eye-track-cell"></div>
  23. <div class="eye-track-cell"></div>
  24. <div class="eye-track-cell"></div>
  25. <div class="eye-track-cell"></div>
  26. <div class="eye-track-cell"></div>
  27. <div class="eye-track-cell"></div>
  28. <div class="eye-track-cell"></div>
  29. <div class="eye-track-cell"></div>
  30. <div class="length-counter"><strong>Longcat's Length </strong>
  31. <span>300</span> pixels
  32. </div>
  33. <div class="longcat">
  34.   <div class="right-ear"></div>
  35.   <div class="left-ear"></div>
  36.   <div class="right-arm">
  37.     <div class="right-paw"></div>
  38.   </div>
  39.   <div class="torso">
  40.     <div class="bottom">
  41.       <div class="tail">
  42.         <div class="tail-outer"></div>
  43.       </div>
  44.       <div class="right-leg">
  45.         <div class="right-lower-leg">
  46.           <div class="right-foot"></div>
  47.         </div>
  48.       </div>
  49.       <div class="left-leg">
  50.         <div class="left-lower-leg">
  51.           <div class="left-foot"></div>
  52.         </div>
  53.       </div>
  54.     </div>
  55.   </div>
  56.   <div class="head">
  57.     <div class="right-eye"></div>
  58.     <div class="left-eye"></div>
  59.     <div class="nose-mouth"></div>
  60.     <div class="right-cheek"></div>
  61.     <div class="left-cheek"></div>
  62.     <div class="whisker"></div>
  63.     <div class="whisker"></div>
  64.     <div class="whisker"></div>
  65.     <div class="whisker"></div>
  66.     <div class="whisker"></div>
  67.     <div class="whisker"></div>
  68.     <div class="whisker"></div>
  69.     <div class="whisker"></div>
  70.     <div class="whisker"></div>
  71.     <div class="whisker"></div>
  72.   </div>
  73.   <div class="left-arm">
  74.     <div class="left-paw"></div>
  75.   </div>
  76. </div>
  77.  
  78. <style>
  79. body {
  80.  // background-color: #967d46;
  81.   font-family: "Catamaran", sans-serif;
  82.   /* Yes, Cat-amaran! :3 */
  83.   margin: 0;
  84. }
  85.  
  86. div {
  87.   position: inherit;
  88. }
  89.  
  90. .achiev-banner,
  91. .eye-track-cell,
  92. .length-counter {
  93.   position: inherit;
  94. }
  95.  
  96. .achiev-banner {
  97. background-color: rgba(255, 255, 255, 0.8);
  98.   height: 80px;
  99.   text-align: center;
  100.   top: -80px;
  101.   width: 100%;
  102.   z-index: 3;
  103. }
  104. .achiev-banner > div {
  105.   position: static;
  106. }
  107. .achiev-banner .achiev-name {
  108.   font-size: 18pt;
  109.   font-weight: bold;
  110.   height: 48px;
  111.   line-height: 48px;
  112. }
  113. .achiev-banner .achiev-req {
  114.   font-size: 13pt;
  115.   height: 32px;
  116.   line-height: 32px;
  117. }
  118.  
  119. .achiev-earned {
  120.   animation: achievement 4s linear;
  121. }
  122.  
  123. /* Longcat cursor tracking with eyes */
  124. .eye-track-cell {
  125.   width: 20%;
  126.   height: 20%;
  127.   z-index: 2;
  128. }
  129. .eye-track-cell:nth-of-type(2) {
  130.   top: 0;
  131.   left: 0;
  132. }
  133. .eye-track-cell:nth-of-type(2):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(2):hover ~ .longcat .left-eye {
  134.   transform: rotate(90deg);
  135. }
  136. .eye-track-cell:nth-of-type(3) {
  137.   top: 0;
  138.   left: 20%;
  139. }
  140. .eye-track-cell:nth-of-type(3):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(3):hover ~ .longcat .left-eye {
  141.   transform: rotate(90deg);
  142. }
  143. .eye-track-cell:nth-of-type(4) {
  144.   top: 0;
  145.   left: 40%;
  146. }
  147. .eye-track-cell:nth-of-type(4):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(4):hover ~ .longcat .left-eye {
  148.   transform: rotate(0deg);
  149. }
  150. .eye-track-cell:nth-of-type(5) {
  151.   top: 0;
  152.   left: 60%;
  153. }
  154. .eye-track-cell:nth-of-type(5):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(5):hover ~ .longcat .left-eye {
  155.   transform: rotate(-90deg);
  156. }
  157. .eye-track-cell:nth-of-type(6) {
  158.   top: 0;
  159.   left: 80%;
  160. }
  161. .eye-track-cell:nth-of-type(6):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(6):hover ~ .longcat .left-eye {
  162.   transform: rotate(-90deg);
  163. }
  164. .eye-track-cell:nth-of-type(7) {
  165.   top: 20%;
  166.   left: 0;
  167. }
  168. .eye-track-cell:nth-of-type(7):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(7):hover ~ .longcat .left-eye {
  169.   transform: rotate(63.43495deg);
  170. }
  171. .eye-track-cell:nth-of-type(8) {
  172.   top: 20%;
  173.   left: 20%;
  174. }
  175. .eye-track-cell:nth-of-type(8):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(8):hover ~ .longcat .left-eye {
  176.   transform: rotate(45deg);
  177. }
  178. .eye-track-cell:nth-of-type(9) {
  179.   top: 20%;
  180.   left: 40%;
  181. }
  182. .eye-track-cell:nth-of-type(9):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(9):hover ~ .longcat .left-eye {
  183.   transform: rotate(0deg);
  184. }
  185. .eye-track-cell:nth-of-type(10) {
  186.   top: 20%;
  187.   left: 60%;
  188. }
  189. .eye-track-cell:nth-of-type(10):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(10):hover ~ .longcat .left-eye {
  190.   transform: rotate(-45deg);
  191. }
  192. .eye-track-cell:nth-of-type(11) {
  193.   top: 20%;
  194.   left: 80%;
  195. }
  196. .eye-track-cell:nth-of-type(11):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(11):hover ~ .longcat .left-eye {
  197.   transform: rotate(-63.43495deg);
  198. }
  199. .eye-track-cell:nth-of-type(12) {
  200.   top: 40%;
  201.   left: 0;
  202. }
  203. .eye-track-cell:nth-of-type(12):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(12):hover ~ .longcat .left-eye {
  204.   transform: rotate(45deg);
  205. }
  206. .eye-track-cell:nth-of-type(13) {
  207.   top: 40%;
  208.   left: 20%;
  209. }
  210. .eye-track-cell:nth-of-type(13):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(13):hover ~ .longcat .left-eye {
  211.   transform: rotate(26.56505deg);
  212. }
  213. .eye-track-cell:nth-of-type(14) {
  214.   top: 40%;
  215.   left: 40%;
  216. }
  217. .eye-track-cell:nth-of-type(14):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(14):hover ~ .longcat .left-eye {
  218.   transform: rotate(0deg);
  219. }
  220. .eye-track-cell:nth-of-type(15) {
  221.   top: 40%;
  222.   left: 60%;
  223. }
  224. .eye-track-cell:nth-of-type(15):hover ~ .longcat .right-eye, .eye-track-cell:nth-of-type(15):hover ~ .longcat .left-eye {
  225.   transform: rotate(-26.56505deg);
  226. }
  227. .eye-track-cell:nth-of-type(16) {
  228.   top: 40%;
  229. 
                                        
    
                                            
    
                                                                                        

    
        
    
                    
                            
            
    

    
    
                    
                0
D5Plugin_ExportInstant
Как правильно организовать скв
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Как сделать фон на высоту экрана с прокруткой только на содержимое сайта

Дизайн / Графика / Искусство Создана 4 года назад 5 сообщений

как сделать прокрутку при составлении статьи?

Релизы 2.X Создана 3 года назад 5 сообщений

Написать компонент и прикрутить сторонний скрипт

Ищу исполнителя Создана 4 года назад 1 сообщение

Полоса прокрутки или адаптивные таблицы

HTML / CSS / PHP / JS / RegExp Создана 3 года назад 4 сообщения

[ЕСТЬ РЕШЕНИЕ] Как в Moderne зафиксировать главное горизонтальное меню при прокрутке страницы?

Дизайн / Графика / Искусство Создана 2 года назад 4 сообщения

Как закрепить виджеты при прокрутки страницы

Разработка дополнений Создана 1 год назад 6 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.