"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel

I have developed a sample that functions just as I envision my final outcome to function, with the exception of triggering on mouse-over. Instead, I would like it to activate as a page transition when scrolling with the mouse.

(move your cursor over the image to see the effect) Check out the Example:

My goal is to create a website consisting of only 2 pages, each featuring full-screen images. I aim to achieve a smooth circular masking effect during transitions between the two pages. Any suggestions on how I can make the mask animate as I scroll down and up?

javascripthtmlcssmaskclipping

Answer №1

You have the option to achieve this using SVG

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {

        $('.seven').velocity({
            r: '1000'
        })
    } else {
        $('.seven').velocity({
            r: '0'
        })
    }
    if ($(window).scrollTop() > 300) {

        $('.six').velocity({
            r: '1000'
        })
    } else {
        $('.six').velocity({
            r: '0'
        })
    }
    if ($(window).scrollTop() > 500) {

        $('.five').velocity({
            r: '1000'
        })
    } else {
        $('.five').velocity({
            r: '0'
        })
    }
    if ($(window).scrollTop() > 700) {

        $('.four').velocity({
            r: '1000'
        })
    } else {
        $('.four').velocity({
            r: '0'
        })
    }
    if ($(window).scrollTop() > 900) {

        $('.three').velocity({
            r: '1000'
        })
    } else {
        $('.three').velocity({
            r: '0'
        })
    }
    if ($(window).scrollTop() > 1200) {

        $('.two').velocity({
            r: '1000'
        })
    } else {
        $('.two').velocity({
            r: '0'
        })
    }
    if ($(window).scrollTop() > 1500) {

        $('.one').velocity({
            r: '1000'
        })
    } else {
        $('.one').velocity({
            r: '0'
        })
    }


})
div {
    width:100vw;
    height:400vw;
}
svg {
    position:fixed;
}
circle {
    transition:.5s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<div>
    <svg width="100%" height="100%" viewbox="0 0 500 500">
        <clippath id="clip">
            <circle cx="200" cy="100" r="0" class="one" />
        </clippath>
        <clippath id="clip2">
            <circle cx="200" cy="100" r="0" class="two" />
        </clippath>
        <clippath id="clip3">
            <circle cx="200" cy="100" r="0" class="three" />
        </clippath>
        <clippath id="clip4">
            <circle cx="200" cy="100" r="0" class="four" />
        </clippath>
        <clippath id="clip5">
            <circle cx="200" cy="100" r="0" class="five" />
        </clippath>
        <clippath id="clip6">
            <circle cx="200" cy="100" r="0" class="six" />
        </clippath>
        <clippath id="clip7">
            <circle cx="200" cy="100" r="0" class="seven" />
        </clippath>
        <clippath id="clip8">
            <circle cx="200" cy="100" r="0" />
        </clippath>
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-3.jpg" x="0" y="-100" width="500" height="500" class="one" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-2.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip7)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-1.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip6)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-4.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip5)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-5.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip4)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-6.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip3)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-7.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip2)" />
        <image xlink:href="http://lorempixel.com/output/sports-q-c-500-500-8.jpg" x="0" y="-100" width="500" height="500" clip-path="url(#clip)" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS ng-click incompatibility causing non-functioning popover content

I've gone through all the posts regarding this issue, but unfortunately, none of them proved to be helpful. It seems that the jsfiddle and plunker links provided are no longer functioning as expected. My objective is quite simple - I want to place a ...

javascriptjqueryangularjstwitter-bootstrapangularjs-ng-click

Use regular expressions to automatically generate HTML attributes in your styling

My ionic/angular app generates a custom tag element with a unique _ngcontent attribute on each refresh, like so: <tag _ngcontent-hgr-c2>...</tag> (1st refresh) <tag _ngcontent-agj-c7>...</tag> (2nd refresh) <tag _ngcontent-cfx-c5 ...

htmlcsscss-selectors

How can I make a div move to the position of another div and stay with it when the screen is resized?

In my card game project, I am dealing with an issue where cards are not aligning properly with the designated "dropZonePositions" when the screen is resized. Despite creating animations for the card movement that I'm satisfied with, the problem arises ...

jqueryhtmlcssjquery-animatecss-grid

A guide to increasing a loop counter in Vue

Having trouble looping through a specific group of objects in a multi-object array? Take a look at the code below: <template> <div> <h1>My Test App</h1> <button v-on:click="getHockeyData">Get Team Data< ...

javascriptarraysvue.js

Ways to repair the error message: "Unable to access property 'clientWidth' of undefined"

Whenever I resize the window, I encounter an error stating "Cannot read property 'clientWidth' of null". It appears to be related to the fact that the ref is null. Do you have any suggestions on how to troubleshoot this issue? import React, { us ...

javascriptreactjs

The issue of jQuery not functioning properly within a Rails environment

Despite my efforts, I am still struggling to make jquery work in rails. I have installed the 'jquery-rails' gem and added the require statements in the application.js file. Below is a sample test page that I have been testing: <!DOCTYPE htm ...

javascriptjqueryruby-on-rails

What is the process of transforming XMLHttpRequest into JQuery-UI-Autocomplete?

Previously, I was utilizing manual XMLHttpRequest to connect with PHP files and the Database using the following code: if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, ...

javascriptjqueryajaxjquery-uijquery-ui-autocomplete

Challenges with ColdFusion's floating point calculations

I am encountering an issue with my program where it is not displaying two decimal points properly. For example, when I enter 140.00, it shows as 140.0. Strangely, if I enter 140.15, it displays correctly as 140.15. It seems to consistently drop the zero. B ...

javascriptcoldfusion

Troubleshooting Issues with Passing Values in jQuery AJAX POST Requests

Currently, I am working on two basic PHP pages: notification.php <html> <head><title></title> <meta charset="UTF-8"> <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script> <script src="ht ...

javascriptphpjqueryajaxfirebase

Verify the presence of a JSON object within the session storage using JavaScript

I'm currently developing a website where some data is stored within the session. In the initial page, I need to verify if the JSON object already exists in the session. Below is the code snippet that's causing issues: var passedTotal = JSON.par ...

javascriptjsonsessionsession-variables

Delete the file containing Mongoose references

I'm facing an issue with deleting questions when a survey is deleted in the Survey model. Even after deleting the survey, the question remains intact in the database. Survey Schema: let surveyModel = mongoose.Schema( { Title: String, T ...

javascriptmongodbexpressmongoose

preventing elements from moving unexpectedly as the navigation bar becomes fixed at the top of the page

I have a website that features a Bootstrap 3 navbar. This navbar is positioned 280px below a block div and becomes sticky at the top of the page when scrolled to that point. HTML (within < head > tags) <script> $(document).ready(function() ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can you explain the slow parameter feature in Mocha?

While configuring mochaOpts in Protractor, one of the parameters we define is 'slow'. I'm unsure of the purpose of this parameter. I attempted adjusting its value but did not observe any impact on the test execution time. mochaOpts: { re ...

javascriptselenium-webdriverautomated-testsprotractormocha.js

What steps can I take to stop jQuery's $.getJSON function from converting my AJAX response keys into integers?

I am facing an issue where JQuery is changing the type of keys in a JSON response object from text to integer when populating a select box. This causes the response object to be reordered based on the numeric indexes, disrupting the order of the select box ...

javascriptjqueryajaxarrays

Fixed-bottom footer in Bootstrap 5 that overlays content

Having trouble creating a fixed footer using the fixed-bottom class in react & bootstrap. The issue is that it's covering some content and I've tried various solutions without success. Any suggestions on how to fix this? (Code and Demo provided b ...

javascripthtmlreactjsfooterbootstrap-5

Choosing an option beforehand using angular-ui-select2 version 0.0.5

I'm struggling with setting a default option in a select2 dropdown using Angular and an ng-model. Here's my implementation: Angular controller code snippet $scope.filter = { searchValue: '', departmentId: 'Department2' } ...

javascriptangularjsangular-uiui-select2

Tips on displaying the appropriate object value in a text field based on the selection from a dropdown menu

In my Ruby on Rails form, I have a dropdown menu with various category names: <td> <div class="div1"> <%= f.collection_select(:category_id, Category.all, :name, id: 'category_select', :include_blank => & ...

javascriptjqueryruby-on-railsrubyajax

Issue with CSS3 animations

.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; ...

cssanimation

Implementing a sleek show/hide transition using slideToggle in jQuery

Trying to implement show/hide content with slideToggle and it's functioning, but the animation effect on the table is not smooth. Attempted two different codes, but none provided the desired animation effect: $('.more').slideToggle(' ...

javascriptjqueryhtmlslidetoggle

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...

javascripthtmlcss