This author's response time can be up to 1 business day.
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?
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
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?
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?
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.
Looks awesome, does it work horizontally too?
I’m happy to hear you like it. It works both vertically and horizontally. Switching to a horizontal orientation is easily done using the orientation parameter:
Thanks mate, I have now bought the script… well impressed…. BUT I am struggling to get the vertical working. Do you have a basic example you could drop my way so I can better understand. I’m sure seeing a working example of vertical scrolling would clear the cobwebs from my eyes.
Again LOVE your work and appreciate the quick responses.
Do you have a demo website so I can see where you’re trying to apply it? If your scrolling happens inside a container, you’ll need to add a few parameters.
Still, I’ll get a horizontal parallax demo ready for you so you can see how it works.
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.
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 email@example.com 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?
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.
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!
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
Right now you cannot use percentages, but it would be an easy addition. I’ll update imagine and add this feature.
After the update, you’ll be able to use the xPercent and yPercent operators (they should be available already but are not handled like x and y animations).
Is there any way you can update this or direct me how to do this as I have an urgent requirement for which I am using the script and am stuck because of this.
Can you let me know if it’s an easy fix or if it will take time so I can plan accordingly and look at other options. Thanks.
I’ve uploaded the update. It should be available soon. If it’s an emergency, send me an email so I can send you the updated script before it gets approved by the review team.
xPercent -500..200 to-middle
I have sent my email address You via pm. It would be great if you can send the files to firstname.lastname@example.org also will the percent work for other properties other than X and Y
Any update on this? Code canyon has not updated the files.
The update is already approved. You can simply redownload imagine from the CodeCanyon dashboard.
The updated file is imagine.js from the js folder.
What other properties do you have in mind?
It would be greta to have it for Y and Scale as well. I just tested xPercent and didn’t see any difference form what it used to be before…
Sorry about the last comment. The Percentage values are working fine… I saw what you did in the JS can i use the same for Y and Scale properties?
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.
Hehe, thank you! Happy you like it!
Does it works with visual composer? Thanks!
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.
Can this be added to a Shopify website page?
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.
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?
Are you able to provide me with a demo? It’s very hard to understand what’s happening or what it looks like just from the description.
Sure, have a look at aicp.com. The home page has 3 sections with ‘Imagine’ on it. Each section has 4 shapes but on mobile oftentimes 1 or 2 of those sections don’t show up. It seems the negative values are the worst.
It’s running very smoothly on my iPhone 7 and Samsung Galaxy S8. What mobile device and browser are you using?
I’m also on an iPhone 7. You will notice not all of the 4 shapes show up unless you scroll up and down after those sections appear. At which point they then become very smooth.
Interesting. I see that “slight jump” now that I’ve scrolled up and down a few times. I’ll look into it and provide an update that fixes it. Thank you for letting me know about the problem.
Oh thank you for looking into this. I’m glad you can see the issue.
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
It should theoretically work with any well-coded website. Thank you for your interest!
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.
I don’t have a visible example at this time since I replaced the logo with a static image until I can get a fix, hopefully from you
I might have a temporary fix for this. I’m still adjusting the plugin’s parameters to get a good solution.
The fix which works in my tests is to use the same size for both the background and the layers, essentially overlapping the elements perfectly. Being png layers you’ll still get transparency, but they’ll be ending having the same middle point all the time, forming a whole image.
I don’t have an estimate as for when I’ll be done with the update, since I’ve started work on a large project, but I’m actively working on it in my spare time.
I have the background sizes set to the same size, they have svg’s in them that are transparent. But they don’t end in a lined up position, like I mentioned above.
Hey, I’ve been trying to reproduce the problem you’re encountering for the aicp website but I can’t manage to do it.
Could you please try to see if setting up the parallax section as a standard imagine markup will solve it?
Here https://pixevil.com/imagine/documentation/getting-started/adding-image-layers you can find the code for how a section using layers should be marked up like.
Please make sure you use imagine’s implicit way of positioning layers and also remove all styles from your css which impact these layers, respectively .parallax-layers and .parallax-layers > div.
.parallax-layers > div
If you can send me the homepage with its assets I can play around with it myself and see what might be impacting it to behave this way.
I wonder if it is because I’m using svg’s. I could probably fix it if I had the unminimized version of the code. Any chance I could get that from you?
Also, you should be able to just save the home page in your browser and then you will get all of the assets of the page.
Unfortunately the SVGs don’t get saved when I save the page in the browser. Can you try to use the following code?
<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" />
Make sure you change the CSS to point to the a,i,c,p letters SVG for the imagine-layers.
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!
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Get it now and save up to $5
Deliver better projects faster. Photos, templates & courses
Unlimited downloads. Only $29/month
Learn almost anything with
Envato Tuts+ for free
9000 free tutorials, 3000 paid courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work