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.
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
Unlimited downloads only
$29 p/m on Envato Elements
Download over 18,000 items now
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