The impressive wipe effect in velocity.js using css and jquery

I am looking to achieve a slide effect similar to Powerpoint's wipe using css, jquery, or velocity.js.

Here is a video showing the desired effect: https://www.youtube.com/watch?v=VSBB0wfccws

I attempted to use css3 masking (svg/gradient) but was unsuccessful.

Below is an example of a simple wipe effect without masking:

http://plnkr.co/edit/Sys20pLwGb1MK8gBiX5a?p=preview

$(function(){
  $('.second').velocity({    
    width: ['100%', 0]
  },{
    duration: 2000,
    loop: true
  })
})

Ideally, this effect should be compatible with all modern browsers.

jquerycssvelocity.js

Answer №1

Alternative to velocity.js

CSS3 - Using -webkit-/-moz-/-o-

This method is compatible with Chrome only. To make it work across different browsers, you can refer to resources like http://www.w3schools.com/css/css3_transitions.asp or explore similar examples like this one which achieves the desired effect on Chrome onhover: http://css-tricks.com/webkit-image-wipes/

As far as I know, the mask attribute functions in Safari, Chrome, and possibly Opera as well.

jQuery

You may find what you're looking for here: http://jquery.malsup.com/cycle/wipe.html

You could also explore this option: Nivo slider effectslicedownright

Other potentially useful resources:

Jquery image transition left to right and fade in, in a slideshow

CSS fade left to right

Fade effect left to right on an image

CSS Fade Between Background Images on Hover

In my view, if one method works effectively, stick with that rather than creating another one. There are numerous options available, especially when searching for "jQuery fade left to right" or "jQuery fade left to right between two images."

Tips for using velocity.js

You might find the answer here: in the fade & slide section

Alternatively, check out this resource: for insights on the stagger section.

Answer №2

I'm uncertain about your exact requirements. The video doesn't quite capture it accurately. Check Out This Example

// Sample code can be found below

$(function(){
    $('.second').velocity({    
        width: [0,'100%']
    },{
        duration: 1000,
        delay:2000,
        loop: 1
    });
    $('.first').velocity({    
        opacity:[1,0],
    },{
        duration: 600,
        delay:2000,
        loop:1
    })
});

Answer №3

Take a look at the link below, it could be helpful

Below is the basic code snippet

$('#wipe1').cycle({ 
  fx:     'wipe', 
  speed:   1000, 
  timeout: 6000, 
  delay:  -4000, 
  clip:   'l2r' 
});

jQuery Plugin

Best regards, Mahadevan

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

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

htmljquerycssweb

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

I seem to be experiencing a mental block on how to arrange bootstrap cards in a horizontal layout using a for each loop. By default, they appear vertically. Below is my razor code: @foreach (var item in Model) { var imgUrl = Url.Content("~/Conte ...

htmlcssasp.net-mvctwitter-bootstrap

Unable to store the value of Response.d in a local variable following a jQuery ajax request

I am facing an issue while trying to store data from a method in the code-behind into a local variable. Despite creating a local variable and attempting to log the result of an Ajax call in two different locations - inside the success callback method and ...

jqueryajax

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

I am currently working on customizing the appearance of a JavaScript date counter. My goal is to style the days, hours, minutes, and seconds individually. Ideally, I want each unit to be right-aligned within its own div, with specific left and top absolute ...

javascripthtmlcss

Encountering an issue with the message "SyntaxError: Unexpected token < in django-jquery-file

I am currently working on implementing django-jquery-fileupload into my project. https://github.com/sigurdga/django-jquery-file-upload However, I encounter an "Error SyntaxError: Unexpected token < " when attempting to click the "start" upload button. ...

javascriptjquerypythondjangofile-upload

What causes the child positioning to break when a CSS-Filter is applied to the parent element?

One of my projects includes a title-screen "animation" where the title is initially centered on a fullscreen page and then shrinks and sticks to the top as you scroll down. I have provided a simplified working example below: $(window).scroll( () => ...

csscss-positioncss-transformscss-filters

.Certain IDs on a website may not respond to clicks due to various reasons

I have created a JavaScript file to automatically click a button on a website using a Chrome extension. When testing the code using Chrome Script snippet, I noticed that it worked for some IDs but not for others. Can someone please help me with this issue? ...

javascriptjqueryclick

The callback in Jquery getJSON does not execute even when a valid JSON response is received

My server is sending valid JSON objects (as verified by jsonlint.com) that have this structure: "{\"encryption\": {\"key\": \"gKV0oPJwC5CBQxmn\"}}" This is how my HTML file looks: <html> <head> <title&g ...

javascriptjqueryajaxjson

Having difficulty stripping HTML tags from the response JSON

Hello, I am new to AngularJS and facing an issue with parsing JSON data. The JSON response contains HTML format data, with tags like <, BR, etc. When checking the response in a browser, it appears fine; however, on devices such as tablets or mobile phon ...

javascriptjqueryhtmljsonangularjs

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

javascriptcssreactjsreact-dnd

Enhancing Sharepoint Webpart with AJAX Capabilities

Seeking a step-by-step guide on how to implement a Webpart with AJAX functionality in Sharepoint 2010 using only jQuery and avoiding the Microsoft AJAX toolkit. Can all the necessary components be wrapped in a webpart for easy deployment to a Sharepo ...

jqueryajaxsharepointsharepoint-2010

Bootstrap for arranging DIVs in a responsive manner

I am trying to place some DIV elements inside their parent container, whether it is the body, a table's cell, or another div, using Bootstrap 5. The desired layout is shown on the attached illustration: https://i.sstatic.net/QKwjK.png If there is an ...

csstwitter-bootstrapresponsive-designbootstrap-5getuikit

Challenges with z-index in Chrome/Safari and Firefox when nesting elements

In the current setup, it seems that .second needs to be positioned above .third, which is only happening in Firefox. Unfortunately, I am facing difficulty as I cannot separate .second from .fifth. Just to provide some context: .third is intended to act as ...

htmlcssipadbrowserz-index

What is the best way to show an element when hovering over another element?

I'm looking for a CSS-only solution (NO JQuery) to display a FontAwsome icon (<i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success hidearrowbounce'></i>) only when hovering over another element. However, despite ...

css

Changing the color of a pressed Bootstrap 4 button

After making changes to the bootstrap css class of the button such as the color, font size, and font color, I noticed that when I click and hold the mouse on the button, the color changes. Even though I set the color to green, when I click and hold the mo ...

htmlcssbuttonbootstrap-4

Show me how to customize the default confirmation box using just CSS!

Is it possible to style the standard window.confirm using only CSS without any additional JavaScript code? If so, how can this be achieved? ...

cssconfirm

jQuery causing trouble with AJAX in Rails

Currently, I am fetching a list of users from the controller side and generating the HTML code to append it. This is how I wrote the code: $.ajax({ type : "get", contentType : "application/json; charset=utf-8", url : "/users/sear ...

javascriptjqueryhtmlruby-on-railsajax

Icon Searchbar Feature in Ionic 2

I am currently working with Ionic2 and have integrated the ion-searchbar component into my project: https://i.sstatic.net/CqmF4.png Question Would it be possible to customize the search icon? The default icon is a magnifying glass, but I would like to r ...

javascripthtmlcssangularionic2

best practices for creating space between flexbox items

My task involves presenting a continuous scroll list of scheduled jobs using Angular Material. Each item in the list needs to be divided into three columns utilizing flexbox. Despite my efforts, I am struggling with adding space between the columns within ...

cssangularflexboxangular-materialangular-cdk