{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzUwNDc5NDQ2LCJpYXQiOjE3NTA0NzU4NDYsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.Ax2Kw7N9tY7fdVfP50oXUXLZUOlV4bPExM9sJv4rTn2qADLBmksGPZ-cZHrnZrJAz2DIzaySwPfphvELXkZ2BstjKHWAwmuk8s7tMHa3brF2LnLl19tZ9mL4qmQ_YjIW1nsVyOPUns17xcrLr_dz9eYfUNKewDYXwTeFSN-h25AbWoWc8hyljX-TU-KP3ewC_1XiqyiRUVncDcrMdhXEcayX3PZ_cMd1DxCGuA67k5QxFfp26NV6QYDL1VTzLDbVD5w3wL_bni-HZu9qk-9HIH3Dsbb7DRV7b83rFjkuozskCD_tax5AIxShIermNWE-2HTjun0ARR17PrhKfyTsxA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":71288179,\"user_id\":8358724,\"html\":\"<div id=\\\"pagex\\\">\\n <h2>Divine Samples - Scroll Active<\\/h2>\\n\\n <div id=\\\"sec_one\\\" class=\\\"expand_section active\\\">\\n <div class=\\\"content\\\">\\n <h2>Divine.Js<\\/h2>\\n <h3>Divine Js {DIV - Vine}<\\/h3>\\n <p>Branch based animation triggers. Add's functionality to activeate class animations based on the scroll position of a pages content.<\\/p>\\n <p>Created by: JKD<\\/p>\\n <\\/div>\\n <\\/div>\\n\\n <div id=\\\"sec_two\\\" class=\\\"expand_section\\\">\\n <div class=\\\"content\\\">\\n <h2> SCROLL IN MOTION<\\/h2>\\n\\n <\\/div>\\n <\\/div>\\n\\n <div id=\\\"sec_three\\\" class=\\\"expand_section\\\">\\n <div class=\\\"content\\\">\\n <h2> Animate with % or Pixels<\\/h2>\\n\\n <\\/div>\\n <\\/div>\\n\\n <!-- <div class=\\\"bump\\\"><\\/div> -->\\n <div class=\\\"cardbox\\\">\\n <ul id=\\\"deck1\\\" class=\\\"cards\\\">\\n <li class=\\\"card card-1 red\\\">\\n <div class=\\\"content\\\">\\n <h1>10<\\/h1>\\n <p>Heart<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-2 red\\\">\\n <div class=\\\"content\\\">\\n <h1>9<\\/h1>\\n <p>Dimond<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-3 black\\\">\\n <div class=\\\"content\\\">\\n <h1>8<\\/h1>\\n <p>Club<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-4 black\\\">\\n <div class=\\\"content\\\">\\n <h1>7<\\/h1>\\n <p>Club<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-5 black\\\">\\n <div class=\\\"content\\\">\\n <h1>6<\\/h1>\\n <p>Spade<\\/p>\\n <i class=\\\"fa-solid fa-card-club\\\"><\\/i>\\n <\\/div>\\n <\\/li>\\n <\\/ul>\\n <!-- <div class=\\\"bump\\\"><\\/div> -->\\n <ul id=\\\"deck2\\\" class=\\\"cards\\\">\\n <li class=\\\"card card-1 red\\\">\\n <div class=\\\"content\\\">\\n <h1>A<\\/h1>\\n <p>Heart<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-2 red\\\">\\n <div class=\\\"content\\\">\\n <h1>K<\\/h1>\\n <p>Heart<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-3 red\\\">\\n <div class=\\\"content\\\">\\n <h1>Q<\\/h1>\\n <p>Heart<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-4 red\\\">\\n <div class=\\\"content\\\">\\n <h1>J<\\/h1>\\n <p>Heart<\\/p>\\n <\\/div>\\n <\\/li>\\n <li class=\\\"card card-5 red\\\">\\n <div class=\\\"content\\\">\\n <h1>10<\\/h1>\\n <p>Heart<\\/p>\\n <\\/div>\\n <\\/li>\\n <\\/ul>\\n <\\/div>\\n <div class=\\\"bump\\\"><\\/div>\\n <div class=\\\"bump\\\"><\\/div>\\n<\\/div>\",\"css\":\"@import url(\\\"https:\\/\\/fonts.googleapis.com\\/css2?family=Comforter&family=Comforter+Brush&family=Condiment&family=Courgette&family=Damion&family=Fredericka+the+Great&family=Leckerli+One&family=Major+Mono+Display&family=Montserrat:wght@100;200;300;400;500;600;700;800&family=Play:wght@400;700&family=Rajdhani:wght@300;400;500;600;700&family=Splash&display=swap\\\");\\n\\n\\/* \\n\\nfont-family: 'Comforter', cursive;\\nfont-family: 'Comforter Brush', cursive;\\nfont-family: 'Condiment', cursive;\\nfont-family: 'Courgette', cursive;\\nfont-family: 'Damion', cursive;\\nfont-family: 'Fredericka the Great', serif;\\nfont-family: 'Leckerli One', cursive;\\nfont-family: 'Major Mono Display', monospace;\\nfont-family: 'Montserrat', sans-serif;\\nfont-family: 'Play', sans-serif;\\nfont-family: 'Rajdhani', sans-serif;\\nfont-family: 'Splash', cursive;\\n*\\/\\n*,\\n*:before,\\n*:after {\\n box-sizing: border-box;\\n font-family: \\\"Play\\\", sans-serif;\\n}\\n\\nhtml,\\nbody {\\n max-width: 100vw;\\n height: 100vh;\\n padding: 0px;\\n margin: 0px;\\n font-family: sans-serif;\\n color: #444;\\n}\\nh2 {\\n text-align: center;\\n font-size: 4vw;\\n text-transform: uppercase;\\n}\\n\\n#pagex {\\n position: relative;\\n max-width: 100vw;\\n height: 100vh;\\n overflow: hide;\\n}\\n.bump {\\n height: 1000px;\\n}\\nul.cards {\\n left: 40px;\\n top: 30px;\\n width: 300px;\\n margin: 0 auto 20px;\\n height: 210px;\\n list-style-type: none;\\n position: relative;\\n \\/* padding: 20px 0; *\\/\\n cursor: pointer;\\n \\/* background-color:#222; *\\/\\n transition: width 1s;\\n}\\n\\nul.cards li.card {\\n background: #fff;\\n overflow: hidden;\\n height: 200px;\\n width: 150px;\\n border-radius: 5px;\\n position: absolute;\\n left: 0px;\\n display: inline-block;\\n box-shadow: 1px 2px 2px 0 #aaa;\\n transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);\\n}\\n\\/* ul.cards li.card img {\\n max-width: 100%;\\n height: auto;\\n} *\\/\\nul.cards li.card div.content {\\n padding: 5px 10px;\\n}\\nul.cards li.card.card-1 {\\n z-index: 10;\\n transform: rotateZ(-2deg);\\n}\\nul.cards li.card.card-2 {\\n z-index: 9;\\n transform: rotateZ(-7deg);\\n transition-delay: 0.05s;\\n}\\nul.cards li.card.card-3 {\\n z-index: 8;\\n transform: rotateZ(5deg);\\n transition-delay: 0.1s;\\n}\\nul.cards li.card.card-4 {\\n z-index: 7;\\n transform: rotateZ(5deg);\\n transition-delay: 0.1s;\\n}\\nul.cards li.card.card-4 {\\n z-index: 8;\\n transform: rotateZ(-5deg);\\n transition-delay: 0.1s;\\n}\\nul.cards.transition {\\n width: 100%;\\n}\\nul.cards.transition li.card {\\n transform: rotateZ(0deg);\\n}\\nul.cards.transition li.card.card-1 {\\n left: 440px;\\n}\\nul.cards.transition li.card.card-2 {\\n left: 220px;\\n}\\nul.cards.transition li.card.card-4 {\\n left: 660px;\\n}\\nul.cards.transition li.card.card-5 {\\n left: 880px;\\n}\\n.cardbox {\\n max-width: 100vw;\\n overflow: hidden;\\n overflow-x:scroll\\n}\\n\\n.card {\\n background-color: #e2e2e2 !important;\\n}\\n.black {\\n background-color: #222 !important;\\n color: #e3e3e3;\\n}\\n.red {\\n background-color: #e3e3e3 !important;\\n color: darkRed;\\n}\\n\\n.expand_section {\\n height: 300px;\\n border-top: solid 1px #333;\\n transition: 2s;\\n overflow: hidden;\\n opacity: 0;\\n}\\n.expand_section.active {\\n height: 450px;\\n background-color: teal;\\n opacity: 1;\\n}\\n\\n.expand_section .content {\\n max-width: 400px;\\n margin: 0 auto;\\n color: white;\\n}\\n\",\"js\":\"$(document).ready(function ($) {\\n $(\\\"ul.cards\\\").on(\\\"click\\\", function () {\\n $(this).toggleClass(\\\"transition\\\");\\n });\\n});\\n\\n\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\/\\n$(\\\"#deck1.cards\\\").addClass(\\\"transition\\\");\\n$(window).on(\\\"resize scroll\\\", function () {\\n \\/\\/ if ($(\\\"#deck2.cards\\\").divineView()) {\\n \\/\\/ $(\\\"#deck2.cards\\\").addClass(\\\"transition\\\");\\n \\/\\/ } else {\\n \\/\\/ $(\\\"#deck2.cards\\\").removeClass(\\\"transition\\\");\\n \\/\\/ }\\n\\n if ($(\\\"#deck1\\\").divineView(\\\"lessthan\\\", 20, null)) {\\n $(\\\"#deck1.cards\\\").addClass(\\\"transition\\\");\\n } else {\\n $(\\\"#deck1.cards\\\").removeClass(\\\"transition\\\");\\n }\\n\\n if ($(\\\"#deck2.cards\\\").divineView(\\\"between\\\", 60, 10)) {\\n $(\\\"#deck2.cards\\\").addClass(\\\"transition\\\");\\n } else {\\n $(\\\"#deck2.cards\\\").removeClass(\\\"transition\\\");\\n }\\n\\n $(\\\"#sec_one\\\").each(function (index) {\\n if ($(this).divineView(\\\"between\\\", 90, 5)) {\\n $(this).addClass(\\\"active\\\");\\n } else {\\n $(this).removeClass(\\\"active\\\");\\n }\\n });\\n $(\\\"#sec_two\\\").each(function (index) {\\n if ($(this).divineView(\\\"between\\\", 60, 5)) {\\n $(this).addClass(\\\"active\\\");\\n } else {\\n $(this).removeClass(\\\"active\\\");\\n }\\n });\\n $(\\\"#sec_three\\\").each(function (index) {\\n if ($(this).divineView(\\\"between\\\", 80, 5)) {\\n $(this).addClass(\\\"active\\\");\\n } else {\\n $(this).removeClass(\\\"active\\\");\\n }\\n });\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2023-10-25T17:36:56.668Z\",\"updated_at\":\"2024-12-14T06:21:32.767Z\",\"title\":\"DIVINE - sample\",\"description\":\"\",\"slug_hash\":\"dyaoqyr\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"22e7fa3aa969bdc605d7d8a31d7fd7c4\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":61311516,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":1,\"pick_visible_at\":null,\"cpid\":\"018b67e9-2d5c-7d3b-9441-223190fee48e\",\"is_new_editor_pen\":false,\"access\":\"Private\",\"pen_hash\":null,\"hashid\":\"dyaoqyr\"}"}