<section class="marginArea"></section>
<section class="scrollArea">
<div class="scrollArea__inner">
<div class="numWrap">
<p class="num">01</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153.56 154.54">
<path
d="m54.68 3.19 3.01 8.41-.99.35-7.29-4.46 2.25 6.27-1.2.43-3.01-8.41.99-.35 7.29 4.46-2.25-6.27 1.2-.43ZM65.25 6.84 59.89 8c.4 1.13 1.5 1.7 2.81 1.41.77-.17 1.37-.57 1.74-1.21l.83.63c-.45.83-1.28 1.4-2.37 1.64-2.13.46-3.86-.64-4.29-2.61-.42-1.96.68-3.67 2.59-4.09 1.91-.41 3.56.66 4.01 2.7.02.1.04.25.05.37Zm-5.55.3 4.24-.92c-.37-1.08-1.37-1.69-2.53-1.44-1.15.25-1.83 1.21-1.71 2.36ZM76.94 1.94l-2 6.94-1.17.09L71.43 4l-1.58 5.27-1.17.09-3.02-6.55 1.16-.09 2.37 5.22 1.62-5.52 1.03-.08 2.41 5.24 1.6-5.55 1.09-.08ZM85.82 6.35l-.35 3.07-1.25-.14.35-3.09L81.7.01l1.36.15 2.31 5L88.75.8l1.26.14-4.18 5.41ZM95.77 8.33l-5.36-1.18c-.11 1.19.66 2.17 1.97 2.46.77.17 1.48.05 2.08-.38l.49.92c-.75.57-1.74.74-2.84.5-2.13-.47-3.24-2.19-2.81-4.16.43-1.96 2.15-3.05 4.06-2.63s2.96 2.09 2.51 4.12c-.02.1-.07.25-.1.36ZM90.6 6.29l4.24.93c.12-1.14-.54-2.11-1.7-2.36-1.15-.25-2.16.33-2.54 1.43ZM102.84 9.49l-1.31 3.87-1.1-.37.29-.85c-.58.45-1.41.55-2.41.21-1.45-.49-2.11-1.57-1.73-2.69.35-1.03 1.3-1.65 3.21-1l1.84.62.08-.23c.33-.98-.04-1.74-1.19-2.13-.76-.26-1.62-.25-2.26 0l-.19-1.03c.84-.31 1.9-.27 2.92.07 1.75.59 2.46 1.77 1.86 3.53Zm-1.81 1.52.3-.89-1.79-.6c-1.15-.39-1.63-.05-1.81.49-.22.64.18 1.22 1.06 1.52.87.29 1.69.13 2.23-.51ZM109.62 9.44l-.48 1.08c-.09-.05-.17-.09-.25-.13-1.2-.54-2.27-.13-2.88 1.22l-1.37 3.08-1.12-.5 2.76-6.18 1.07.48-.46 1.04c.72-.55 1.65-.58 2.74-.09ZM112 8.3l.95.49-1.66 3.02-.81-.42 1.52-3.1ZM110.17 16.57l.94-.57c.28.65.92 1.37 1.67 1.83.97.59 1.55.54 1.85.04.78-1.3-3.55-2.38-2.16-4.69.63-1.04 1.98-1.18 3.46-.28.75.46 1.49 1.17 1.79 1.8l-.95.56c-.32-.66-.83-1.12-1.39-1.47-.92-.55-1.57-.49-1.85-.03-.82 1.37 3.52 2.47 2.16 4.72-.63 1.05-2 1.13-3.54.2-.96-.58-1.73-1.45-1.98-2.12ZM123.29 26.87l.31-3.34c-.14-.11-.3-.22-.44-.34l-1.68-1.43-1.76 2.07-.97-.83 5.79-6.81 2.65 2.26c1.77 1.5 2.08 3.31.82 4.79-.89 1.05-2.08 1.35-3.32.88l-.33 3.66-1.06-.9Zm3.74-4.46c.83-.97.65-2.08-.6-3.14l-1.65-1.41-2.6 3.06 1.65 1.41c1.24 1.06 2.38 1.05 3.2.08ZM131.73 31.37l-3.72-4.04c-.77.92-.7 2.16.2 3.14.54.58 1.18.89 1.92.88l-.12 1.03c-.94.03-1.85-.39-2.61-1.22-1.48-1.61-1.4-3.65.08-5.02 1.47-1.36 3.51-1.27 4.83.16 1.32 1.44 1.23 3.41-.3 4.82-.07.07-.2.16-.29.23Zm-3.07-4.63 2.94 3.19c.75-.86.76-2.04-.04-2.91-.8-.86-1.97-.97-2.9-.28ZM130.56 33.53l1.08-.17c.02.7.33 1.62.86 2.32.68.91 1.24 1.08 1.7.74 1.22-.91-2.4-3.54-.24-5.16.97-.73 2.27-.35 3.31 1.04.53.71.94 1.64.99 2.34l-1.09.16c-.05-.73-.34-1.35-.74-1.88-.64-.86-1.27-1.04-1.7-.72-1.28.96 2.33 3.61.23 5.18-.98.73-2.28.3-3.36-1.14-.67-.9-1.06-1.99-1.04-2.71ZM136.77 37.42c1.73-1.03 3.72-.48 4.76 1.26 1.04 1.74.57 3.74-1.16 4.78-1.73 1.03-3.73.5-4.76-1.24-1.04-1.74-.57-3.76 1.16-4.79Zm2.97 4.97c1.24-.74 1.54-2.05.87-3.16-.67-1.12-1.97-1.48-3.21-.74s-1.54 2.07-.88 3.18c.67 1.12 1.97 1.47 3.21.73ZM146.63 42.49l.54 1.1-8.51 4.16-.54-1.1 8.51-4.16ZM148.23 53.21l-6.31 2.42-.42-1.08.95-.37c-.83-.21-1.5-.86-1.85-1.75-.63-1.63-.15-3.06 1.71-3.77l3.63-1.39.44 1.14-3.5 1.34c-1.24.48-1.62 1.33-1.2 2.42.46 1.19 1.49 1.67 2.85 1.15l3.26-1.25.44 1.14ZM143.9 61.32c-.41-.27-.7-.78-.84-1.3-.36-1.32.16-2.27 1.48-2.62l3.58-.97-.3-1.11.97-.26.3 1.11 1.43-.39.32 1.18-1.43.39.51 1.87-.97.26-.51-1.87-3.53.96c-.7.19-1 .67-.82 1.32.09.34.29.65.56.84l-.75.6ZM150.42 61.47l.24 1.2-6.63 1.35-.24-1.2 6.63-1.35Zm2.01-.63a.8.8 0 0 1 .95.65c.09.46-.17.88-.6.97a.805.805 0 0 1-.97-.65c-.09-.46.17-.88.61-.97ZM147.77 65.2c2-.23 3.6 1.08 3.83 3.1.23 2.02-1.01 3.65-3.02 3.89s-3.61-1.07-3.84-3.09c-.23-2.02 1.02-3.67 3.03-3.9Zm.67 5.76c1.43-.17 2.25-1.24 2.1-2.53-.15-1.29-1.19-2.16-2.62-1.99-1.43.17-2.26 1.25-2.11 2.55.15 1.29 1.2 2.15 2.63 1.98ZM149.12 80.55l-3.89-.06.02-1.22 3.75.06c1.33.02 1.99-.63 2.01-1.79.02-1.3-.74-2.16-2.21-2.18l-3.48-.06.02-1.22 6.76.11-.02 1.17-1.02-.02c.68.51 1.06 1.38 1.05 2.45-.03 1.65-.99 2.79-2.98 2.76ZM152.12 95.39l-8.77-1.68.2-1.03 7.54-4.01-6.54-1.25.24-1.25 8.77 1.68-.2 1.03-7.55 4.01 6.54 1.25-.24 1.25ZM143.61 102.64l1.72-5.21c-1.17-.23-2.23.43-2.65 1.71-.25.75-.2 1.47.16 2.11l-.96.39c-.49-.81-.56-1.81-.2-2.88.69-2.07 2.51-3 4.43-2.37 1.9.63 2.82 2.45 2.21 4.3-.61 1.85-2.38 2.73-4.36 2.08-.1-.03-.24-.09-.34-.14Zm2.56-4.93-1.36 4.12c1.12.24 2.15-.32 2.52-1.45.37-1.11-.11-2.19-1.16-2.67ZM141.89 115.2l-4.95-5.25.52-1.05 5.47.51-3.73-4.04.52-1.05 7.18.73-.51 1.04-5.7-.61 3.93 4.21-.46.93-5.74-.59 3.96 4.2-.48.99ZM133.57 120.58l-2.46-1.86.76-1.01 2.48 1.88 6.78.69-.83 1.09-5.48-.57 2.02 5.13-.76 1.01-2.52-6.36ZM126.78 128.13l3.75-4c-.97-.7-2.2-.54-3.12.44-.54.58-.8 1.24-.74 1.98l-1.04-.05c-.1-.93.25-1.88 1.02-2.7 1.49-1.59 3.54-1.67 5.01-.29 1.46 1.37 1.53 3.4.2 4.83s-3.31 1.48-4.82.06c-.07-.07-.18-.18-.25-.27Zm4.39-3.4-2.96 3.17c.92.68 2.09.61 2.9-.26.8-.86.82-2.03.07-2.91ZM122.2 133.62l-2.66-3.09.88-.76.58.68c-.09-.73.25-1.49 1.05-2.18 1.16-1 2.43-1.01 3.19-.12.71.82.76 1.96-.77 3.27l-1.47 1.26.16.18c.67.78 1.52.85 2.44.05.61-.52 1.04-1.27 1.15-1.95l.99.36c-.17.88-.73 1.77-1.55 2.48-1.4 1.21-2.78 1.21-3.98-.19Zm-.39-2.33.62.71 1.43-1.23c.92-.79.87-1.37.5-1.81-.44-.51-1.14-.46-1.85.14-.7.6-.97 1.39-.7 2.18ZM118.79 139.48l-.69-.97c.09-.05.16-.1.24-.15 1.07-.76 1.27-1.89.41-3.09l-1.95-2.74 1-.71 3.92 5.5-.96.68-.66-.92c.11.9-.34 1.72-1.31 2.4ZM118.59 142.1l-.91.57-1.76-2.96.77-.48 1.9 2.88ZM112.39 136.34v1.1c-.69-.09-1.63.09-2.41.51-1 .54-1.25 1.07-.98 1.57.72 1.34 3.86-1.85 5.14.51.58 1.07.01 2.3-1.51 3.13-.77.42-1.76.69-2.46.63v-1.1c.73.06 1.39-.14 1.97-.46.94-.51 1.21-1.11.96-1.58-.76-1.4-3.91 1.78-5.16-.53-.58-1.08.03-2.3 1.62-3.15.99-.53 2.13-.76 2.83-.63ZM96.85 142.42l2.72 1.96c.16-.07.34-.15.52-.21l2.09-.72-.89-2.57 1.21-.42 2.92 8.44-3.29 1.14c-2.19.76-3.9.11-4.54-1.73-.45-1.3-.1-2.48.94-3.31l-2.98-2.14 1.31-.45Zm1.94 5.49c.42 1.21 1.46 1.61 3.01 1.08l2.05-.71-1.31-3.8-2.05.71c-1.54.53-2.11 1.51-1.69 2.72ZM88.68 147.38l5.37-1.14c-.4-1.13-1.5-1.7-2.81-1.43-.77.16-1.37.56-1.74 1.2l-.83-.63c.45-.83 1.28-1.39 2.38-1.63 2.13-.45 3.86.66 4.27 2.63.42 1.96-.7 3.67-2.61 4.07-1.91.41-3.56-.68-3.99-2.71-.02-.1-.04-.25-.05-.37Zm5.55-.28-4.24.9c.36 1.08 1.36 1.69 2.52 1.45 1.15-.24 1.83-1.2 1.72-2.35ZM87.4 145.28l-.4 1.02c-.61-.34-1.56-.54-2.44-.44-1.13.12-1.56.51-1.5 1.09.16 1.51 4.27-.25 4.56 2.42.13 1.2-.86 2.13-2.59 2.32-.88.09-1.89-.03-2.51-.35l.42-1.02c.65.33 1.34.4 2 .32 1.07-.11 1.54-.56 1.49-1.1-.17-1.59-4.29.17-4.58-2.45-.13-1.22.9-2.11 2.69-2.3 1.12-.12 2.26.1 2.86.49ZM80.95 148.59c.03 2.02-1.44 3.47-3.47 3.5-2.03.03-3.53-1.37-3.56-3.39-.03-2.02 1.42-3.48 3.45-3.51s3.54 1.38 3.58 3.4Zm-5.79.09c.02 1.44 1.01 2.36 2.31 2.34 1.3-.02 2.27-.97 2.25-2.41-.02-1.44-1.02-2.37-2.32-2.35-1.3.02-2.26.98-2.23 2.42ZM71.51 154.54l-1.22-.1.75-9.44 1.22.1-.75 9.44ZM61.46 150.47l1.12-6.67 1.15.19-.17 1.01c.61-.61 1.5-.86 2.45-.7 1.72.29 2.71 1.43 2.38 3.39l-.65 3.84-1.21-.2.62-3.7c.22-1.31-.32-2.07-1.47-2.27-1.26-.21-2.2.43-2.44 1.87l-.58 3.45-1.21-.2ZM56.69 142.61c.44-.21 1.02-.21 1.55-.06 1.32.36 1.87 1.29 1.51 2.61l-.98 3.58 1.11.3-.27.97-1.11-.3-.39 1.43-1.18-.32.39-1.43-1.87-.51.27-.97 1.87.51.97-3.53c.19-.7-.07-1.2-.72-1.37-.34-.1-.71-.08-1.01.05l-.14-.95ZM52.77 150.2c-.15.42-.6.64-1.05.49-.45-.15-.67-.6-.53-1.01.15-.43.59-.66 1.05-.5.45.15.67.6.53 1.02Zm.48-2.05-1.16-.4 2.2-6.39 1.16.4-2.2 6.39ZM51.38 143.98c-.82 1.84-2.76 2.55-4.61 1.73-1.86-.82-2.63-2.73-1.81-4.57.82-1.84 2.75-2.56 4.61-1.74 1.86.82 2.64 2.74 1.82 4.59Zm-5.3-2.34c-.58 1.32-.07 2.56 1.12 3.09s2.47.07 3.05-1.25c.58-1.32.07-2.58-1.12-3.11s-2.46-.06-3.04 1.26ZM37.46 137.37l1.99-3.34 1.05.63-1.92 3.22c-.68 1.14-.44 2.04.55 2.63 1.12.67 2.24.43 2.99-.83l1.79-2.99 1.05.63-3.47 5.81-1.01-.6.52-.88c-.78.34-1.73.23-2.65-.32-1.41-.84-1.93-2.25-.91-3.96ZM23.19 132.35l5.92-6.69.78.69-.4 8.54 4.41-4.99.96.85-5.92 6.69-.78-.69.4-8.54-4.41 4.99-.96-.85ZM21.28 121.34l3.61 4.13c.79-.9.76-2.14-.12-3.15-.52-.6-1.16-.92-1.9-.93l.15-1.03c.94 0 1.84.44 2.58 1.29 1.44 1.64 1.31 3.69-.21 5.01-1.51 1.32-3.54 1.18-4.83-.29-1.28-1.47-1.14-3.44.42-4.81.08-.07.2-.16.3-.22Zm2.95 4.71-2.85-3.27c-.77.84-.81 2.02-.03 2.91.77.88 1.94 1.02 2.89.36ZM11.34 113.49l7.04-1.6.64.98-3.21 4.45 5.37-1.16.64.98-4.27 5.81-.64-.97 3.42-4.6-5.62 1.25-.57-.86 3.42-4.65-5.63 1.29-.6-.92ZM10.91 103.57l2.86-1.17.48 1.17-2.88 1.18-4.04 5.49-.52-1.26 3.27-4.43-5.45-.87-.48-1.17 6.75 1.06ZM7.87 93.91l1.54 5.26c1.1-.48 1.59-1.62 1.21-2.91-.22-.76-.67-1.32-1.33-1.64l.57-.87c.86.39 1.49 1.17 1.8 2.25.61 2.09-.36 3.89-2.3 4.46-1.92.56-3.71-.42-4.26-2.29s.41-3.6 2.4-4.19c.1-.03.25-.06.36-.08Zm.7 5.51-1.22-4.16c-1.05.44-1.58 1.49-1.25 2.63.33 1.13 1.33 1.74 2.47 1.54ZM5.48 87.16l4.02-.71.2 1.14-.88.16c.67.29 1.16.97 1.34 2.02.27 1.51-.37 2.61-1.52 2.81-1.07.19-2.07-.34-2.42-2.33l-.34-1.91-.24.04c-1.02.18-1.5.88-1.29 2.07.14.79.56 1.55 1.09 1.98l-.81.66c-.68-.59-1.15-1.53-1.34-2.6-.32-1.82.37-3.01 2.19-3.33Zm2.2.85-.93.17.33 1.86c.21 1.19.74 1.45 1.3 1.35.67-.12.98-.74.82-1.66-.16-.9-.7-1.55-1.52-1.71ZM2.18 81.24l1.18-.1c0 .1 0 .19.01.28.11 1.31.98 2.06 2.45 1.93l3.36-.28.1 1.22-6.74.56-.1-1.17 1.13-.09c-.82-.37-1.3-1.17-1.4-2.35ZM.03 79.71 0 78.64h3.45l.02.9-3.44.17ZM8.15 77.31l-.95-.55c.43-.56.76-1.46.79-2.34.04-1.13-.28-1.62-.86-1.64-1.52-.06-.36 4.26-3.05 4.16-1.21-.05-1.99-1.16-1.92-2.89.03-.88.3-1.86.7-2.44l.95.56c-.42.6-.58 1.27-.61 1.93-.04 1.07.33 1.61.87 1.63 1.59.06.45-4.27 3.08-4.17 1.22.05 1.96 1.2 1.89 2.99-.04 1.12-.43 2.22-.9 2.76ZM10.81 60.86 7.74 62.2c-.02.18-.05.37-.09.56l-.44 2.16 2.66.54-.25 1.25-8.75-1.77.69-3.41c.46-2.28 1.89-3.42 3.79-3.03 1.35.27 2.18 1.17 2.37 2.49l3.36-1.48-.28 1.36ZM5.1 59.74c-1.25-.25-2.13.44-2.46 2.04l-.43 2.13 3.94.8.43-2.13c.32-1.6-.23-2.59-1.48-2.84ZM10.69 51.28l-1.74 5.2c1.17.23 2.23-.42 2.65-1.69.25-.75.21-1.46-.15-2.11l.96-.39c.48.81.55 1.81.19 2.88-.69 2.07-2.52 2.99-4.43 2.35-1.9-.64-2.81-2.46-2.19-4.31.62-1.85 2.39-2.72 4.36-2.06.1.03.24.09.34.14ZM8.11 56.2l1.38-4.11c-1.12-.24-2.15.32-2.53 1.44-.37 1.11.1 2.19 1.15 2.67ZM13.14 51.27l-.67-.87c.61-.35 1.26-1.07 1.62-1.87.47-1.03.35-1.61-.17-1.84-1.38-.63-1.95 3.81-4.4 2.69-1.1-.5-1.4-1.83-.68-3.41.36-.8.99-1.61 1.58-1.99l.67.88c-.61.39-1.02.95-1.3 1.56-.44.98-.3 1.61.19 1.84 1.45.66 2.04-3.78 4.43-2.69 1.11.51 1.36 1.85.61 3.49-.46 1.02-1.24 1.89-1.88 2.22ZM13.57 43.94c-1.74-1.02-2.22-3.03-1.19-4.78s3.01-2.3 4.75-1.28 2.23 3.03 1.21 4.78-3.03 2.31-4.76 1.29Zm2.93-5c-1.24-.73-2.54-.36-3.2.76-.66 1.12-.35 2.44.89 3.17s2.56.36 3.21-.76c.66-1.12.34-2.44-.91-3.17ZM13.28 32.85l.71-1 7.73 5.46-.71 1-7.73-5.46ZM21.91 26.3l5.16 4.37-.75.89-.78-.66c.21.83-.03 1.73-.65 2.46-1.13 1.33-2.61 1.6-4.13.31l-2.97-2.51.79-.93 2.86 2.42c1.01.86 1.95.78 2.7-.11.82-.97.75-2.11-.36-3.05l-2.67-2.26.79-.93ZM31.09 26.19c-.04.49-.34.99-.74 1.37-.98.95-2.06.95-3.01-.03l-2.58-2.67-.83.8-.7-.72.83-.8-1.03-1.06.88-.85 1.03 1.06 1.39-1.35.7.72-1.39 1.35 2.55 2.63c.51.52 1.07.55 1.55.08.26-.25.42-.57.47-.9l.89.37ZM26.55 18.95c-.29-.34-.25-.84.11-1.15.36-.31.85-.28 1.14.05.3.35.27.84-.1 1.16-.36.31-.85.28-1.14-.06Zm1.52 1.45.93-.79 4.38 5.15-.93.79-4.38-5.15ZM32.62 20.92c-1.17-1.64-.79-3.67.86-4.85 1.65-1.18 3.69-.88 4.86.76 1.17 1.64.81 3.67-.84 4.86-1.65 1.18-3.7.88-4.88-.76Zm4.71-3.37c-.84-1.17-2.17-1.37-3.23-.61-1.06.76-1.31 2.09-.47 3.26s2.19 1.37 3.25.61c1.06-.76 1.3-2.09.46-3.26ZM45.35 12.29l1.87 3.41-1.07.59-1.8-3.29c-.64-1.16-1.53-1.42-2.55-.86-1.14.63-1.51 1.71-.8 3l1.67 3.05-1.07.59-3.25-5.93 1.03-.56.49.89c.11-.84.68-1.61 1.62-2.12 1.44-.79 2.91-.52 3.87 1.23Z"
/>
</svg>
</div>
<div class="resolutionWrap">
<div class="resolutionBlock" data-num="1">
<p class="resolutionTitle">転職する</p>
<p class="resolutionText">
転職活動中です。転職活動中です。転職活動中です。転職活動中です。転職活動中です。転職活動中です。転職活動中です。転職活動中です。転職活動中です。転職活動中です。
</p>
</div>
<div class="resolutionBlock" data-num="2">
<p class="resolutionTitle">WebGL頑張る</p>
<p class="resolutionText">
WebGLは楽しいけどむずかしいのでコツコツとやっていきたいです。WebGLは楽しいけどむずかしいのでコツコツとやっていきたいです。WebGLは楽しいけどむずかしいのでコツコツとやっていきたいです。WebGLは楽しいけどむずかしいのでコツコツとやっていきたいです。WebGLは楽しいけどむずかしいのでコツコツとやっていきたいです。
</p>
</div>
<div class="resolutionBlock" data-num="3">
<p class="resolutionTitle">デザインできるようになる</p>
<p class="resolutionText">
欲を言えばAfterEffectsとBlenderも習得したいです。欲を言えばAfterEffectsとBlenderも習得したいです。欲を言えばAfterEffectsとBlenderも習得したいです。欲を言えばAfterEffectsとBlenderも習得したいです。欲を言えばAfterEffectsとBlenderも習得したいです。欲を言えばAfterEffectsとBlenderも習得したいです。
</p>
</div>
<div class="resolutionBlock" data-num="4">
<p class="resolutionTitle">たくさんライブに行く</p>
<p class="resolutionText">
邦ロックが好きです。好きなバンドはいろいろありますがチャットモンチーは不滅です。
</p>
</div>
<div class="resolutionBlock" data-num="5">
<p class="resolutionTitle">ダイエットする</p>
<p class="resolutionText">
お金を掛けずに楽して痩せられる方法を探しています。お金を掛けずに楽して痩せられる方法を探しています。お金を掛けずに楽して痩せられる方法を探しています。
</p>
</div>
</div>
</div>
</section>
<section class="marginArea"></section>body {
background-color: #f2f2ef;
}
p {
margin: 0;
color: #231815;
font-family: "Noto Sans JP", sans-serif;
}
.marginArea {
height: 500px;
}
.scrollArea__inner {
width: 90%;
margin-inline: auto;
display: flex;
justify-content: space-between;
}
.numWrap {
width: 40%;
position: relative;
}
.numWrap.is-active {
position: sticky;
top: 20%;
}
.num {
font-size: 30px;
font-family: "Montserrat", sans-serif;
}
.resolutionWrap {
width: 60%;
}
.resolutionBlock {
padding: 100px 0;
border-top: 1px solid #231815;
}
.resolutionBlock:last-child {
border-bottom: 1px solid #231815;
}
.resolutionTitle {
font-size: 28px;
letter-spacing: 0.04em;
}
.resolutionText {
font-size: 16px;
letter-spacing: 0.04em;
margin-top: 30px;
line-height: 1.7;
}
.numWrap {
height: fit-content;
}
.numWrap svg,
.num {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}const blocks = document.querySelectorAll(".resolutionBlock");
const numWrap = document.querySelector(".numWrap");
const svg = document.querySelector(".numWrap svg");
const num = document.querySelector(".num");
const options = {
root: null,
rootMargin: "0px 0px -90% 0px",
threshold: 0,
};
const observer = new IntersectionObserver(doWhenIntersect, options);
blocks.forEach((block) => {
observer.observe(block);
});
function doWhenIntersect(entries) {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
numWrap.classList.add("is-active");
num.innerHTML = `0${entry.target.dataset.num}`;
rotateAnim();
}
});
}
function rotateAnim() {
window.addEventListener("scroll", function () {
svg.style.transform =
"translate(-50%, -50%) rotate(" + window.pageYOffset + "deg)";
});
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.