pixevil

pixevil supports this item

Supported

This author's response time can be up to 1 business day.

20 comments found.

Outstanding idea. I love it :)

Best regards. Tibi – FWD.

Thank you very much Tibi. :) I’m really happy to hear that!

Hi, I just saw the demo. I need some clarification. Can I just setup a website like your demo with your script or is that additional? – I guess I want to do a website similar to your demo but change the color, images and text content. Is this what you are offering?

Hi envirogex,

The downloadable zip file contains the following:
  • The plugin’s scripts and stylesheets
  • The plugin’s complete documentation
  • The 4 premade templates which you can see on the website with their images, scripts and styles (imagine, misty-woods, daydream and portfolio)
  • CoffeeScript and Sass files
  • Changelog

The actual presentation page is not included, but I will add new premade templates periodically (already added the new daydream template).

You can add parallax effects using imagine to any existing website and the documentation helps you do it easily.

Thank you for your interest and please do not hesitate to ask if there’s anything else you’d like to know about!

Nice work gud luck

Thank you very much, AliA. Best of luck to you as well.

Great work :-) GL

Thank you very much HedyGraphics! You have some great work yourself as well! :)

nice effects, but the amount of cpu is uses is pretty high

Hi piglabs,

All the animations are completely GPU accelerated. The performance of GPU acceleration highly depends on your hardware and browser.

I am constantly striving to make it as lightweight as possible, but a true and correct parallax effect requires many mathematical formulas to be computed.

Simple animations will be completely lag free, while more complex ones such as layered backgrounds will always have a bit heavier computational impact because we’re animating 5-10 images with transparent background and a 1920×1280 size in the same place.

Thank you for your interest!

Thank you, Eric!

Those letter graphics are great! This would make a killing as a Visual Composer Addon WP plugin…. any future plans?

Hey ChrisThree, really happy you like it! I’ll definitely release Imagine as a WP Visual Composer Add-on and/or standalone WP Plugin.

My aim is having the script perfectly optimized before moving on to develop the WordPress version. Parallax animations are usually resource heavy, but Imagine uses advanced techniques to make sure the performance impact is minimal.

If you want to, you can follow me on Envato or Social Media to see when the WP version will be released.

I’m not familiar with using SASS or CoffeeScript. Are regular CSS files also included with the download?

Hi weberdesignstudio,

All the assets you’ll need are included with the download:
  • HTML Files
  • CSS Files
  • JS Files
  • Images
  • Documentation
  • Usage Examples

Thank you for your interest! Let me know if there’s anything else you want to know.

Hi pixevil. Thanks very much for your prompt reply. Much appreciated.

Hey, it looks awesome. Is it possible to do sticky elements? Like scrollmagic sticky element?

Hi Mjbigo,

Imagine does not support explicitly pinning elements. It is more focused on parallax backgrounds and naturally parallaxing elements inside a chosen container (i.e. everything similar to parallax backgrounds). It is possible to pin an element for as long as the element is in view using a 1x scroll progress factor, but the pinning is only active as long as the parent container is in view.

Thank you for your interest!

Hi Mjbigo

Looks awesome, does it work horizontally too?

Cheers

Rob

No I’m starting from scratch as I really want to use the full benefit of your script (which is amazing… just thought I’d fee the ego again) An example of both horizontal solutions would be awesome.

I’m wanting to use it in a bit of story telling so that as the scroll things pop into view, rise up, disappear, etc. If that helps at all.

Cheers

Great idea! I’ll prepare the demos and include them in the download package. Make sure you send me an email so I can send them to you as soon as they’re ready.

Fantastic fella, send it to rob@intuitiv.design when you can. And again well impressed with the product and the service.

Tried everything, after Install-process WordPress shows: Entpacken des Pakets … (Unpack the package) Das Theme wird installiert … (The theme is installing) Das Paket konnte nicht installiert werden. Dem Theme fehlt das Stylesheet style.css. (The package could not be installed. The theme is missing the Stylesheet style.css) Die Themeinstallation ist fehlgeschlagen. (Theme-installation failed.) Tried with WordPress upload and install function and via FTP. Same Result. Does somebody know an solution? Thx!

Hi JuliusJacobi,

Imagine is a jQuery plugin, not a WordPress plugin. You’ve purchased an item from the wrong category.

If you want parallax effects on your website, the only solution to this is setting the plugin up manually (modifying your theme’s code).

I’m sorry for the inconvenience. Please make sure you check the item’s category when you purchase something on CodeCanyon, because WordPress plugins can be found only in the WordPress Category.

:) Haha. Fail! Ok, thanks.

Hi pixevil,

I recently purchased your plugin. I have an issue, I went to the support system, created an account but I can’t start a discussion. The issue is that for some reason is the only plugin I can’t install, nor WP-plugin dashboard or uploading the file. Through WP it takes sveral minutes (I already checked my upload limit and is OK), and when uploading the file, simply the plugin’s not recognized in any way. Please some help! Thanks in advance.

OMG!!! same error as JuliusJacobi! I’ll try to install it as it has to be, the jQuary plugin, sorry for the mistake, btw it will be useful once installed! Thanks!

Hi Rick,

I’m sorry for the inconvenience. I’m sure you’ll figure out how to install it as it’s fairly a simple process, even if you’ll be doing it manually.

Let me know if there’s anything I can help you with.

Hi there, I’m thinking of buying this but need to know if I can it allows a fade transition between backgrounds that are on a parallax index.

Hi Nicholis, do you have an example of what you’re trying to achieve? Imagine allows fade transitions, but I’m not sure if it’s what you’re looking for.

This comment is currently being reviewed.

Can we use Percentage here data-imagine=”x -500..200 to-middle”

The reason i ask is in responsive this data varies and the positions change. Am using absolute position elements which am animating horizontally using X one on top of another

Yes, you can use yPercent for y percentage values. The scale parameter is already percentage based. A value of 2 will be twice the size of the original scale.

Can you please check this link in desktop or laptop http://bit.ly/2nlrG3d

please wait for the page to load and the scroll down. I have a section where i have sliced up an app image and am trying to join to form it into a single image. The problem is when joining it always does not revert to the original state i.e. 0. On occasions if you carefully scroll without speed we can get it to fall in the same place.

Is there any workaround to ensure the scroll get completed and matches the exact value provided.

Another question is is there any way to trigger an action after the scroll is completed? or trigger one scroll after another scroll has completed.

Theoretically, it will stop at the same point every time. The problem here is that we’re using pixels as integers, not floating point values. You cannot have 2.5 pixels. The browser will sometimes stop at 1.999 because it has rendered the item to be positioned correctly, (or not, at least it thinks it is).

The demo isn’t working, unfortunately. However, I understand what you’re talking about. You can try to hard-set the values using JS when progress reaches >0.99 or making the 2 parts overlap at least 1 pixel so you can be sure it will always match.

Here’s how you can use events to trigger actions: https://pixevil.com/imagine/documentation/api/events

Legend! Glws!

Hehe, thank you! Happy you like it!

Does it works with visual composer? Thanks!

Hi miguelcarino,

Imagine is a standalone JavaScript plugin and is not compatible with Visual Composer. Thank you for your interest!

Does it work with wordpress?? Have a plugin?

At the moment there’s no WP plugin for Imagine. I was working on it at some point, but my current schedule doesn’t allow me to finish it.

I will release it sometime in the future, but I cannot say when.

Thank you for your interest!

Can this be added to a Shopify website page?

Hi Milan_S,

Being a standalone JS plugin, it can be added to any website. It is not a Shopify plugin, but it can be added. It will require some development work, depending on what you’re trying to achieve, so I suggest you hire a developer to implement Imagine for you in your website.

Thank you for your interest!

This is very buggy on mobile devices if the Y coordinate is negative. Here’s what I have…

data-imagine=”y -0.5 to-middle”

Where my css loads a svg into that div as a background-image. Is there any fix for this?

Oh thank you for looking into this. I’m glad you can see the issue.

kinoli10

kinoli10 Purchased

Has there been any progress on this?

Please let me know if the workaround mentioned earlier works for you so I can put it inside the documentation for troubleshooting.

hi, will this work with boxed type website layout? thanks

Hi langit,

It should theoretically work with any well-coded website. Thank you for your interest!

kinoli10

kinoli10 Purchased

I have a new issue to report and wondering if there’s a quick fix for it. I have a logo with 4 parts (letters). They all start at different Y axis’ and as you scroll they come together lined up in the middle. However, if you scroll too fast, they don’t end up lining up. It seems like on the complete function, you need to set the element to the final position.

Unfortunately the SVGs don’t get saved when I save the page in the browser. Can you try to use the following code?

    <section class="imagine">
        <div class="imagine-layer a" data-imagine-left="100" data-imagine-top="0" data-imagine-width="200" data-imagine-height="200" data-imagine="y 0.4" />
        <div class="imagine-layer i" data-imagine-left="300" data-imagine-top="0" data-imagine-width="200" data-imagine-height="200" data-imagine="y 0.4" />
        <div class="imagine-layer c" data-imagine-left="500" data-imagine-top="0" data-imagine-width="200" data-imagine-height="200" data-imagine="y 0.4" />
        <div class="imagine-layer p" data-imagine-left="700" data-imagine-top="0" data-imagine-width="200" data-imagine-height="200" data-imagine="y 0.4" />

        <!-- A black background with the size of the final image, i.e. 1000x400 -->
        <img class="imagine-background" src="background.jpg" /> 
    </section>

Make sure you change the CSS to point to the a,i,c,p letters SVG for the imagine-layers.

kinoli10

kinoli10 Purchased

That didn’t work. However, the bigger problem is the very bottom paralax. When the “to-middle” is added to each of the imagine divs and if you scroll somewhat fast, they never end up lining up.

Hi again, I’m on vacation at the moment so I won’t be able to fiddle around with the new version you have updated until I’m back.

I’ll keep looking into this until it’s fixed. I just hope that this isn’t a bug with Safari.

I’ll be back in approximately 2 weeks. Thank you for your cooperation and understanding!

by
by
by
by
by
by