Create Dream Website

Menu

PLAY 360° VIDEO GALLERY ON SCROLL GSAP Elementor Free

By /

Class

CSS
page-wrap

container

scroll-track

scroll-div

grid grid-list

block

video w-background-video w-background-video-atom

Extra:

video-list

ID

CSS
w-node-_9fd62eab-0280-f145-8df2-063461c231cd-6a652656

w-node-fc16a369-52e7-42a6-d453-b98107c0bfb0-6a652656

103dc3dc-d536-3819-ccf2-f4f638b51351-video

w-node-_613fd2b0-1bdc-a0a6-0c5d-456e3ce21c77-6a652656

78658693-dd41-1245-a448-e38f971d4320-video

w-node-a11bb637-7b11-1305-1681-7185f3ca1e4b-6a652656

3298d594-5d77-4e3c-e357-2e28d3eeae6e-video

w-node-ebb6d462-ce1a-e10b-e72e-125e0284b107-6a652656

28dbf48c-dfb0-7373-9c71-7050162ba4e7-video

w-node-_76a52f02-0cd5-394a-5005-480909af5a95-6a652656

0c1a543f-1ec7-fa38-d03b-b11db89979e5-video

w-node-eb73c93a-5f7d-20f1-5d96-cfddef4dfaa9-6a652656

4a1a29b7-6d65-401a-8233-b220ae86bb6d-video

w-node-_2338c1b8-30f5-d5f8-68aa-6ffd2af512f1-6a652656

d4hvbdhdhajaas-sksksdk-vide

w-node-_7be4fed4-24cc-3ddb-a5bd-49625389ecd8-6a652656

db3d4d57-ccb3-c235-8b9d-e8bc394ed634-video

CSS

CSS
<style>
.w-background-video {
    position: relative;
    overflow: hidden;
    height: 500px;
    color: white;
}
.w-background-video > video {
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    right: -100%;
    bottom: -100%;
    top: -100%;
    left: -100%;
    object-fit: cover;
    z-index: -100;
}
.w-background-video > video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}
.w-background-video--control {
    position: absolute;
    bottom: 1em;
    right: 1em;
    background-color: transparent;
    padding: 0;
}
.w-background-video--control > [hidden] {
    display: none !important;
}
.w-slider {
    position: relative;
    height: 300px;
    text-align: center;
    background: #dddddd;
    clear: both;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}



.container {
    width: 100%;
    max-width: 62rem;
    margin-right: auto;
    margin-left: auto;
}

.grid {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: 100vmin;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    grid-auto-flow: row;
    grid-auto-columns: 10%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    -ms-grid-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}


.video { position: absolute;
left: -50%;
top: -50%;
right: 0%;
bottom: 0%;
width: 200%;
height: 200%;
-webkit-filter: brightness(100%);
filter: brightness(100%); }
.block {
    position: relative;
    overflow: hidden;
    border-radius: 1vw;
}

.scroll-track {
    position: relative;
    height: 300vh;
}

._100vh {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 10vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.scroll-div {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}


.link {
    font-size: 2rem;
    line-height: 1.2;
}

#w-node-_9fd62eab-0280-f145-8df2-063461c231cd-6a652656 {
    -ms-grid-column: 4;
    grid-column-start: 4;
    -ms-grid-column-span: 3;
    grid-column-end: 7;
    -ms-grid-row: 4;
    grid-row-start: 4;
    -ms-grid-row-span: 3;
    grid-row-end: 7;
}

#w-node-fc16a369-52e7-42a6-d453-b98107c0bfb0-6a652656 {
    -ms-grid-column: 7;
    grid-column-start: 7;
    -ms-grid-column-span: 3;
    grid-column-end: 10;
    -ms-grid-row: 6;
    grid-row-start: 6;
    -ms-grid-row-span: 2;
    grid-row-end: 8;
}

#w-node-_613fd2b0-1bdc-a0a6-0c5d-456e3ce21c77-6a652656 {
    -ms-grid-column: 5;
    grid-column-start: 5;
    -ms-grid-column-span: 2;
    grid-column-end: 7;
    -ms-grid-row: 7;
    grid-row-start: 7;
    -ms-grid-row-span: 2;
    grid-row-end: 9;
}

#w-node-a11bb637-7b11-1305-1681-7185f3ca1e4b-6a652656 {
    -ms-grid-column: 7;
    grid-column-start: 7;
    -ms-grid-column-span: 2;
    grid-column-end: 9;
    -ms-grid-row: 4;
    grid-row-start: 4;
    -ms-grid-row-span: 2;
    grid-row-end: 6;
}

#w-node-ebb6d462-ce1a-e10b-e72e-125e0284b107-6a652656 {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-column-span: 2;
    grid-column-end: 5;
    -ms-grid-row: 7;
    grid-row-start: 7;
    -ms-grid-row-span: 3;
    grid-row-end: 10;
}

#w-node-_76a52f02-0cd5-394a-5005-480909af5a95-6a652656 {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-span: 3;
    grid-column-end: 4;
    -ms-grid-row: 5;
    grid-row-start: 5;
    -ms-grid-row-span: 2;
    grid-row-end: 7;
}

#w-node-eb73c93a-5f7d-20f1-5d96-cfddef4dfaa9-6a652656 {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-span: 2;
    grid-column-end: 4;
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-row-span: 3;
    grid-row-end: 5;
}

#w-node-_2338c1b8-30f5-d5f8-68aa-6ffd2af512f1-6a652656 {
    -ms-grid-column: 4;
    grid-column-start: 4;
    -ms-grid-column-span: 2;
    grid-column-end: 6;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 3;
    grid-row-end: 4;
}

#w-node-_7be4fed4-24cc-3ddb-a5bd-49625389ecd8-6a652656 {
    -ms-grid-column: 6;
    grid-column-start: 6;
    -ms-grid-column-span: 3;
    grid-column-end: 9;
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-row-span: 2;
    grid-row-end: 4;
}

@media (max-width: 768px) {
  .scroll-div {
    min-height: 50vh;
  }

  .scroll-div {

  top:50px;
}


  </style>

JS

CSS
<style>
    .video-list {
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg); /* Initial smaller scale and no rotation */
        -webkit-filter: brightness(100%);
        filter: brightness(90%);
        transition: transform 0.2s ease-out; /* Smooth transition */
    }

    .grid-list {
        --big-tile-size: 50vmin;
        --scale: 1;
        --rotation: 0deg;
        --tile-size: calc(var(--big-tile-size) / 3);

        position: relative;
        transform: translate(-0%, -10%) scale(0.8) rotate(0deg); /* Initial smaller scale and no rotation */
        transition: transform 0.2s ease-out; /* Smooth transition */
    }
</style>

<script>
document.addEventListener('scroll', () => {
    const videoElements = document.querySelectorAll('.video-list'); // Select all video elements
    const gridElement = document.querySelector('.grid-list');

    const scrollTop = window.scrollY;
    const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
    const maxRotation = 360; // Max rotation in degrees
    const maxScale = 1.4;    // Max zoom scale

    // Calculate rotation and scale based on scroll position
    const rotationAngle = (scrollTop / documentHeight) * maxRotation;
    const scaleAmount = 0.8 + ((scrollTop / documentHeight) * (maxScale - 0.8)); // Zoom from 0.8 to 1.4

    // Apply the rotation and zoom to the grid
    gridElement.style.transform = `translate(-0%, -10%) scale(${scaleAmount}) rotate(${rotationAngle}deg)`;

    // Apply the rotation and zoom to each video
    videoElements.forEach(videoElement => {
        videoElement.style.transform = `translate(-50%, -50%) scale(${scaleAmount}) rotate(${-rotationAngle}deg)`;
    });
});
</script>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top