Sliding image from left to right
Forum rules
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Sliding image from left to right
Hello folks, I was wondering if any of you know by heart how to do this:
I would like an image to enter on the left side of the screen, slide through horizontally, and leave on the right side.
I know there are a zillion options, but was wondering if this is my lazy ticket to succes
I would like an image to enter on the left side of the screen, slide through horizontally, and leave on the right side.
I know there are a zillion options, but was wondering if this is my lazy ticket to succes
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
You can use animations or scroll transitions.
http://wysiwygwebbuilder.com/bookmark_events.html
http://wysiwygwebbuilder.com/scroll_transitions.html
http://wysiwygwebbuilder.com/bookmark_events.html
http://wysiwygwebbuilder.com/scroll_transitions.html
Re: Sliding image from left to right
If I say, it's not clear enough, you will probably say, what is not clear enough?
I'm looking for a complete flight plan, not just the ticket. I will simply wait and wait, and wait.
I'm looking for a complete flight plan, not just the ticket. I will simply wait and wait, and wait.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
What information are you missing?
What did you try and where does it stop working?
What did you try and where does it stop working?
Re: Sliding image from left to right
You can find many instructions on Youtube, which you can also build.
Search for: WYSIWYG Web Builder Animations
Search for: WYSIWYG Web Builder Animations
Re: Sliding image from left to right
The reason that I'm still persuing this, is because I have absolutely nothing else to do
So, a friendly person shared his views with me, but I will have to work out the problems myself.
Below, you can see my trial. Now, the problem is that the picture does not exit on the right side of the screen, but before that. I included a screenshot of that as well.
Problem:
So, a friendly person shared his views with me, but I will have to work out the problems myself.
Below, you can see my trial. Now, the problem is that the picture does not exit on the right side of the screen, but before that. I included a screenshot of that as well.
Problem:
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
This does not look correct.
Why are you using show and hide event for the same object? This will most certainly cause a conflict.
Also, 'onload' is usually not the best place to handle animations because scripts may not have been loaded yet at this poijnt.
It's better to use a timer or 'document-ready' for this.
Why are you using show and hide event for the same object? This will most certainly cause a conflict.
Also, 'onload' is usually not the best place to handle animations because scripts may not have been loaded yet at this poijnt.
It's better to use a timer or 'document-ready' for this.
Re: Sliding image from left to right
So is there anybody who holds the magic key here? Showing me a page with information is like giving me keys for a Lambourgini where I am used to riding a horse. Thank you for understanding.
Once again, what I would like to know is:
How can I make a picture (a vacuum robot if you have to know) 'drive by'. So it reveals itself on the left side. And it disappears on the right side. I do not use breakpoints in my design.
Once again, what I would like to know is:
How can I make a picture (a vacuum robot if you have to know) 'drive by'. So it reveals itself on the left side. And it disappears on the right side. I do not use breakpoints in my design.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Is the robot to appear and scroll to the right the second the page is loaded? Is this something to happen on initial load of the page at the top or later down the page when someone scrolls to it?
Re: Sliding image from left to right
Hi, yes, it should go once the page is opened. There is no scroll bar and the picture is in sight immediately.
For you to see, it would be nice a little under my e-mail address.
https://levensgenoot.nl/contact.html
For you to see, it would be nice a little under my e-mail address.
https://levensgenoot.nl/contact.html
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Here are a few templates that may be helpful. They all demonstrate different ways to trigger animations on scroll.
http://www.wysiwygwebbuilder.com/suppor ... 5_red.html
http://www.wysiwygwebbuilder.com/suppor ... orate.html
http://www.wysiwygwebbuilder.com/suppor ... world.html
http://www.wysiwygwebbuilder.com/suppor ... onday.html
http://www.wysiwygwebbuilder.com/suppor ... onuts.html
http://www.wysiwygwebbuilder.com/suppor ... ibiza.html
If the animation you are looking for does not exist then you can create in yourself:
http://wysiwygwebbuilder.com/animation.html
http://www.wysiwygwebbuilder.com/suppor ... 5_red.html
http://www.wysiwygwebbuilder.com/suppor ... orate.html
http://www.wysiwygwebbuilder.com/suppor ... world.html
http://www.wysiwygwebbuilder.com/suppor ... onday.html
http://www.wysiwygwebbuilder.com/suppor ... onuts.html
http://www.wysiwygwebbuilder.com/suppor ... ibiza.html
If the animation you are looking for does not exist then you can create in yourself:
http://wysiwygwebbuilder.com/animation.html
Re: Sliding image from left to right
Are you look for something like this?
https://www.wizbangwebdesign.com/demo/irobot
The animation was created by taking one of the animations already created and tweaking it. You may have to tweak more to what you want.
https://www.wizbangwebdesign.com/demo/irobot
The animation was created by taking one of the animations already created and tweaking it. You may have to tweak more to what you want.
Re: Sliding image from left to right
Hi crispy68, the animation is exactly what I am looking for, but I would want it to appear automatically without scrolling (the page content does not require a scroll either, plenty of space).
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Here is what I did:
In my demo, the small text and email is in a layout grid.
1. Insert a floating layer below the email address set to full width. Set the 'Overflow' property of the layer to 'hidden'. Insert the image of the irobot into this layer and make the height of the layer match the height of the image.
2. Go to Tools --> Animation Manager and locate the 'slide-left-in' animation. Select it and make a copy. Open up the copy and change the name of the animation to whatever you want (ex: slide-left-to-right). I changed the following keyframes:
0 opacity 0 - change to - 0 visibility visible
100 opacity 1 - change to - 100 visibility hidden
open up the: 0 transform property and change the 'Translate X' from 100% to -300px (change the 300 to whatever the width of your image is)
open up the: 100 transform property and change the 'Translate X' from 0 to calc(100vw + 300px) (again change the 300 to whatever the width of your image is). Also, make sure there is a space before and after the plus sign.
3. Go back and open up the properties of the layer, click on Events and add the following:
Event = onscrollreveal
Action = animate (css3)
Target = your image ID
Animation = slide-left-to-right (or whatever name you gave it)
Duration = 15000 (or whatever you want - this is 15sec)
4. Click on the image in the Object Manager and uncheck the visible box to make it not visible. This will keep it from flashing and briefly seeing it when the page loads.
In my demo, the small text and email is in a layout grid.
1. Insert a floating layer below the email address set to full width. Set the 'Overflow' property of the layer to 'hidden'. Insert the image of the irobot into this layer and make the height of the layer match the height of the image.
2. Go to Tools --> Animation Manager and locate the 'slide-left-in' animation. Select it and make a copy. Open up the copy and change the name of the animation to whatever you want (ex: slide-left-to-right). I changed the following keyframes:
0 opacity 0 - change to - 0 visibility visible
100 opacity 1 - change to - 100 visibility hidden
open up the: 0 transform property and change the 'Translate X' from 100% to -300px (change the 300 to whatever the width of your image is)
open up the: 100 transform property and change the 'Translate X' from 0 to calc(100vw + 300px) (again change the 300 to whatever the width of your image is). Also, make sure there is a space before and after the plus sign.
3. Go back and open up the properties of the layer, click on Events and add the following:
Event = onscrollreveal
Action = animate (css3)
Target = your image ID
Animation = slide-left-to-right (or whatever name you gave it)
Duration = 15000 (or whatever you want - this is 15sec)
4. Click on the image in the Object Manager and uncheck the visible box to make it not visible. This will keep it from flashing and briefly seeing it when the page loads.
Re: Sliding image from left to right
First; thanks. Before I do this; can you confirm that it will work without having to scroll?
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Does my demo work without scrolling?
Re: Sliding image from left to right
Hmm, on my main browser (Firefox) your demo only goes after scrolling a little bit. It may simply be my browser (I disabled NoScript). It does work immediately on Chrome and Opera. Could you check using Firefox?
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Yes it works on FF.
Wouldn't matter how I set it up, if you have noscript enabled it wouldn't work anyway.
It uses onscrollreveal. So as long as it is visible in the browser it will work. Plus you wouldn't want it to animate if it was technically offscreen would you?
Wouldn't matter how I set it up, if you have noscript enabled it wouldn't work anyway.
It uses onscrollreveal. So as long as it is visible in the browser it will work. Plus you wouldn't want it to animate if it was technically offscreen would you?
Last edited by crispy68 on Fri Mar 27, 2020 7:03 pm, edited 2 times in total.
Re: Sliding image from left to right
Thank you so much. I will have a play over the weekend and let you know what happens.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
I cannot seem to deal with a layout grid. When I insert it, it just keeps sticking on the top of the screen. Any thoughts? Once again, I just don't ever use elements like this. Sorry.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Dear crispy68, is the layout grid required?
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Nois the layout grid required?
Re: Sliding image from left to right
Okay, wow, I never did anything this complicated in my life
I simply uploaded it for you to see: https://levensgenoot.nl/contact.html
I left the layer's background to what it is (off-white) so we can see where it is. On top, apparently
Here are the settings from the animation window:
The picture I'm using is 155 width, 158 height.
I simply uploaded it for you to see: https://levensgenoot.nl/contact.html
I left the layer's background to what it is (off-white) so we can see where it is. On top, apparently
Here are the settings from the animation window:
The picture I'm using is 155 width, 158 height.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Sorry, i used a layout grid as I assumed you were making a responsive floating layout.
Please go back and re-read step #2 regarding change the opacity property to the visibility property. It is incorrect.
Please go back and re-read step #2 regarding change the opacity property to the visibility property. It is incorrect.
Re: Sliding image from left to right
I think I used 100 for visible and 0 for invisible. I could not see visibility visible and visibility hidden?
Could you give me the stupid treatment for changing the wrong values?
Could you give me the stupid treatment for changing the wrong values?
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
just type in the value.... so type 'visible' and 'hidden'.
Re: Sliding image from left to right
Some things are easy Getting close, please see:
https://levensgenoot.nl/contact.html
I can't drag the layer lower in WWB. Any thoughts?
https://levensgenoot.nl/contact.html
I can't drag the layer lower in WWB. Any thoughts?
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
What kind of layer are you using?
If you are using a floating layer (like I indicated initially) but you are not creating a floating layout then try changing the floating layer to just a regular default layer. I havent actually tried this yet.
I just assumed you were creating a floating layout and not a fixed layout.
If you are using a floating layer (like I indicated initially) but you are not creating a floating layout then try changing the floating layer to just a regular default layer. I havent actually tried this yet.
I just assumed you were creating a floating layout and not a fixed layout.
Last edited by crispy68 on Sat Mar 28, 2020 3:00 pm, edited 1 time in total.
Re: Sliding image from left to right
Crispy! Crispy! Crispy!
And, after many days, it was so: https://levensgenoot.nl/contact.html
Thank you.
And, after many days, it was so: https://levensgenoot.nl/contact.html
Thank you.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
So, on with the stupidity. I used the Animation Manager, right? To create a copy and then make a new one. What will happen if I upgrade to a new version of Web Builder?
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Your personal animations will not be overwritten.
Re: Sliding image from left to right
Great.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Hello Pablo, just wondering if I change to a new machine, how would that affect my project's animation?
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Re: Sliding image from left to right
Usually when you move to a new machine, then you should copy the entire document folder.
This includes custom animations.
Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=30276
This includes custom animations.
Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=30276
Re: Sliding image from left to right
Now I see it, animations.dat. Makes sense now. Thanks.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!