{"id":213,"date":"2023-11-18T11:27:22","date_gmt":"2023-11-18T10:27:22","guid":{"rendered":"https:\/\/intranet.projektninja.com\/?p=213"},"modified":"2024-06-15T18:32:34","modified_gmt":"2024-06-15T16:32:34","slug":"animacje-css-na-scoll-do-elementu","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/bajery\/animacje-css-na-scoll-do-elementu\/","title":{"rendered":"Animacje CSS na Scroll do Elementu: P\u0142ynne Przewijanie"},"content":{"rendered":"\n<p>Dodanie animacji <strong>CSS<\/strong> na scroll do element\u00f3w mo\u017ce uczyni\u0107 Twoj\u0105 stron\u0119 bardziej atrakcyjn\u0105 i dynamiczn\u0105. Oto jak to zrobi\u0107.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript do W\u0142\u0105czania Animacji<\/h2>\n\n\n\n<p>Najpierw potrzebujesz <strong>skryptu<\/strong>, kt\u00f3ry b\u0119dzie w\u0142\u0105cza\u0142 animacje podczas scrollowania.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ Nadaj klase na scoll to do animacji element\u00f3w\n\nfunction odslonElementy() {\n    var odslaniane = document.querySelectorAll(\".animowane\");\n\n    for (var i = 0; i &lt; odslaniane.length; i++) {\n        var windowHeight = window.innerHeight;\n        var elementTop = odslaniane&#91;i].getBoundingClientRect().top;\n        var elementVisible = 150;\n\n        if (elementTop &lt; windowHeight - elementVisible) {\n            odslaniane&#91;i].classList.add(\"anim-ctive\");\n        } else {\n            odslaniane&#91;i].classList.remove(\"anim-active\");\n        }\n    }\n}\n\nwindow.addEventListener(\"scroll\", odslonElementy);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Przyk\u0142adowe CSS dla Animacji<\/h2>\n\n\n\n<p>Nast\u0119pnie, stw\u00f3rz animacj\u0119 w CSS i zastosuj j\u0105 do element\u00f3w, kt\u00f3re chcesz animowa\u0107.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/****************  animka fotek ****************\/\n\n\n@keyframes wjazdfoty {\n    \n  0% {transform: scale(1.5); opacity: 0;}\n  100% {transform: scale(1); opacity: 1;}\n}\n\n\/* obrazki w tresci*\/\n\n\n.obrazek-w-tresci img {\n    border-radius: 15px;\n    box-shadow: #0000006b 4px 7px 4px;\n\n    \/* na start animacji*\/\n\n    opacity: 0; \/*- stan pocz\u0105tkowy okryte*\/\n\n\n}\n\n.obrazek-w-tresci.anim-ctive img{\n    animation: wjazdfoty 0.4s ease-out;\n    animation-fill-mode: forwards; \/*parametr forwads istotny by animacja zatrzyma\u0142a si\u0119 na ostatniej klatce*\/\n}\n<\/code><\/pre>\n\n\n\n<p>Dzi\u0119ki tym prostym krokom, Twoje elementy b\u0119d\u0105 p\u0142ynnie wje\u017cd\u017ca\u0107 na ekran podczas przewijania strony.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Odkryj, jak doda\u0107 p\u0142ynne animacje CSS na scroll do element\u00f3w na swojej stronie. Sprawd\u017a nasz przewodnik z kodem JavaScript i CSS, aby uczyni\u0107 swoj\u0105 stron\u0119 bardziej dynamiczn\u0105 i atrakcyjn\u0105.<\/p>\n","protected":false},"author":1,"featured_media":564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[224,25,226,227,30,228,225,101],"class_list":["post-213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bajery","tag-animacje-css","tag-css","tag-dynamiczne-strony","tag-efekty-animacji","tag-javascript","tag-kodowanie","tag-plynne-przewijanie","tag-scroll"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":1,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":546,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/213\/revisions\/546"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/564"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}