Interesting video Irmran just goes to show that there are multiple ways to do things and of course knowing the abilities of your Page Builder of choice helps avoid code
Thank you for the video! It does also work perfectly with landscape and panorama images with horizontal scrolling. Could be another situation where you can use this solution.
Brilliant! I have a plugin that let me do it in a easier way, today when i was lookin for the widget to add it i was so stupid and couldn't find it :/ thanks god youre here with this video hahah thanks
This tip is amazing. what software is everyone using, to create/extract a photo/screenshot of a single page on the website? Exactly what's in the video..
@@websquadron Brilliant. I just got it and it works perfectly.. I did notice that it does not work correctly with my parallax effect. it does create some broken images, however, for a purpose of extracting the page screenshot, I could always temporally disable the effect I think. Keep it going with your videos They are great.. I am of a belief, that if you can't do something yet, that means don't try hard enough :)
@@sebastiansoyke Ah yes, I should have mentioned that. Indeed. It breaks with Parallaz :( In that case, disable them by switching to 'Scroll' and then put them back to 'Fixed' after taking the screenshot :)
Nice Imran. Suppose you wanted to show off a web design - long image of whole page - but have it look like it's scrolling inside a screen - I'm sure you know the kind of thing I mean. So someone starts by seeing a computer screen/monitor displaying the top of a webpage, they hover over it, and the web page scrolls inside the screen. There must be a way to do that utilising this? Cheers!
The biggest issue I see with this is now you're having to use 2 images that are quite large and can be anywhere from 5-12 MB per image. Even if converting to WebP the images are still very large. I did manage to compress them down to just under 1MB but the quality was terrible. Any ideas?
@@websquadron I just realozed that the full screen capture app I am using was capturing at 2200 px wide and resized them to 800 wide which brought them down to 400kb. I actually have some CSS now that works for container background image scrolling which eliminates having to use the hover image but it was your video that put me on the right path. Who would thought something that simple would work lol
Thanks Irmran The truth is that I tried this patent and it is quite successful. The thing I discovered is that the longer the image is - it gets an unexplained blur (like a significant decrease in quality and resolution) - so especially long images are completely blurred. Do you know this issue? Is there any solution for this?
@@websquadron yeah, currently running latest wp + elementor pro. The effect unfortunately doesn't scroll it just jumps to the bottom immediately. Theres a couple of other videos that do the same with the use of a mockup (imac screen which is what I am going for) but they do the same thing as you do in your video. I have no idea why it just jumps to the bottom of the long image:/
I am a web instructor but sir you are my teacher I respect you so much❤
Wow, thanks
great bro, thanks
Mindblowing indeed! I did that with JS before. You don't need a spacer, you can just add a height to the container.
Very true
Interesting video Irmran just goes to show that there are multiple ways to do things and of course knowing the abilities of your Page Builder of choice helps avoid code
Mind-blowing really :) Your code had more finesse to it as you notice with this version and how long it takes to scroll back up.
thanks, you have solved my problem by saving me couple of bucks 💌
What?? :O this is mind blowing. Thank you so much!
You are so great thank you so much
Wow! Thank you so much. It works !
amazing video. thank you so much
Glad you liked it!
Thanks Great, GuYS this is working on webflow also .
worked beautifully thanks maaan
Thank you for the video! It does also work perfectly with landscape and panorama images with horizontal scrolling. Could be another situation where you can use this solution.
Good call!
Thank youuuuuuuu so muchh🎉
good one imran ,enjoyed and learned sth new
Glad to hear that
Wow
Thank you so much Imran
tnx
Brilliant! I have a plugin that let me do it in a easier way, today when i was lookin for the widget to add it i was so stupid and couldn't find it :/ thanks god youre here with this video hahah thanks
Amazing tip
Glad you liked it
thanks bro
Any time
This tip is amazing.
what software is everyone using, to create/extract a photo/screenshot of a single page on the website? Exactly what's in the video..
GoFullPage - Chrome Extension - it's super good.
@@websquadron Brilliant. I just got it and it works perfectly.. I did notice that it does not work correctly with my parallax effect. it does create some broken images, however, for a purpose of extracting the page screenshot, I could always temporally disable the effect I think.
Keep it going with your videos They are great.. I am of a belief, that if you can't do something yet, that means don't try hard enough :)
@@sebastiansoyke Ah yes, I should have mentioned that. Indeed. It breaks with Parallaz :( In that case, disable them by switching to 'Scroll' and then put them back to 'Fixed' after taking the screenshot :)
Thanks u dada ❤
That is brilliant
Many thanks
Top one ❤️
Nice Imran.
Suppose you wanted to show off a web design - long image of whole page - but have it look like it's scrolling inside a screen - I'm sure you know the kind of thing I mean. So someone starts by seeing a computer screen/monitor displaying the top of a webpage, they hover over it, and the web page scrolls inside the screen.
There must be a way to do that utilising this?
Cheers!
Could add an overlay onto the column.
Awesome
great!
Great tutorial! Do you have a code to do this automatically?
Not with some code (yet).
The biggest issue I see with this is now you're having to use 2 images that are quite large and can be anywhere from 5-12 MB per image. Even if converting to WebP the images are still very large. I did manage to compress them down to just under 1MB but the quality was terrible. Any ideas?
5mb is very big. What are the dimensions.
@@websquadron I just realozed that the full screen capture app I am using was capturing at 2200 px wide and resized them to 800 wide which brought them down to 400kb. I actually have some CSS now that works for container background image scrolling which eliminates having to use the hover image but it was your video that put me on the right path. Who would thought something that simple would work lol
Thanks Irmran
The truth is that I tried this patent and it is quite successful. The thing I discovered is that the longer the image is - it gets an unexplained blur (like a significant decrease in quality and resolution) - so especially long images are completely blurred.
Do you know this issue? Is there any solution for this?
This would need 1-2-1 Consultation to problem solve better
Is it possible to place the image within a mockup ?
Yea and then give it the class name behind the mockup.
How could one frame this into a computer screen?
will it work for mobile view?
Yes
and how will it work on mobile?
You adjust the layout or add @media so it only works like that for the dekstop.
How to create image longer
Change the dimensions.
How to change image with hover image scroll
this no longer seems to work:/
It does as I still use it.
Can you explain more about which bit is not working?
@@websquadron yeah, currently running latest wp + elementor pro. The effect unfortunately doesn't scroll it just jumps to the bottom immediately. Theres a couple of other videos that do the same with the use of a mockup (imac screen which is what I am going for) but they do the same thing as you do in your video. I have no idea why it just jumps to the bottom of the long image:/
@@stavrosvorkas2608 Its not working anynmmore ? i also have the same problem of jumping to the end
@@websquadron Experiencing the same problem. It jumps to the bottom regardless of how long you set the transition duration for.
Its work for me@@websquadron