Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useEffect, useState, useCallback } from "react";
- import zenscroll from 'zenscroll';
- import "./ScrollCircles.css";
- const ScrollCircles = () => {
- const [selectedCircle, setSelectedCircle] = useState("inspiration");
- const [isMobile, setIsMobile] = useState(false);
- let isScrolling = null;
- useEffect(() => {
- document.addEventListener("scroll", handleScroll, {passive: true});
- window.addEventListener("resize", handleResize);
- handleResize();
- //Unmount
- return () => {
- clearTimeout(isScrolling);
- isScrolling = null;
- document.removeEventListener("scroll", handleScroll, {passive: true});
- window.removeEventListener("resize", handleResize);
- }
- }, []);
- const handleResize = () => {
- const mobileQuery = window.matchMedia("(max-width: 600px)");
- if(mobileQuery.matches) {
- setIsMobile(true);
- } else {
- setIsMobile(false);
- }
- }
- const getPercentOfPageScrolled = () => {
- const circles = document.querySelector("#circle-container");
- const containerHeight = circles.offsetHeight || circles.scrollTop;
- const containerScroll = circles.getBoundingClientRect().top;
- if(containerScroll < 0) {
- return (Math.abs(containerScroll) / containerHeight) * 480;
- }
- else return 0;
- }
- const snapToSection = () => {
- const scrolled = getPercentOfPageScrolled();
- const containerHeight = document.querySelector(".sections").offsetHeight;
- if(scrolled > 60 && scrolled < 180) {
- zenscroll.to(document.querySelector(".idea-section"));
- }
- else if(scrolled >= 180 && scrolled < 300) {
- zenscroll.to(document.querySelector(".places-section"));
- }
- else if(scrolled >= 300 && scrolled <= 360) {
- zenscroll.to(document.querySelector(".people-section"));
- }
- }
- const selectCircles = (scrolled) => {
- if(scrolled > 60 && scrolled < 180) {
- setSelectedCircle("inspiration");
- }
- else if(scrolled >= 180 && scrolled < 300) {
- setSelectedCircle("ideation");
- }
- else if(scrolled >= 300) {
- setSelectedCircle("implementation");
- }
- else {
- setSelectedCircle("");
- }
- }
- const handleScroll = () => {
- window.clearTimeout(isScrolling);
- const circles = document.querySelector(".circles");
- const words = document.querySelectorAll(".circle span");
- const scrolled = getPercentOfPageScrolled();
- selectCircles(scrolled);
- if(scrolled > 0 && scrolled < 360) {
- document.querySelector(".page-practice").style.backgroundColor = "#000";
- }
- else {
- document.querySelector(".page-practice").style.backgroundColor = "#000";
- }
- if(scrolled >= 120 && scrolled <= 360) {
- circles.style.transform = `rotate(${scrolled - 120}deg)`;
- words.forEach(el => el.style.transform = `rotate(-${scrolled - 120}deg)`);
- }
- else if(scrolled > 360) {
- circles.style.transform = `rotate(${240}deg)`;
- words.forEach(el => el.style.transform = `rotate(-${240}deg)`);
- }
- else {
- circles.style.transform = `rotate(${0}deg)`;
- words.forEach(el => el.style.transform = `rotate(-${0}deg)`);
- }
- isScrolling = setTimeout(snapToSection, 66);
- }
- return(
- <div id="circle-container">
- <div className="circles-side">
- <div className="circles">
- <div className={selectedCircle === "ideation" ? "circle selected-circle" : "circle"}>
- <span>Experience</span>
- </div>
- <div className={selectedCircle === "implementation" ? "circle selected-circle" : "circle"}>
- <span>People</span>
- </div>
- <div className={selectedCircle === "inspiration" ? "circle selected-circle" : "circle"}>
- <span>Design</span>
- </div>
- </div>
- </div>
- <div className="sections">
- <section className={`circle-sections main-section ${selectedCircle === "" ? "visible" : ""}`}>
- <h2 className={selectedCircle === "inspiration" ? "text-grey reg lighter" : "text-grey reg lighter"}>
- We see these three features most often in our work: design, experience, and people. We use them to ensure success for our clients.
- </h2>
- </section>
- <section className={`circle-sections idea-section ${selectedCircle === "inspiration" ? "visible" : ""}`}>
- <h2 className={selectedCircle === "inspiration" ? "text-grey reg lighter" : "text-grey reg lighter"}>
- <h3 className="text-red reg text-bold">1</h3>
- <br/>
- We bring our passion for design to create brands that surprise, delight, and deliver positive emotions.
- </h2>
- </section>
- <section className={`circle-sections places-section ${selectedCircle === "ideation" ? "visible" : ""}`}>
- <h2 className={selectedCircle === "ideation" ? "text-grey reg lighter" : "text-grey reg lighter"}>
- <h3 className="text-red reg text-bold">2</h3>
- <br/>
- We guide an organization’s brand across all touchpoints both physical and digital to ensure a meaningful and memorable experience.
- </h2>
- </section>
- <section className={`circle-sections people-section ${selectedCircle === "implementation" ? "visible" : ""}`}>
- <h2 className={selectedCircle === "implementation" ? "text-grey reg lighter" : "text-grey reg lighter"}>
- <h3 className="text-red reg text-bold">3</h3>
- <br/>
- We help organization’s bring their brand to life by designing for peoples’ preferences, desires, and values.
- </h2>
- </section>
- </div>
- </div>
- )
- }
- export default ScrollCircles;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement