{"id":5531,"date":"2023-12-28T04:32:07","date_gmt":"2023-12-28T04:32:07","guid":{"rendered":"https:\/\/graphica.pe\/marquee-effect\/"},"modified":"2024-07-11T20:55:36","modified_gmt":"2024-07-11T20:55:36","slug":"marquee-effect","status":"publish","type":"post","link":"https:\/\/graphica.pe\/en\/marquee-effect\/","title":{"rendered":"Marquee effect"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5531\" class=\"elementor elementor-5531 elementor-4561\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8689e6f e-flex e-con-boxed e-con e-parent\" data-id=\"8689e6f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f7f697a elementor-widget elementor-widget-text-editor\" data-id=\"f7f697a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let&#8217;s add the Marquee effect in logos:<\/p>\n<\/p>\n<p><strong>The result:<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-4572 size-full\" src=\"https:\/\/graphica.pe\/wp-content\/uploads\/CPT2312272335-1191x164-1.gif\" alt=\"\" width=\"1191\" height=\"164\"><\/p>\n<\/p>\n<p>We start adding in our style.css the following styles:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-650f508 elementor-widget elementor-widget-code-highlight\" data-id=\"650f508\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-twilight copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.marquee-logos {\r\n\t--marquee-speed: 50s;\r\n\t--marquee-speed-mobile: 25s;\r\n}\r\n\r\n.marquee-logos .gallery {\r\n\tdisplay: flex;\r\n    flex-wrap: nowrap;\r\n\talign-items: center;\r\n}\r\n\r\n.marquee-logos .gallery-item {\r\n\tpadding: 0 70px;\r\n}\r\n\r\n.marquee-logos .elementor-image-gallery {\r\n\twidth: fit-content;\r\n\talign-items: center;\r\n    display: flex;\r\n\twill-change: transform;\r\n\tanimation: marquee var(--marquee-speed) linear infinite;\r\n}\r\n\r\n.marquee-logos .gallery img {\r\n\twidth: auto;\r\n\tmax-width: fit-content;\r\n}\r\n\r\n@keyframes marquee {\r\n\t100% {\r\n\t\ttransform: translate3d(-50%,0,0);\r\n\t}\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n\t.marquee-logos .gallery-item {\r\n\t\tpadding: 0 30px;\r\n\t}\r\n\t\r\n\t.marquee-logos .elementor-image-gallery {\r\n\t\tanimation: marquee var(--marquee-speed-mobile) linear infinite;\r\n\t}\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f47f5b6 elementor-widget elementor-widget-text-editor\" data-id=\"f47f5b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In JS:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-040d4a1 elementor-widget elementor-widget-code-highlight\" data-id=\"040d4a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-twilight copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function cloneMarqueeGallery() {\r\n\t\tconst wrapper = document.querySelector('.marquee-logos .elementor-image-gallery')\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst gallery = wrapper.querySelector('.gallery');\r\n\t\tconst galleryCloned = gallery.cloneNode(true);\r\n\t\twrapper.appendChild(galleryCloned);\r\n\t}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s add the Marquee effect in logos: The result: We start adding in our style.css the following styles: .marquee-logos { &#8211;marquee-speed: 50s; &#8211;marquee-speed-mobile: 25s; } .marquee-logos .gallery { display: flex; flex-wrap: nowrap; align-items: center; } .marquee-logos .gallery-item { padding: 0 70px; } .marquee-logos .elementor-image-gallery { width: fit-content; align-items: center; display: flex; will-change: transform; animation: marquee [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5531","post","type-post","status-publish","format-standard","hentry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/comments?post=5531"}],"version-history":[{"count":0,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5531\/revisions"}],"wp:attachment":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/media?parent=5531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/categories?post=5531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/tags?post=5531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}