Sliding image from left to right

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
User avatar
jerryco
 
 
Posts: 282
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Sliding image from left to right

Post by jerryco » Sun Mar 22, 2020 12:17 pm

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 :D
// Love is the acceptance of nothing / So, you're here. Now dance.

/ You want RWD? Rotate your damn phone! //

User avatar
Pablo
 
Posts: 21532
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Sliding image from left to right

Post by Pablo » Sun Mar 22, 2020 2:37 pm


User avatar
jerryco
 
 
Posts: 282
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Sliding image from left to right

Post by jerryco » Sun Mar 22, 2020 3:12 pm

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. :lol:
// Love is the acceptance of nothing / So, you're here. Now dance.

/ You want RWD? Rotate your damn phone! //

User avatar
Pablo
 
Posts: 21532
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Sliding image from left to right

Post by Pablo » Sun Mar 22, 2020 3:29 pm

What information are you missing?
What did you try and where does it stop working?

Siegbert
 
 
Posts: 52
Joined: Thu Jul 04, 2019 5:51 am

Re: Sliding image from left to right

Post by Siegbert » Mon Mar 23, 2020 6:27 am

You can find many instructions on Youtube, which you can also build.
Search for: WYSIWYG Web Builder Animations

User avatar
jerryco
 
 
Posts: 282
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Sliding image from left to right

Post by jerryco » Thu Mar 26, 2020 8:40 am

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.

Image
Image
Image

Problem:
Image
// Love is the acceptance of nothing / So, you're here. Now dance.

/ You want RWD? Rotate your damn phone! //

User avatar
Pablo
 
Posts: 21532
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Sliding image from left to right

Post by Pablo » Thu Mar 26, 2020 8:56 am

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.

User avatar
jerryco
 
 
Posts: 282
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Sliding image from left to right

Post by jerryco » Thu Mar 26, 2020 8:44 pm

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.
// Love is the acceptance of nothing / So, you're here. Now dance.

/ You want RWD? Rotate your damn phone! //

User avatar
crispy68
 
 
Posts: 1053
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Sliding image from left to right

Post by crispy68 » Thu Mar 26, 2020 8:49 pm

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?

User avatar
jerryco
 
 
Posts: 282
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Sliding image from left to right

Post by jerryco » Thu Mar 26, 2020 8:54 pm

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
// Love is the acceptance of nothing / So, you're here. Now dance.

/ You want RWD? Rotate your damn phone! //

User avatar
Pablo
 
Posts: 21532
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Sliding image from left to right

Post by Pablo » Thu Mar 26, 2020 9:30 pm


User avatar
crispy68
 
 
Posts: 1053
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Sliding image from left to right

Post by crispy68 » Thu Mar 26, 2020 10:41 pm

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.

User avatar
jerryco
 
 
Posts: 282
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Sliding image from left to right

Post by jerryco » Fri Mar 27, 2020 9:03 am

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 / So, you're here. Now dance.

/ You want RWD? Rotate your damn phone! //

User avatar
crispy68
 
 
Posts: 1053
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Sliding image from left to right

Post by crispy68 » Fri Mar 27, 2020 6:14 pm

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.

User avatar
jerryco
 
 
Posts: 282
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Sliding image from left to right

Post by jerryco » Fri Mar 27, 2020 6:46 pm

First; thanks. Before I do this; can you confirm that it will work without having to scroll?
// Love is the acceptance of nothing / So, you're here. Now dance.

/ You want RWD? Rotate your damn phone! //

Post Reply