{"id":22549,"date":"2025-05-22T19:50:30","date_gmt":"2025-05-22T10:50:30","guid":{"rendered":"https:\/\/rika.honoya-shop.jp\/?p=22549"},"modified":"2025-05-22T19:50:46","modified_gmt":"2025-05-22T10:50:46","slug":"spiraling-3d-stacking-cards-in-elementor","status":"publish","type":"post","link":"https:\/\/rika.honoya-shop.jp\/?p=22549","title":{"rendered":"Spiraling 3D Stacking Cards in Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"22549\" class=\"elementor elementor-22549\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb10e6a e-flex e-con-boxed e-con e-parent\" data-id=\"bb10e6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ae8a3ab e-con-full e-flex e-con e-child\" data-id=\"ae8a3ab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ca28b1 e-con-full e-flex e-con e-child\" data-id=\"9ca28b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d2777ae e-con-full reboot-stacking-card-area e-flex e-con e-parent\" data-id=\"2d2777ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5d3a8c16 e-flex e-con-boxed e-con e-child\" data-id=\"5d3a8c16\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-328bdd65 e-con-full e-flex e-con e-child\" data-id=\"328bdd65\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e913c28 elementor-widget elementor-widget-heading\" data-id=\"5e913c28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Features<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6250619e elementor-widget elementor-widget-text-editor\" data-id=\"6250619e\" 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>\u543e\u8f29\u306f\u732b\u3067\u3042\u308b\u3002\u540d\u524d\u306f\u307e\u3060\u306a\u3044\u3002\u3069\u3053\u3067\u751f\u308c\u305f\u304b\u9813\u3068\u898b\u5f53\u304c\u3064\u304b\u306c\u3002\u4f55\u3067\u3082\u8584\u6697\u3044\u3058\u3081\u3058\u3081\u3057\u305f\u6240\u3067\u30cb\u30e3\u30fc\u30cb\u30e3\u30fc\u6ce3\u3044\u3066\u3044\u305f\u4e8b\u3060\u3051\u306f\u8a18\u61b6\u3057\u3066\u3044\u308b\u3002<\/p>\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-7622716a elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"7622716a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">See More Details<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-260ac0ac e-con-full reboot-stacked-cards e-flex e-con e-child\" data-id=\"260ac0ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-2c19128b e-con-full e-flex e-con e-child\" data-id=\"2c19128b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24384559 elementor-widget elementor-widget-heading\" data-id=\"24384559\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Benefit<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d523304 elementor-widget elementor-widget-heading\" data-id=\"d523304\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Benefits We'll Use Everyday<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-31e56423 e-con-full e-flex e-con e-child\" data-id=\"31e56423\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68c0f33 elementor-widget elementor-widget-heading\" data-id=\"68c0f33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Money<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-748c5330 elementor-widget elementor-widget-heading\" data-id=\"748c5330\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Promote Financial Wellbeing<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b235ec e-con-full e-flex e-con e-child\" data-id=\"3b235ec\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-21c12a12 elementor-widget elementor-widget-heading\" data-id=\"21c12a12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our People<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e09ad18 elementor-widget elementor-widget-heading\" data-id=\"1e09ad18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Friendly Staff Ready To Help<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d14808f e-con-full e-flex e-con e-child\" data-id=\"7d14808f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-442d5a3c elementor-widget elementor-widget-heading\" data-id=\"442d5a3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Jobs<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27ce0b4d elementor-widget elementor-widget-heading\" data-id=\"27ce0b4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Find Great People<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7c4dc8ed e-con-full e-flex e-con e-child\" data-id=\"7c4dc8ed\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ba525 elementor-widget elementor-widget-heading\" data-id=\"4ba525\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Benefit<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b5a8584 elementor-widget elementor-widget-heading\" data-id=\"1b5a8584\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Benefits We'll Use Everyday<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7da8c344 e-con-full e-flex e-con e-child\" data-id=\"7da8c344\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7591b5d5 elementor-widget elementor-widget-heading\" data-id=\"7591b5d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Money<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ecf6542 elementor-widget elementor-widget-heading\" data-id=\"ecf6542\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Promote Financial Wellbeing<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5cdc4611 e-con-full e-flex e-con e-child\" data-id=\"5cdc4611\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f3800fa elementor-widget elementor-widget-heading\" data-id=\"4f3800fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our People<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e59b5a5 elementor-widget elementor-widget-heading\" data-id=\"e59b5a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Friendly Staff Ready To Help<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23931484 elementor-widget elementor-widget-html\" data-id=\"23931484\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\r\n<script>\r\n\r\nif(!rebootNonce100){\r\n    \r\nvar rebootNonce100 = true\r\n\r\n$(document).ready(function() {\r\n    \r\nvar previousScrollTop = [],\r\ncards = [],\r\ncardScrollHeight = [],\r\ncardRotate = [],\r\ncardContainer = [],\r\nstickyTop = [],\r\nstickyCon = []\r\n\r\nfunction cardSlideUp(){\r\n\r\n$('.reboot-stacking-card-area').each(function(i){\r\n    \r\n    var $this = $(this),\r\n    scrollTop = $(document).scrollTop(),\r\n    cardAreaTop = $this.offset().top,\r\n    index = Math.floor((scrollTop - cardAreaTop - stickyTop[i]) \/ cardScrollHeight[i]),\r\n    totalCards = cards[i].length\r\n    \r\n    cards[i].removeClass('reboot-active-card')\r\n    cards[i].each(function(j){\r\n        if( j <= index ) {\r\n            $(this).addClass('reboot-active-card')\r\n        }\r\n        if(index >= -1 && index < totalCards - 1){\r\n            $(this).css({\r\n                'transform': `rotate(${ -1*j*cardRotate[i] + (index+1)*cardRotate[i] }deg)`\r\n            })\r\n        }\r\n    })\r\n    \r\n    previousScrollTop[i] = scrollTop\r\n})\r\n\r\n}\r\n\r\nfunction setValues(){\r\n$('.reboot-stacking-card-area').each(function(i){\r\n    var $this = $(this)\r\n    stickyTop[i] = 0\r\n    if(stickyCon[i].outerHeight() > $(window).height()){\r\n        stickyTop[i] = cardContainer[i].offset().top - stickyCon[i].offset().top - $(window).height()\/2\r\n    }\r\n    stickyCon[i].css('top', -1*stickyTop[i])\r\n    cardScrollHeight[i] = $this.css('--card-scroll-height') ? parseInt($this.css('--card-scroll-height').trim()) : 400\r\n    cardRotate[i] = $this.css('--card-rotate') ? parseInt($this.css('--card-rotate').trim()) : 9\r\n    cards[i].each(function(j) {\r\n        $(this).css({\r\n            'transform': `rotate(-${j * cardRotate[i]}deg)`,\r\n            'z-index': cards[i].length - j\r\n        })\r\n    })\r\n    $this.css('height', stickyCon[i].outerHeight() +  ((cards[i].length - 1) * cardScrollHeight[i]) + 'px' )\r\n})\r\n\r\n}\r\n\r\n$(document).on('scroll', cardSlideUp)\r\n$(window).on('resize', function(){\r\n    setValues()\r\n    cardSlideUp()\r\n})\r\n\r\nfunction init(){\r\n$('.reboot-stacking-card-area').each(function(i){\r\n    var $this = $(this)\r\n    cards[i] = $this.find('.reboot-stacked-cards > .e-con, .reboot-stacked-cards > .e-container, .reboot-stacked-cards > .e-con-inner > .e-con, .reboot-stacked-cards > .e-con-inner > .e-container')\r\n    stickyCon[i] = $this.children('.e-con, .e-container').eq(0)\r\n    stickyCon[i].parents().each(function(){\r\n        if( !$(this).is('html') ){ $(this).css('overflow', 'visible') }\r\n    })\r\n    previousScrollTop[i] = $(document).scrollTop()\r\n    cardContainer[i] = $this.find('.reboot-stacked-cards')\r\n})\r\n\r\nsetValues()\r\ncardSlideUp()\r\n}\r\n\r\ninit()\r\n    \r\n})\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Features \u543e\u8f29\u306f\u732b\u3067\u3042\u308b&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"vkexunit_cta_each_option":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22549","post","type-post","status-publish","format-standard","hentry","category-hokkaido-farmer"],"acf":[],"_links":{"self":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts\/22549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22549"}],"version-history":[{"count":3,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts\/22549\/revisions"}],"predecessor-version":[{"id":22562,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts\/22549\/revisions\/22562"}],"wp:attachment":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}